@extends('layouts.base')

@section('title', 'Starter Page')

@section('css')
    {{-- include page's specific styles here  --}}
@endsection


{{-- @section('intitule')
    <h5 class="font-weight-medium text-uppercase mb-0">PROFIL PAGE </h5>
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Profil page</li>
@endsection

@section('styles')
@endsection --}}

@section('content')
    <div class="bg-white p-5" style="height: 100%">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                @if ($numero == 1)
                    <a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab" style="font-size: large">
                        <span>Activités</span>
                    </a>
                @else
                    <a class="nav-link" data-bs-toggle="tab" href="#home" role="tab" style="font-size: large">
                        <span>Activités</span>
                    </a>
                @endif
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab" style="font-size: large">
                    <span>Profile</span>
                </a>
            </li>
            <li class="nav-item">
                @if ($numero == 0)
                    <a class="nav-link active" data-bs-toggle="tab" href="#messages" role="tab"
                        style="font-size: large">
                        <span>Paramètres</span>
                    </a>
                @else
                    <a class="nav-link" data-bs-toggle="tab" href="#messages" role="tab" style="font-size: large">
                        <span>Paramètres</span>
                    </a>
                @endif
            </li>
            <li class="nav-item">
                @if ($numero == 2)
                    <a class="nav-link active" data-bs-toggle="tab" href="#password" role="tab"
                        style="font-size: large">
                        <span>Mot de passe</span>
                    </a>
                @else
                    <a class="nav-link" data-bs-toggle="tab" href="#password" role="tab" style="font-size: large">
                        <span>Mot de passe</span>
                    </a>
                @endif
            </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane @if ($numero == 1) show active @endif" id="home" role="tabpanel">
                <div class="p-5">
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <div class="card" style="border: solid #cfcfcf 0.07em; box-shadow: -2px 2px 7px #cfcfcf">
                                <div class="card-header bg-white d-flex align-items-center"
                                    style="border-bottom: solid #cfcfcf 0.02em">
                                    <h4 class="card-title text-dark">GestStudent</h4>
                                    <div class="card-actions ms-auto d-flex button-group">
                                        <a class="mb-0 link d-flex align-items-center pe-0" style="color: #cfcfcf;"
                                            data-action="">
                                            <i data-feather="x" class="feather-sm"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="card-body collapse show text-center">
                                    @if (!count($activites))
                                        <p class="card-text text-danger">Aucune activité...</p>
                                    @else
                                        <table>
                                            <tr>
                                                <th>Adresse</th>
                                                <th>Opération</th>
                                                <th>Date</th>
                                            </tr>
                                            @foreach ($activites as $activite)
                                                <tr>
                                                    <th>{{ $activite->adresseip }}</th>
                                                    <th>{{ $activite->operation }}</th>
                                                    <th>{{ $activite->dateActivite }}</th>
                                                </tr>
                                            @endforeach
                                        </table>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane  p-3" id="profile" role="tabpanel">
                <div class="row m-3" style="border-bottom: solid #cfcfcf 1px">
                    <div class="col-md-3 col-xs-6" style="border-right: solid #cfcfcf 1px">
                        <strong class="prof">Full Name</strong><br />
                        <p class="text-muted">{{ $infoUser->nom }} {{ $infoUser->prenom }}</p>
                    </div>
                    <div class="col-md-3 col-xs-6" style="border-right: solid #cfcfcf 1px">
                        <strong class="prof">Mobile</strong><br />
                        <p class="text-muted">{{ $infoUser->country_code }} {{ $infoUser->phone }}</p>
                    </div>
                    <div class="col-md-3 col-xs-6" style="border-right: solid #cfcfcf 1px">
                        <strong class="prof">Email</strong><br />
                        <p class="text-muted">{{ $infoUser->email }}</p>
                    </div>
                    <div class="col-md-3 col-xs-6" style="border-right: solid #cfcfcf 1px">
                        <strong class="prof">Nationalité</strong><br />
                        <p class="text-muted">{{ $infoUser->nationalite }}</p>
                    </div>
                </div>
            </div>
            <div class="tab-pane @if ($numero == 2) show active @endif p-4" id="password" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <form class="form-material mt-4" method="POST" action={{ route('update_passwd') }}>
                            @csrf
                            @if (Illuminate\Support\Facades\Session::has('erreurChang'))
                                <script>
                                    Swal.fire({
                                        title: 'ERREUR!',
                                        text: <?php echo Illuminate\Support\Facades\Session::get('erreurChang'); ?>,
                                        icon: 'info',
                                        confirmButtonColor: '#8cd4f5'
                                    });
                                </script>
                            @endif
                            <div class="mb-3">
                                <label style="font-weight: bolder;" for="matricule">Mot de passe actuel</label>
                                <input type="password" class="form-control @error('oldPassword') is-invalid @enderror"
                                    placeholder="Mot de passe actuel" id="oldPassword" name="oldPassword" required>
                                @error('oldPassword')
                                    <div class="alert text-danger">{{ $message }}</div>
                                @enderror
                                @if (Illuminate\Support\Facades\Session::has('erreurPass'))
                                    <div class="alert text-danger">
                                        {{ Illuminate\Support\Facades\Session::get('erreurPass') }}</div>
                                @endif
                            </div>
                            <div class="mb-3 ">
                                <label style="font-weight: bolder;" for="password">Nouveau mot de passe</label>
                                <div class="row" id="pwd">
                                    <div class="col-md-6">
                                        <input type="password"
                                            class="form-control @error('password') is-invalid @enderror"
                                            placeholder="Nouveau mot de passe" id="password" name="password" required>
                                        @error('password')
                                            <div class="alert text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <input type="password"
                                            class="form-control @error('password_confirmation') is-invalid @enderror"
                                            placeholder="Confirmez le nouveau mot de passe" id="password_confirmation"
                                            name="password_confirmation" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <button id="passwordUpdate" type="submit" class="btn btn-success">Changer le mot de
                                    passe</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="tab-pane @if ($numero == 0) show active @endif p-3" id="messages"
                role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <form class="form-material mt-4" method="POST" action={{ route('update_prof') }}>
                            @csrf
                            <div class="mb-3">
                                <label style="font-weight: bolder;" for="matricule">Matricule</label>
                                <input type="text" class="form-control form-control-line"
                                    value={{ $infoUser->matricule }} readonly id="matricule" name="matricule" required>
                            </div>
                            <div class="mb-3">
                                <label style="font-weight: bolder;" for="name">Full Name</label>
                                <input type="text" class="form-control form-control-line"
                                    value="{{ $infoUser->nom }} {{ $infoUser->prenom }}" readonly id="name"
                                    name="name" required>
                            </div>
                            <div class="mb-3">
                                <label style="font-weight: bolder;" for="email">Email</label>
                                <input type="email" id="email" name="email"
                                    class="form-control @error('email') is-invalid @enderror" placeholder="Email"
                                    value={{ $infoUser->email }} required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label style="font-weight: bolder;" for="phone">Phone No</label>
                                <input type="number" class="form-control @error('phone') is-invalid @enderror"
                                    placeholder="Votre numero de téléphone" id="phone" name="phone"
                                    value="{{ $infoUser->phone }}" required>
                                @error('phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label style="font-weight: bolder;" for="description">Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" rows="15" name="description"
                                    id="description">{{ old('description') }}</textarea>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-12">
                                <button id="profileupdate" type="submit" class="btn btn-success">Update Profile</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
@endsection
