@extends('layouts.base',
    $breadcrumb = [
        "title" => "PROFILE",
        "showNav" => false
    ]
)

@section('title', 'Profil')

@section('css')
    <style>
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            background-color: #ffffff;
            border-bottom: 1px solid #ffffff;
        }

        .profil-content {
            width: 3rem;
            height: 3rem;
            background-position: center center;
            background-size: cover;
            display: block;
            margin-left: auto;
            margin-right: auto;
            background: rgb(245, 245, 245);
        }

        .nav-tabs.manage-tabs .nav-item.show .nav-link {
            color: var(--gs-text-primary) !important;
            background-color: var(--gs-primary) !important;
        }

        .nav-tabs.manage-tabs .nav-link {
            background-color: var(--gs-primary) !important;
        }

        .nav-tabs.manage-tabs .nav-item.show .nav-link::after,
        .nav-tabs.manage-tabs .nav-link.active::after {
            border-top-color: var(--gs-primary) !important;
        }

        .nav-tabs.manage-tabs .nav-link.active {
            color: var(--gs-text-primary) !important;
            background-color: var(--gs-primary-light) !important;
        }

        .nav-tabs.manage-tabs .nav-link.active::after {
            border-top-color: var(--gs-primary-light) !important;
        }
    </style>
@endsection

@section('content')
    @php
        $role = userRole(session('type_user'))[session('type_user')];
    @endphp
    {{-- alert with content --}}
    @include('partials.alert')

    <div class="row justify-content-center mt-4" style="min-height: calc(85vh - 60px)">
        @if ( session('update_password') == 0)
            <div class="col-sm-12">
                <div class="card card-body"  style="background-color: transparent;">
                    <div class="text-center">
                        <div class="alert customize-alert alert-dismissible text-primary border border-primary fade show" role="alert"  style="background-color: white;">
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            <div class="d-flex align-items-center font-weight-medium">
                                <i data-feather="info" class="text-primary feather-sm me-2 flex-shrink-0"></i>
                                <span class="text-dark">
                                    VEUILLEZ METTRE A JOUR VOTRE MOT DE PASSE!!!
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div class="row">
            <div class="col-lg-12 d-flex align-items-stretch">
                <div class="card w-100">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs manage-tabs profile-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#info" role="tab">
                                <span class="hidden-sm-up">
                                    <h4><i data-feather="users" class="feather-sm"></i></h4>
                                </span>
                                <span class="d-none d-md-block">Informations</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#messages" role="tab">
                                <span class="hidden-sm-up">
                                    <h4><i data-feather="file-text" class="feather-sm"></i></h4>
                                </span>
                                <span class="d-none d-md-block">Activités</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#settings" role="tab">
                                <span class="hidden-sm-up">
                                    <h4><i data-feather="lock" class="feather-sm"></i></h4>
                                </span>
                                <span class="d-none d-md-block">Paramètres</span>
                            </a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="info" role="tabpanel">
                            <div class="row py-4 px-5 no-gutters mt-3">
                                <div class="col-sm-12 col-md-6 d-flex justify-content-start">
                                    <h3 class="card-title mb-0">Informations personnelles</h3>
                                </div>
                            </div>
                            <div class="">
                                <div class="container-fluid page-content">
                                    <div class="row el-element-overlay">
                                        <div class="col-lg-3 col-md-6 col-sm-12 mx-auto">
                                            <div class="card mr-2 mx-auto">
                                                <div class="el-card-item pb-3">
                                                    <div class="el-card-avatar my-3 el-overlay-1 w-100 overflow-hidden position-relative text-center">
                                                        <img
                                                            src="{{ getImgPath2('PROFIL', session('cheminPhoto'), session('type_user'))}}"
                                                            alt="{{ session('username') }}"
                                                            onerror="this.onerror=null;this.src='{{ asset('/assets/images/avatar.png') }}';"
                                                            class="d-block position-relative profil-content w-100"
                                                        />
                                                        <div class="el-overlay w-100 overflow-hidden">
                                                            <ul class="list-style-none el-info text-white text-uppercase d-inline-block p-0">
                                                                <li class="el-item d-inline-block my-0 mx-auto">
                                                                    <a class="btn default btn-outline image-popup-vertical-fit el-link text-white border-white" href="{{ getImgPath2('PROFIL', session('cheminPhoto'), session('type_user'))}}">
                                                                        <i class="icon-magnifier"></i>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="el-card-content text-center">
                                                        <h4 class="mb-0">{{ $data['nom'] .' '. $data['prenom'] }}</h4> <span class="text-muted">{{ $role }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-9 col-md-6 col-sm-12">

                                            <div class="row m-3">
                                                <div class="col-md-6 col-sm-12 col-xs-6">
                                                    <strong>Nom & Prénom(s)</strong><br />
                                                    <p class="text-muted">{{ $data['nom'] .' '. $data['prenom'] }}</p>
                                                </div>
                                                <div class="col-md-6 col-sm-12 col-xs-6">
                                                    <strong>Contact</strong><br />
                                                    <p class="text-muted">{{ '('. $data['country_code'] .')'. $data['phone'] }}</p>
                                                </div>
                                                <div class="col-md-6 col-sm-12 col-xs-6">
                                                    <strong>Email</strong><br />
                                                    <p class="text-muted">{{ $data['email'] }}</p>
                                                </div>
                                                <div class="col-md-6 col-sm-12 col-xs-6">
                                                    <strong>Nationalité</strong><br />
                                                    <p class="text-muted">{{ $data['nationalite'] }}</p>
                                                </div>
                                                <div class="col-md-6 col-sm-12 col-xs-6">
                                                    <strong>Sexe</strong><br />
                                                    <p class="text-muted">{{ $data['sexe'] }}</p>
                                                </div>
                                                <div class="col-md-6 col-sm-12 col-xs-6">
                                                    <strong>Status</strong><br />
                                                    <p class="text-muted">{{ $role }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="messages" role="tabpanel">
                            <div class="row py-4 px-5 no-gutters mt-3">
                                <div class="col-sm-12 col-md-6 d-flex justify-content-start">
                                    <h3 class="card-title mb-0">Vos activités</h3>
                                </div>
                            </div>
                            <div class="bg-light">
                                <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="close">
                                                            <i data-feather="x" class="feather-sm"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="card-body collapse show text-center">
                                                    <p class="card-text text-danger">Aucune activité...</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="settings" role="tabpanel">
                            <div class="row py-4 px-5 no-gutters mt-3">
                                <div class="col-sm-12 col-md-6 d-flex justify-content-start">
                                    <h3 class="card-title mb-0">Mettre à jour vos informations de connexion</h3>
                                </div>
                            </div>
                            <div class="bg-light">
                                <div class="card">
                                    <div class="card-body">
                                        <form class="form-material mt-4" action="{{ route('user.update', ["matricule" => $data['matricule']]) }}" method="POST">
                                            @csrf
                                            <div class="mb-3">
                                                <label for="matricule">
                                                    <i data-feather="hash" class="feather-sm text-theme fill-white me-2"></i><span class="border-start border-theme ps-3">Matricule</span>
                                                </label>
                                                <input
                                                    required
                                                    readonly
                                                    id="matricule"
                                                    name="matricule"
                                                    type="text"
                                                    class="form-control form-control-line"
                                                    value="{{ $data['matricule'] }}"
                                                >
                                            </div>
                                            <div class="mb-3">
                                                <label for="name">
                                                    <i data-feather="user" class="feather-sm text-theme fill-white me-2"></i><span class="border-start border-theme ps-3">Nom & prénom(s)</span>
                                                </label>
                                                <input
                                                    required
                                                    readonly
                                                    id="name_prof"
                                                    name="name_prof"
                                                    type="text"
                                                    class="form-control form-control-line"
                                                    value=" {{ $data['nom'] .' '. $data['prenom'] }} "
                                                >
                                            </div>
                                            <div class="mb-3">
                                                <label for="email">
                                                    <i data-feather="mail" class="feather-sm text-theme fill-white me-2"></i><span class="border-start border-theme ps-3">Email </span>
                                                </label>
                                                <input
                                                    required
                                                    type="email"
                                                    id="email"
                                                    name="email"
                                                    class="form-control"
                                                    placeholder="youremail"
                                                    value="{{ $data['email'] }}">
                                            </div>
                                            <div class="mb-3 ">
                                                <label for="password">
                                                    <i data-feather="lock" class="feather-sm  text-theme fill-white me-2"></i><span class="border-start border-theme ps-3">Mot de passe</span>
                                                </label>
                                                <div class="row" id="pwd">
                                                    <div class="col-md-6">
                                                        <input
                                                            id="password"
                                                            name="password"
                                                            type="password"
                                                            class="form-control mt-1"
                                                            placeholder="Nouveau mot de passe"
                                                        >
                                                        <span class="help-block text-muted">10 caractères au minimum</span>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input
                                                            id="confirmPass"
                                                            name="confirmPass"
                                                            type="password"
                                                            class="form-control mt-1"
                                                            placeholder="Confirmer nouveau mot de passe"
                                                        >
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label for="phone">
                                                    <i data-feather="phone" class="feather-sm text-theme fill-white me-2"></i><span class="border-start border-theme ps-3">Contact</span>
                                                </label>

                                                <input
                                                    required
                                                    id="phone"
                                                    name="phone"
                                                    type="number"
                                                    class="form-control"
                                                    placeholder="99999999"
                                                    value="{{ $data['phone'] }}"
                                                >
                                            </div>
                                            <div class="mb-3">
                                                <label for="description">
                                                    <i data-feather="info" class="feather-sm text-theme fill-white me-2"></i><span class="border-start border-theme ps-3">Description</span>
                                                </label>
                                                <textarea class="form-control" rows="5" name="description" id="description">{{ $data['description'] }}</textarea>
                                            </div>
                                            <div class="col-sm-12 d-none">
                                                <button id="profileupdate"  type="submit" class="btn btn-theme float-end"> Mettre à jour <span><i class="ti-reload"></i></span></button>
                                            </div>
                                            <div class="col-sm-12">
                                                <button class="btn rounded-pill px-4 btn-theme float-end font-weight-medium waves-effect waves-light" type="submit">
                                                    <i data-feather="send" class="feather-sm ms-2 fill-white"></i>
                                                    Mettre à jour
                                                </button>
                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')

@endsection