@php
    use Carbon\Carbon;
@endphp

@extends('layouts.root')


<!-- Les scripts spécifiques à cette vue enfant vont ici -->
@section('styles')
<!-- Inclure les fichiers CSS et JS de Summernote -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<!-- Inclure jQuery -->

@endsection

@section('root-content')

<div class="dashboard-widg-bar d-block">

    <!-- Header Wrap -->
    <div class="row">
        <div class="col-xl-7 col-lg-7 col-md-7 col-sm-7">
            <div class="card">
                <div class="card-header">

                    <div class="_mp-inner-content elior">
                        <div class="_mp_inner-first">
                            <form method="GET" action="{{ route('root.search_utilisateur') }}">
                                @csrf
                                <div class="search-inline">
                                    <input type="text" class="form-control" name="keyword" placeholder="Code, Libellé etc.">
                                    <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
                                </div>
                            </form>
                        </div>
                        <div class="_mp_inner-last">
                            <a href="{{ route('root.new_utilisateur') }}" class="btn btn-primary text-light">Nouvel Utilisateur</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">

                    <!-- Row -->
                    <div class="row mb-3">
                        <div class="col-xl-12 col-lg-12 col-md-12">
                            <div class="duster-flex-row  align-items-center d-flex justify-content-between">
                                <div class="duster-flex-first">
                                    <h6 class="mb-0">Listing des Comptes</h6>
                                </div>
                                <div class="duster-flex-end">
                                    <ul class="nav nav-pills nav-fill gap-2 p-1 small gray-simple rounded" id="pillNav2" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active rounded" id="alls" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">
                                                En ligne: 0
                                            </button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link rounded" id="approveds" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">
                                                Hors ligne: 0
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Row -->

                    <!-- Start All List -->
                    <div class="row justify-content-start gx-3 gy-4">
                        @if($utilisateurs->count() > 0)
                            @foreach($utilisateurs as $utilisateur)
                            <!-- Single Item -->


                                @if($utilisateur->role == 'Root')
                                <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                                    <div class="row mb-3">
                                        <div class="col-xl-10 col-lg-10 col-md-10 col-12">
                                            <div class="jbs-list-box border">
                                                <div class="jbs-list-head m-0">
                                                    <div class="jbs-list-head-thunner">
                                                        <div class="jbs-list-usrs-thumb @if($utilisateur->online) jbs-verified @endif">
                                                            <a href="">
                                                                <figure>
                                                                    <img src="{{ $utilisateur->avatar }}" class="img-fluid circle" alt="">
                                                                </figure>
                                                            </a>
                                                        </div>
                                                        <div class="jbs-list-job-caption">
                                                            <div class="jbs-job-title-wrap"><h4><a href="" class="jbs-job-title">{{ $utilisateur->name }}</a></h4></div>
                                                            <div class="jbs-job-mrch-lists">
                                                                <div class="single-mrch-lists">
                                                                    <span><i class="fa-solid fa-shield me-1"></i>{{ $utilisateur->role }}</span>.
                                                                    <span><i class="fa-solid fa-location-dot me-1"></i>{{ $utilisateur->adresse }}</span>
                                                                    <span><i class="fa-solid fa-clock me-1"></i>{{ Carbon::parse($utilisateur->created)->diffForHumans() }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="jbs-job-mrch-lists">
                                                                <div class="single-mrch-lists">
                                                                    <span><i class="fa-solid fa-envelope me-1"></i>{{ $utilisateur->email }}</span>.
                                                                    <span><i class="fa-solid fa-phone me-1"></i>{{ $utilisateur->phone }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="jbs-job-mrch-lists">
                                                                <div class="single-mrch-lists">
                                                                    @if($utilisateur->online == 1)
                                                                    <span><i class="fa-solid fa-star me-1 text-success"></i>en ligne</span>
                                                                    @else
                                                                    <span><i class="fa-solid fa-star me-1 text-primary"></i>hors ligne</span>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div class="jbs-job-mrch-lists">
                                                                <div class="single-mrch-lists">
                                                                    <span><i class="fa-solid fa-box me-1 text-success"></i>{{ $utilisateur->code_affiliation }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="jbs-list-head-last">
                                                        @if($utilisateur->active == 1)
                                                        <a href="{{ route('root.destroy_utilisateur', ['id' => $utilisateur->id]) }}" class="btn btn-md btn-light-success px-3 me-2">
                                                            <i class="fa-solid fa-trash"></i>
                                                        </a>
                                                        @else
                                                            <a href="{{ route('root.active_utilisateur', ['id' => $utilisateur->id]) }}" class="btn btn-md btn-light-danger px-3 me-2">
                                                                <i class="fa-solid fa-check"></i>
                                                            </a>
                                                        @endif
                                                        <a href="{{ route('root.edit_utilisateur', ['id' => $utilisateur->id]) }}" id="card-delete" class="btn btn-md btn-light-success px-3">
                                                            <i class="fa-solid fa-edit"></i>
                                                        </a>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xl-2 col-lg-2 col-md-2 col-12">
                                            <div class="jbs-list-box border">
                                                <div class="jbs-list-head m-0">
                                                    <div class="jbs-list-head-thunner">
                                                        <div class="jbs-list-usrs-thumb">
                                                            <a href="">
                                                                <figure>
                                                                    <img src="{{ $utilisateur->logo }}" class="img-fluid circle" style="heigth: 60px;">
                                                                </figure>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span class="justify-content-start text-center align-items-center text-primary">
                                                    <strong>{{ $utilisateur->sigle }}</strong>
                                                </span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                @elseif($utilisateur->role == 'Entreprise')
                                <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                                    <div class="row mb-3">
                                        <div class="col-xl-10 col-lg-10 col-md-10 col-12">
                                            <div class="jbs-list-box border">
                                                <div class="jbs-list-head m-0">
                                                    <div class="jbs-list-head-thunner">
                                                        <div class="jbs-list-usrs-thumb @if($utilisateur->online) jbs-verified @endif">
                                                            <a href="">
                                                                <figure>
                                                                    <img src="{{ $utilisateur->avatar }}" class="img-fluid circle" alt="">
                                                                </figure>
                                                            </a>
                                                        </div>
                                                        <div class="jbs-list-job-caption">
                                                            <div class="jbs-job-title-wrap"><h4><a href="" class="jbs-job-title">{{ $utilisateur->name }}</a></h4></div>
                                                            <div class="jbs-job-mrch-lists">
                                                                <div class="single-mrch-lists">
                                                                    <span><i class="fa-solid fa-shield me-1"></i>{{ $utilisateur->role }}</span>.
                                                                    <span><i class="fa-solid fa-location-dot me-1"></i>{{ $utilisateur->adresse }}</span>
                                                                    <span><i class="fa-solid fa-clock me-1"></i>{{ Carbon::parse($utilisateur->created)->diffForHumans() }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="jbs-job-mrch-lists">
                                                                <div class="single-mrch-lists">
                                                                    <span><i class="fa-solid fa-envelope me-1"></i>{{ $utilisateur->email }}</span>.
                                                                    <span><i class="fa-solid fa-phone me-1"></i>{{ $utilisateur->phone }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="jbs-job-mrch-lists">
                                                                <div class="single-mrch-lists">
                                                                    @if($utilisateur->online == 1)
                                                                    <span><i class="fa-solid fa-star me-1 text-success"></i>en ligne</span>
                                                                    @else
                                                                    <span><i class="fa-solid fa-star me-1 text-primary"></i>hors ligne</span>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div class="jbs-job-mrch-lists">
                                                                <div class="single-mrch-lists">
                                                                    <span><i class="fa-solid fa-box me-1 text-success"></i>{{ $utilisateur->code_affiliation }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="jbs-list-head-last">
                                                        @if($utilisateur->active == 1)
                                                        <a href="{{ route('root.destroy_utilisateur', ['id' => $utilisateur->id]) }}" class="btn btn-md btn-light-success px-3 me-2">
                                                            <i class="fa-solid fa-trash"></i>
                                                        </a>
                                                        @else
                                                            <a href="{{ route('root.active_utilisateur', ['id' => $utilisateur->id]) }}" class="btn btn-md btn-light-danger px-3 me-2">
                                                                <i class="fa-solid fa-check"></i>
                                                            </a>
                                                        @endif
                                                        <a href="{{ route('root.edit_utilisateur', ['id' => $utilisateur->id]) }}" id="card-delete" class="btn btn-md btn-light-success px-3">
                                                            <i class="fa-solid fa-edit"></i>
                                                        </a>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xl-2 col-lg-2 col-md-2 col-12">
                                            <div class="jbs-list-box border">
                                                <div class="jbs-list-head m-0">
                                                    <div class="jbs-list-head-thunner">
                                                        <div class="jbs-list-usrs-thumb">
                                                            <a href="">
                                                                <figure>
                                                                    <img src="{{ $utilisateur->logo }}" class="img-fluid circle" style="heigth: 60px;">
                                                                </figure>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span class="justify-content-start text-center align-items-center text-primary">
                                                    <strong>{{ $utilisateur->sigle }}</strong>
                                                </span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                @else
                                <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                                    <div class="jbs-list-box border">
                                        <div class="jbs-list-head m-0">
                                            <div class="jbs-list-head-thunner">
                                                <div class="jbs-list-usrs-thumb @if($utilisateur->online) jbs-verified @endif">
                                                    <a href="">
                                                        <figure>
                                                            <img src="{{ $utilisateur->avatar }}" class="img-fluid circle" alt="">
                                                        </figure>
                                                    </a>
                                                </div>
                                                <div class="jbs-list-job-caption">
                                                    <div class="jbs-job-title-wrap"><h4><a href="" class="jbs-job-title">{{ $utilisateur->name }}</a></h4></div>
                                                    <div class="jbs-job-mrch-lists">
                                                        <div class="single-mrch-lists">
                                                            <span><i class="fa-solid fa-shield me-1"></i>{{ $utilisateur->role }}</span>.
                                                            <span><i class="fa-solid fa-location-dot me-1"></i>{{ $utilisateur->adresse }}</span>
                                                            <span><i class="fa-solid fa-clock me-1"></i>{{ Carbon::parse($utilisateur->created)->diffForHumans() }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="jbs-job-mrch-lists">
                                                        <div class="single-mrch-lists">
                                                            <span><i class="fa-solid fa-envelope me-1"></i>{{ $utilisateur->email }}</span>.
                                                            <span><i class="fa-solid fa-phone me-1"></i>{{ $utilisateur->phone }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="jbs-job-mrch-lists">
                                                        <div class="single-mrch-lists">
                                                            @if($utilisateur->online == 1)
                                                            <span><i class="fa-solid fa-star me-1 text-success"></i>en ligne</span>
                                                            @else
                                                            <span><i class="fa-solid fa-star me-1 text-primary"></i>hors ligne</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="jbs-job-mrch-lists">
                                                        <div class="single-mrch-lists">
                                                            <span><i class="fa-solid fa-box me-1 text-success"></i>{{ $utilisateur->code_affiliation }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="jbs-list-head-last">
                                                @if($utilisateur->active == 1)
                                                <a href="{{ route('root.destroy_utilisateur', ['id' => $utilisateur->id]) }}" class="btn btn-md btn-light-success px-3 me-2">
                                                    <i class="fa-solid fa-trash"></i>
                                                </a>
                                                @else
                                                    <a href="{{ route('root.active_utilisateur', ['id' => $utilisateur->id]) }}" class="btn btn-md btn-light-danger px-3 me-2">
                                                        <i class="fa-solid fa-check"></i>
                                                    </a>
                                                @endif
                                                <a href="{{ route('root.edit_utilisateur', ['id' => $utilisateur->id]) }}" id="card-delete" class="btn btn-md btn-light-success px-3">
                                                    <i class="fa-solid fa-edit"></i>
                                                </a>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif


                            @endforeach
                        @else
                        <!-- Single Item -->
                        <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                            <div class="jbs-list-box border">
                                <div class="jbs-list-head m-0">
                                    <div class="jbs-list-head-thunner">
                                        <div class="jbs-list-usrs-thumb jbs-verified">
                                            <a href="candidate-detail.html">
                                                <figure>
                                                    <img src="{{ URL::to('assets/img/icone1.png') }}" class="img-fluid circle" alt="">
                                                </figure>
                                            </a>
                                        </div>
                                        <div class="jbs-list-job-caption">
                                            <div class="jbs-job-title-wrap"><h4><a href="" class="jbs-job-title">Pas de compte pour le moment !</a></h4></div>
                                            <div class="jbs-job-mrch-lists">
                                                <div class="single-mrch-lists">
                                                    <span>{{ Carbon::now() }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="jbs-list-head-last"></div>
                                </div>
                            </div>
                        </div>
                        @endif


                    </div>

                    <!-- Start All List -->
                    <div class="row justify-content-start gx-3 gy-4">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                            <!-- Pagination -->
                            {{ $utilisateurs->links('vendor.pagination.bootstrap-4') }}
                        </div>
                    </div>



                </div>
            </div>
        </div>
        <div class="col-xl-5 col-lg-5 col-md-5 col-sm-5">
            <div class="card" id="new-country">
                <div class="card-header">
                    <div class="_mp-inner-content elior">
                        <div class="_mp-inner-first">
                            <h3 class="mb-1 fs-3 fw-medium text-primary">Nouveau Compte</h3>
                        </div>
                        <div class="_mp_inner-last"></div>
                    </div>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('root.store_utilisateur') }}" enctype="multipart/form-data">

                        @csrf

                        <div class="row">

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="dash-prf-start justify-content-center align-items-center mb-2">
                                    <div class="dash-prf-start-upper mb-2">
                                        <div class="dash-prf-start-thumb">
                                            <figure class="mb-0"><img src="{{ URL::to('assets/avatars/avatar.png') }}" id="avatar" class="img-fluid rounded" alt=""></figure>
                                        </div>
                                    </div>
                                    <div class="dash-prf-start-bottom">
                                        <div class="upload-btn-wrapper small">
                                            <button class="btn">AVATAR</button>
                                            <input type="file" name="avatar" id="avatarUpload">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="dash-prf-start justify-content-center align-items-center mb-2">
                                    <div class="dash-prf-start-upper mb-2">
                                        <div class="dash-prf-start-thumb">
                                            <figure class="mb-0"><img src="{{ URL::to('assets/avatars/avatar.png') }}" id="logo" class="img-fluid rounded" alt=""></figure>
                                        </div>
                                    </div>
                                    <div class="dash-prf-start-bottom">
                                        <div class="upload-btn-wrapper small">
                                            <button class="btn">LOGO</button>
                                            <input type="file" name="logo" id="logoUpload">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12"><hr style="color: #E55807;"></div>

                            <h5 class="text-primary">A propos de la structure</h5>

                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label>Raison sociale</label>
                                    <input type="text" class="form-control" name="raison_sociale" value="{{ old('raison_sociale') }}" required>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Sigle</label>
                                    <input type="text" class="form-control" name="sigle" value="{{ old('sigle') }}">
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Année d'expérience</label>
                                    <div class="select-ops">
                                        <select name="annee_experience">
                                            <option value="1">1+ an</option>
                                            <option value="2">2+ années</option>
                                            <option value="3">3+ années</option>
                                            <option value="4">4+ années</option>
                                            <option value="5">5+ années</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Registre de commerce (RCCM)</label>
                                    <input type="text" class="form-control" name="rccm" value="{{ old('rccm') }}" required>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Numéro immatriculation fiscale (NIF)</label>
                                    <input type="text" class="form-control" name="nif" value="{{ old('nif') }}" required>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Numéro Siret</label>
                                    <input type="text" class="form-control" name="siret" value="{{ old('siret') }}">
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Forme juridique</label>
                                    <input type="text" class="form-control" name="forme_juridique" value="{{ old('forme_juridique') }}">
                                    <small class="text-primary">Ex : SARL, SA, SI, etc...</small>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label>Secteur d'activité</label>
                                    <div class="select-ops">
                                        <select name="secteur_id">
                                            <option value="">Choix du Secteur</option>
                                            @foreach($secteurs as $secteur)
                                            <option value="{{ $secteur->id }}">{{ $secteur->libelle }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label>Description</label>
                                    <textarea class="form-control" id="tinymce" name="description" rows="5"></textarea>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12"><hr style="color: #E55807;"></div>

                            <h5 class="text-primary">A propos du responsable</h5>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Noms</label>
                                    <input type="text" class="form-control" name="noms" value="{{ old('noms') }}" required>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Prénoms</label>
                                    <input type="text" class="form-control" name="prenoms" value="{{ old('prenoms') }}" required>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="email" class="form-control" name="email" value="{{ old('email') }}" required>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Téléphone</label>
                                    <input type="phone" class="form-control" name="phone" value="{{ old('phone') }}" required>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label>Profession</label>
                                    <input type="text" class="form-control" name="profession" value="{{ old('profession') }}" required>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Date de naissance</label>
                                    <input type="date" class="form-control" name="birthday" value="{{ old('birthday') }}" required>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Sexe</label>
                                    <div class="select-ops">
                                        <select name="sexe" required>
                                            <option value="">Choix du Genre</option>
                                            <option value="M">Masculin</option>
                                            <option value="F">Féminin</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Nationalité</label>
                                    <input type="text" class="form-control" name="nationalite" value="{{ old('nationalite') }}">
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Droits d'acces</label>
                                    <div class="select-ops">
                                        <select name="profil_id" required>
                                            <option value="">Choix du Profil</option>
                                            @foreach($profiles as $profile)
                                            <option value="{{ $profile->id }}">{{ $profile->libelle }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label>Présentez vous brievement (petite biographie)</label>
                                    <textarea class="form-control" id="tinymce2" name="biographie" rows="5">{{ old('biographie') }}</textarea>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12"><hr style="color: #E55807;"></div>

                            <h5 class="text-primary">Réseaux sociaux</h5>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Facebook</label>
                                    <input type="text" class="form-control" name="facebook" value="{{ old('facebook') }}">
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Twitter X</label>
                                    <input type="text" class="form-control" name="twitter" value="{{ old('twitter') }}">
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Instagram</label>
                                    <input type="text" class="form-control" name="instagram" value="{{ old('instagram') }}">
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Linked'In</label>
                                    <input type="text" class="form-control" name="linkedin" value="{{ old('adresse') }}">
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12"><hr style="color: #E55807;"></div>

                            <h5 class="text-primary">Localisation</h5>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Adresse</label>
                                    <input type="text" class="form-control" name="adresse" value="{{ old('adresse') }}">
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Zip code</label>
                                    <input type="text" class="form-control" name="zip_code" value="{{ old('zip_code') }}">
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Pays</label>
                                    <div class="select-ops">
                                        <select name="pays_id" id="pays-select">
                                            <option value="">Choix du Pays</option>
                                            @foreach($countries as $country)
                                            <option value="{{ $country->id }}" @if(old('pays_id') == $country->id) selected @endif>
                                                {{ $country->libelle }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Province</label>
                                    <div class="select-ops">
                                        <select name="province_id" id="province-select">
                                            <option value="">Choix de la Province</option>
                                            @foreach($provinces as $province)
                                            <option value="{{ $province->id }}" @if(old('province_id') == $province->id) selected @endif>
                                                {{ $province->libelle }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label>Ville</label>
                                    <div class="select-ops">
                                        <select name="ville_id" id="ville-select">
                                            <option value="">Choix de la Ville</option>
                                            @foreach($villes as $ville)
                                            <option value="{{ $ville->id }}" @if(old('ville_id') == $ville->id) selected @endif>
                                                {{ $ville->libelle }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Latitude</label>
                                    <input type="text" class="form-control" name="latitude" id="latitude" value="{{ old('latitude') }}">
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>longitude</label>
                                    <input type="text" class="form-control" name="longitude" id="longitude" value="{{ old('longitude') }}">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12">
                                <div class="card border">
                                    <div class="card-body">
                                        <div id="map" class="map" style="height: 300px;"></div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-xl-12 col-lg-12">
                                <br>
                                <div class="form-group">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="terms" value="1" required>
                                        <label class="form-check-label" for="terms">
                                            En cochant cette case, vous acceptez les
                                            <a href="{{ route('site.terms') }}" target="_blank" class="text-primary">termes et conditions d'utilisation</a>
                                        </label>
                                    </div>
                                </div>
                            </div>

                        </div>



                        <br>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary full-width font--bold btn-lg">Soumettre</button>
                        </div>

                        <br>

                        <div class="sec-heading center">
                            <p>
                                Vous avez déja un compte ? <a href="{{ route('site.login') }}" class="text-primary">Connectez-vous !</a>
                            </p>
                        </div>
                    </form>
                </div>
                <div class="card-footer"></div>
            </div>
        </div>
    </div>
    <!-- Header Wrap -->

</div>

@endsection

@section('scripts')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->
<!-- Les scripts spécifiques à cette vue enfant vont ici -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
    // Initialisation de la carte centrée sur Libreville, Gabon
    var map = L.map('map').setView([0.3901, 9.4544], 13);

    // Ajout des tuiles OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; JOBBO | INITIAL DEV | OpenStreetMap | Contributeurs'
    }).addTo(map);

    // Ajout d'un marqueur draggable
    var marker = L.marker([0.3901, 9.4544], { draggable: true }).addTo(map);

    // Mettre à jour les champs de latitude et de longitude lorsque le marqueur est déplacé
    marker.on('dragend', function (e) {
        var lat = marker.getLatLng().lat;
        var lng = marker.getLatLng().lng;
        document.getElementById('latitude').value = lat;
        document.getElementById('longitude').value = lng;
    });

    // Mettre à jour le marqueur lorsque les valeurs des champs sont modifiées
    document.getElementById('latitude').addEventListener('change', updateMarkerPosition);
    document.getElementById('longitude').addEventListener('change', updateMarkerPosition);

    function updateMarkerPosition() {
        var lat = parseFloat(document.getElementById('latitude').value);
        var lng = parseFloat(document.getElementById('longitude').value);
        if (!isNaN(lat) && !isNaN(lng)) {
            marker.setLatLng([lat, lng]);
            map.setView([lat, lng], map.getZoom());
        }
    }
</script>

<script>
    document.getElementById('avatarUpload').addEventListener('change', function(event) {
        var reader = new FileReader();
        var file = event.target.files[0];

        if (file) {
            reader.onload = function(e) {
                document.getElementById('avatar').src = e.target.result;
            }

            reader.readAsDataURL(file);
        }
    });
</script>

<script>
    document.getElementById('logoUpload').addEventListener('change', function(event) {
        var reader = new FileReader();
        var file = event.target.files[0];

        if (file) {
            reader.onload = function(e) {
                document.getElementById('logo').src = e.target.result;
            }

            reader.readAsDataURL(file);
        }
    });
</script>

<script>
    $(document).ready(function() {
        $('#pays-select').change(function() {
            var pays_id = $(this).val();
            $('#province-select').empty().append('<option value="">Choix de la Province</option>');
            $('#ville-select').empty().append('<option value="">Choix de la Ville</option>');
            if (pays_id) {
                $.ajax({
                    url: '/root/provinces/' + pays_id,
                    type: 'GET',
                    success: function(data) {
                        $.each(data, function(key, province) {
                            $('#province-select').append('<option value="' + province.id + '">' + province.libelle + '</option>');
                        });
                        $('#province-select').niceSelect("update");
                    }
                });
            }
        });

        $('#province-select').change(function() {
            var province_id = $(this).val();
            $('#ville-select').empty().append('<option value="">Choix de la Ville</option>');
            if (province_id) {
                $.ajax({
                    url: '/root/villes/' + province_id,
                    type: 'GET',
                    success: function(data) {
                        $.each(data, function(key, ville) {
                            $('#ville-select').append('<option value="' + ville.id + '">' + ville.libelle + '</option>');
                        });
                        $('#ville-select').niceSelect("update");
                    }
                });
            }
        });
    });
</script>

@endsection