@extends('layouts.admin.main')

@section('style')
    <!-- Custom CSS -->
    <link href="{{ asset('assets/libs/fullcalendar/dist/fullcalendar.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/extra-libs/calendar/calendar.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/libs/select2/dist/css/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/extra-libs/prism/prism.css') }}">
    <link href="{{ asset('assets/extra-libs/toastr/dist/build/toastr.min.css') }}" rel="stylesheet">
@endsection


@section('content')
    <div class="page-wrapper">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="page-breadcrumb border-bottom">
            <div class="row">
                <div class="col-lg-3 col-md-4 col-xs-12 justify-content-start d-flex align-items-center">
                    <h5 class="font-weight-medium text-uppercase mb-0">Gestion des experts</h5>
                </div>
                <div
                    class="col-lg-9 col-md-8 col-xs-12 d-flex justify-content-start justify-content-md-end align-self-center">
                    <nav aria-label="breadcrumb" class="mt-2">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                        </ol>
                    </nav>
                    {{-- <button class="btn btn-danger text-white ms-3 d-none d-md-block">Buy Ample Admin</button> --}}
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Container fluid  -->
        <!-- ============================================================== -->
        <div class="page-content container-fluid">
            <!-- ============================================================== -->
            <!-- User Table & Profile Cards Section  -->
            <!-- ============================================================== -->
            <div class="widget-content searchable-container list">

                <!-- Begin Table -->
                <div class="card card-body">
                    <div class="table-responsive">
                        <table id="myTable" class="display">
                            <thead>
                                <th>Nom</th>
                                <th>Grade actuel</th>
                                <th>CTS</th>
                                <th>CSS</th>
                                <th>Statut</th>
                                <th>Privilège</th>
                                <th>Email</th>
                                <th>Actions</th>
                            </thead>
                            <tbody>
                               @foreach ($users as $user)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @if ($user->enseignant->photo)
                                                    <img src="{{ config('app.aws_url') . $user->enseignant->photo }}"
                                                    class="rounded-circle" alt="user" width="50">
                                                @else
                                                                                                        <img src="{{ $avatar_url }}" id="photo-preview" class="rounded-circle" alt="user" width="40">
                                                @endif
                                                <div class="ms-3">
                                                    <div class="user-meta-info">
                                                        <h5 class="user-name mb-0"
                                                            data-name="{{ $user->name }}">
                                                            {{ $user->name }}</h5>
                                                        <small class="user-matricule text-muted"
                                                            data-matricule="{{ $user->matricule }}">{{ $user->matricule }}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="user-meta-info">
                                                <span class="user-work font-weight-medium"
                                                    data-grade="{{ $user->enseignant->corps_actuel_libelle }}">{{ $user->enseignant->corps_actuel_libelle }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <h6 class="usr-email-addr font-weight-medium"
                                                    data-cts="{{ $user->enseignant->cts }}">
                                                    {{ $user->enseignant->cts }}</h6>
                                                <small class="usr-phone text-muted"
                                                    data-email="{{ $user->email }}">{{ $user->email }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <h6 class="font-weight-medium" data-css="{{ $user->enseignant->css }}">
                                                        {{ $user->enseignant->css }}</h6>
                                                    <small class="usr-phone text-muted"
                                                        data-phone="{{ $user->numero }}">{{ $user->numero }}
                                                    </small>
                                            </div>
                                        </td>
                                        <td>
                                            @if ($user->status > 0)
                                                <span class="badge rounded-pill bg-success"
                                                    style="font-size: 100%">Actif</span>
                                            @else
                                                <span class="badge rounded-pill bg-danger"
                                                    style="font-size: 80%">Inactif</span>
                                            @endif
                                        </td>
                                        <td>
                                            <form id="updateRoleForm-{{ $user->id }}"
                                                action="{{ route('users.role') }}" method="POST">
                                                @csrf
                                                @method('PATCH')
                                                <input type="hidden" name="id"
                                                    value="{{ $user->id }}">
                                                <select class="form-control" name="role_id"
                                                    onchange="submitForm('{{ $user->id }}')">
                                                    <option value="1"
                                                        @if ($user->role_id == 1) selected @endif>
                                                        Admin</option>
                                                    <option value="2"
                                                        @if ($user->role_id == 2) selected @endif>
                                                        Expert</option>
                                                    <option value="3"
                                                        @if ($user->role_id == 3) selected @endif>
                                                        Candidat</option>
                                                </select>
                                            </form>
                                        </td>
                                        <td>
                                            @if ($user->is_email_verified > 0)
                                                <span class="badge rounded-pill bg-success"
                                                    style="font-size: 100%">validé</span>
                                            @else
                                                <span class="badge rounded-pill bg-danger"
                                                    style="font-size: 80%">invalide</span>
                                            @endif
                                        </td>
                                        <td>

                                                <div class="justify-content-left">
                                                    <a href=""
                                                        data-bs-target="#afterModal-{{ $user->id }}"
                                                        data-bs-toggle="modal" class="text-info edit">
                                                        <i class="fas fa-edit" style="font-size: 20px"></i>
                                                    </a>
                                                </div>
                                        </td>
                                    </tr>

                                    <!-- Begin Modal -->
                                    <div class="modal fade" id="afterModal-{{ $user->id }}"
                                        tabindex="-1" role="dialog"
                                        aria-labelledby="addContactModalTitle" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header d-flex align-items-center">

                                                    @if ($user->enseignant->photo)
                                                        <img src="{{ config('app.aws_url') . $user->enseignant->photo }}"
                                                        class="rounded-circle" alt="user" width="50">
                                                    @else
                                                                                                                <img src="{{ $avatar_url }}" id="photo-preview" class="rounded-circle" alt="user" width="40">
                                                    @endif
                                                    <button type="button" class="btn-close"
                                                        data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="add-contact-box">
                                                        <div class="add-contact-content">
                                                            <div class="form-floating mb-3">
                                                                <input type="text"
                                                                    class="form-control border border-primary"
                                                                    id="c-matricule" name="matricule"
                                                                    value="{{ $user->matricule }}"
                                                                    placeholder="Matricule" disabled>
                                                                <label>
                                                                    <i data-feather="hash"
                                                                        class="feather-sm text-primary fill-white me-2"></i>
                                                                    <span
                                                                        class="border-start border-primary ps-3">Matricule</span>
                                                                </label>
                                                            </div>
                                                            <div class="form-floating mb-3">
                                                                <input type="text"
                                                                    class="form-control border border-primary"
                                                                    id="c-name" name="name"
                                                                    value="{{ $user->name }}"
                                                                    placeholder="Nom"
                                                                    value="Andrew Simons" disabled>
                                                                <label>
                                                                    <i data-feather="user"
                                                                        class="feather-sm text-primary fill-white me-2"></i>
                                                                    <span
                                                                        class="border-start border-primary ps-3">Nom</span>
                                                                </label>
                                                            </div>
                                                            <div class="form-floating mb-3">
                                                                <input type="text"
                                                                    class="form-control border border-primary"
                                                                    id="c-grade" name="grade"
                                                                    value="{{ $user->enseignant->corps_actuel_libelle }}"
                                                                    placeholder="Grade" disabled>
                                                                <label>
                                                                    <i data-feather="star"
                                                                        class="feather-sm text-primary fill-white me-2"></i>
                                                                    <span
                                                                        class="border-start border-primary ps-3">Grade</span>
                                                                </label>
                                                            </div>
                                                            <div class="form-floating mb-3">
                                                                <input type="email"
                                                                    class="form-control border border-primary"
                                                                    id="c-email" name="email"
                                                                    value="{{ $user->email }}"
                                                                    placeholder="Email" disabled>
                                                                <label>
                                                                    <i data-feather="mail"
                                                                        class="feather-sm text-primary fill-white me-2"></i>
                                                                    <span
                                                                        class="border-start border-primary ps-3">Email</span>
                                                                </label>
                                                            </div>
                                                            <div class="form-floating mb-3">
                                                                <input type="text"
                                                                    class="form-control border border-primary"
                                                                    id="c-phone" name="phone"
                                                                    value="{{ $user->numero }}"
                                                                    placeholder="Téléphone" disabled>
                                                                <label>
                                                                    <i data-feather="phone"
                                                                        class="feather-sm text-primary fill-white me-2"></i>
                                                                    <span
                                                                        class="border-start border-primary ps-3">Téléphone</span>
                                                                </label>
                                                            </div>
                                                            <form id="update-form"
                                                                action="{{ route('super.manage', ['id' =>$user->id]) }}"
                                                                method="POST">
                                                                @csrf
                                                                <div class="row">
                                                                    <div class="row mb-2">
                                                                        <div class="col py-2 px-3">
                                                                            <div class="mb-3">
                                                                                <label class="col-md-12">Vérification de mail</label>
                                                                                <div class="col-md-12">
                                                                                    <select class="form-control form-control-line" name="is_email_verified">
                                                                                        <option value="0"
                                                                                            @if ($user->is_email_verified == 0) selected @endif>
                                                                                            Non valide</option>
                                                                                        <option value="1"
                                                                                            @if ($user->is_email_verified == 1) selected @endif>
                                                                                            Valide</option>
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col py-2 px-3">
                                                                            <div class="mb-3">
                                                                                <label class="col-md-12">Statut du compte</label>
                                                                                <div class="col-md-12">
                                                                                        <select class="form-control form-control-line" name="status">
                                                                                            <option value="0"
                                                                                                @if ($user->status == 0) selected @endif>
                                                                                                Désactivé</option>
                                                                                            <option value="1"
                                                                                                @if ($user->status == 1) selected @endif>
                                                                                                Activé</option>
                                                                                        </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="modal-footer">
                                                                    <button id="btn-edit-{{ $user->id }}" type="submit" class="btn btn-success rounded-pill px-4">
                                                                        <div class="d-flex align-items-center">
                                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-save feather-sm me-1 fill-icon"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg> Sauvegarder
                                                                        </div>
                                                                    </button>
                                                                    <button type="button" class="btn btn-danger rounded-pill px-4 ms-2 text-white" data-bs-dismiss="modal"
                                                                    aria-label="Close">Fermer</button>
                                                                </div>
                                                            </form>

                                                            {{-- </form> --}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Modal -->
                               @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- End Table -->
            </div>

        </div>
        <!-- ============================================================== -->
        <!-- End Container fluid  -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- footer -->
        <!-- ============================================================== -->
        @include('layouts.admin.footer')
        <!-- ============================================================== -->
        <!-- End footer -->
        <!-- ============================================================== -->
    </div>
@endsection


@section('script')
    <!-- This Page JS -->
    <script src="{{ asset('assets/libs/apexcharts/dist/apexcharts.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/dashboards/dashboard1.js') }}"></script>
    <script src="{{ asset('assets/libs/moment/min/moment.min.js') }}"></script>
    <script src="{{ asset('assets/libs/fullcalendar/dist/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/calendar/cal-init.js') }}"></script>

    <script src="{{ asset('assets/js/pages/contact/contact.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/dist/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/dist/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/forms/select2/select2.init.js') }}"></script>
    <script src="{{ asset('assets/extra-libs/prism/prism.js') }}"></script>
    <script src="{{ asset('assets/extra-libs/toastr/dist/build/toastr.min.js') }}"></script>
    {{-- <script src="{{ asset('assets/extra-libs/toastr/toastr-init.js') }}"></script> --}}

    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
    <script>
        function submitForm(userId) {
            document.getElementById('updateRoleForm-' + userId).submit();
        }

        let table = new DataTable('#myTable', {
            // options
            columnDefs: [{ className: "dt-center", targets: "_all" }],
            //     columns: [
            //       {  title: "Id", className: "text-center", visible: false},
            //       {  title: "Nom de la diffusion", className: "text-center" },
            //       {  title: "Type de programme", className: "text-center" },
            //       {  title: "Type de diffusion", className: "text-center", },
            // ]
        });
        // Validation Process

        var $_getValidationField = document.getElementsByClassName('validation-text');
        var reg = /^.+@[^\.].*\.[a-z]{2,}$/;
        var phoneReg = /^\d{10}$/;

        console.log("SUCCESS :" + @json(session('success')));

        if (@json(session('success')) == true) {
            toastr.success('L\'affectation s\'est bien déroulée.', @json(session('message')));
        }
    </script>
@endsection