@php
    use Carbon\Carbon;
    use Illuminate\Support\Str;
@endphp

@extends('layouts.root')


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

<style>
.image-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: white;
display: none; /* Masquer l'icône par défaut */
    cursor: pointer;
}

.jbs-head-tops:hover .image-icon {
    display: block; /* Afficher l'icône lors du survol */
    transition: opacity 0.3s ease-in-out;
    opacity: 0.8; /* Ajoute un effet d'apparition */
}

.jbs-head-tops {
    position: relative;
}

</style>

@endsection

@section('root-content')

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

    <div class="row">

        <div class="col-xl-12 col-lg-12 col-md-12">

            <div class="jbs-dts-block styl-02">
                <div class="jbs-head-block">
                    <div class="jbs-head-tops bg-cover" style="background:url({{ $account->banner }}) no-repeat;">
                        <div class="ht-200">
                            <!-- Contenu existant -->
                            <i class="bi bi-amazon"></i>

                            <!-- Nouvelle icône pour choisir une image -->
                            <i class="bi bi-image image-icon btn text-orange" alt="modifier la banniere" onclick="document.getElementById('bannerUpload').click();"></i>

                            <!-- Formulaire caché pour soumettre l'image -->
                            <form id="banner-form" action="{{ route('root.banner_account') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="user_id" value="{{ $account->id }}">
                                <input type="file" name="banner" id="bannerUpload" style="display: none;">
                            </form>
                        </div>
                    </div>
                </div>
            </div>


            <br>

        </div>



        <!-- Start Profile -->
        <div class="col-xl-6 col-lg-6 col-md-12">
            <div class="dashboard-profle-wrapper mb-4">
                <div class="dash-prf-start">
                    <div class="dash-prf-start-upper">
                        <div class="dash-prf-start-thumb">
                            <figure><img src="{{ $account->avatar }}" id="image" class="img-fluid circle" alt=""></figure>
                        </div>
                    </div>
                    <div class="dash-prf-start-bottom">
                        <div class="upload-btn-wrapper small">
                            <button class="btn" onclick="document.getElementById('avatar-form').submit();">Changer Avatar</button>
                            <form id="avatar-form" action="{{ route('root.avatar_account') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="user_id" value="{{ $account->id }}">
                                <input type="file" name="avatar" id="imageUpload">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="dash-prf-end">
                    <div class="dash-prfs-caption">
                        <div class="dash-prfs-title">
                            <h4>{{ $account->name }}</h4>
                        </div>
                        <div class="dash-prfs-subtitle">
                            <div class="jbs-job-mrch-lists">
                                <div class="single-mrch-lists">
                                    <span>{{ $account->role }}</span>.<span><i class="fa-solid fa-location-dot me-1"></i>{{ $account->adresse }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="jbs-grid-job-edrs-group mt-1">
                            @if($account->online == 1)
                            <span class="bg-light-success text-success">en ligne</span>
                            @else
                            <span class="bg-warning text-warning">hors ligne</span>
                            @endif
                        </div>
                    </div>
                    <div class="dash-prf-caption-end">
                        <div class="dash-prf-infos">
                            <div class="single-dash-prf-infos">
                                <div class="single-dash-prf-infos-icons"><i class="fa-solid fa-envelope-open-text"></i></div>
                                <div class="single-dash-prf-infos-caption">
                                    <p class="text-sm-muted mb-0">Email</p>
                                    <h5>{{ $account->email }}</h5>
                                </div>
                            </div>
                            <div class="single-dash-prf-infos">
                                <div class="single-dash-prf-infos-icons"><i class="fa-solid fa-phone-volume"></i></div>
                                <div class="single-dash-prf-infos-caption">
                                    <p class="text-sm-muted mb-0">Téléphone</p>
                                    <h5>{{ $account->phone }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- End Profile -->

        <!-- Start Affiliation -->
        <div class="col-xl-6 col-lg-6 col-md-12">
            <div class="dashboard-profle-wrapper mb-4">
                <div class="dash-prf-end">
                    <div class="dash-prfs-caption">
                        <div class="dash-prfs-title">
                            <h4>Code d'affiliation</h4>
                        </div>
                        <div class="dash-prfs-subtitle">
                            <div class="jbs-job-mrch-lists">
                                <div class="single-mrch-lists">
                                    <span>{{ $account->code_affiliation }}</span>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="jbs-grid-job-edrs-group mt-1">
                            <span class="bg-light-success text-success">Votre lien d'affiliation</span>
                        </div>
                        <div class="jbs-grid-job-edrs-group mt-1">
                            <span class="bg-light-success text-success" id="linkAffiliation">
                                {{ route('site.affiliation_link', ['code' => $account->code_affiliation]) }}
                            </span>
                            <span class="bg-light-success text-success" data-toggle="tooltip" data-placement="top" title="Copier le lien">
                                <i class="bi bi-back" id="copyUrl"></i>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="dash-prf-start">
                    <div class="dash-prf-start-upper">
                        <div class="dash-prf-start-thumb">
                            <figure><img src="{{ $account->logo }}" id="logo" class="img-fluid circle" alt=""></figure>
                        </div>
                    </div>
                    <div class="dash-prf-start-bottom">
                        <div class="upload-btn-wrapper small">
                            <button class="btn" onclick="document.getElementById('logo-form').submit();">Changer Logo</button>
                            <form id="logo-form" action="{{ route('root.logo_account') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="user_id" value="{{ $account->id }}">
                                <input type="file" name="logo" id="logoUpload">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Affiliation -->

        <!-- Start Skill -->
        <div class="col-xl-12 col-lg-12 col-md-12">

            <div class="row">

                <div class="col-xl-6 col-lg-6 col-md-12">

                    <!-- Card Row -->
                    <div class="card">
                        <div class="card-header">
                            <h4>Ajout d'une Compétence</h4>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ route('root.addskill_account') }}">

                                @csrf

                                <input type="hidden" name="user_id" value="{{ $account->id }}">
                                <input type="hidden" name="active" value="1">

                                <div class="row">

                                    <div class="col-xl-6 col-lg-6 col-md-12">
                                        <div class="form-group">
                                            <label>Code</label>
                                            <input type="text" class="form-control" name="code" required placeholder="Code" value="{{ Carbon::now()->timestamp }}">
                                        </div>
                                    </div>

                                    <div class="col-xl-6 col-lg-6 col-md-12">
                                        <div class="form-group">
                                            <label>Libellé</label>
                                            <input type="text" class="form-control" name="libelle" required placeholder="Ex. Bijouterie, Argenterie, Bronzerie...">
                                        </div>
                                    </div>

                                    <!-- Submit Busston -->
                                    <div class="col-lg-12 col-md-12">
                                        <button type="submit" class="btn ft--medium btn-primary">Soumettre</button>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- Card Row End -->

                </div>

                <div class="col-xl-6 col-lg-6 col-md-12">

                    <!-- Card Row -->
                    <div class="card">
                        <div class="card-header">
                            <h4>Mes Compétences</h4>
                        </div>
                        <div class="card-body">
                            <div class="jbs-dts-block styl-01">
                                <div class="jbs-dts-header">
                                    <div class="jbs-dts-header-caption">
                                        <div class="jbs-dts-foot-block">
											<div class="sprpower-skills">
                                                @if($competences->count() > 0)
                                                    @foreach($competences as $item)
                                                    <span>
                                                        {{ $item->libelle }}

                                                        &nbsp;

                                                        <a href="#" onclick="submitForm()" data-toggle="tooltip" data-placement="top" title="Supprimer">
                                                            <i class="bi bi-trash text-orange"></i>
                                                        </a>
                                                        <form id="form-skill" method="POST" action="{{ route('root.delskill_account') }}">
                                                            @csrf
                                                            <input type="hidden" name="user_id" value="{{ Auth::user()->id }}" />
                                                            <input type="hidden" name="competence_id" value="{{ $item->id }}" />
                                                        </form>
                                                    </span>
                                                    @endforeach
                                                @else
                                                <span>Pas de compétence pour le moment !</span>
                                                @endif
											</div>
										</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br><br>
                    </div>
                    <!-- Card Row End -->


                </div>

            </div>

        </div>
        <!-- End Skill -->

        <!-- Start Password -->
        <div class="col-xl-6 col-lg-6 col-md-12">

            <!-- Card Row -->
            <div class="card">
                <div class="card-header">
                    <h4>Mot de Passe</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('root.update_password') }}">

                        @csrf

                        <input type="hidden" name="user_id" value="{{ $account->id }}">

                        <div class="row">

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Nouveau Mot de Passe</label>
                                    <input type="password" class="form-control" name="password" required autocomplete="new-password">
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <div class="form-group">
                                    <label>Confirmation Mot de Passe</label>
                                    <input type="password" class="form-control" name="confirmation_password" required autocomplete="new-password">
                                </div>
                            </div>

                            <!-- Submit Busston -->
                            <div class="col-lg-12 col-md-12">
                                <button type="submit" class="btn ft--medium btn-primary">Soumettre</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <!-- Card Row End -->

        </div>
        <!-- End Password -->

        <!-- Start Delete Account -->
        <div class="col-xl-6 col-lg-6 col-md-12">

            @if($account->active == 1)
            <!-- Card Row -->
            <div class="card">
                <div class="card-header">
                    <h4>Désactiver Compte</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('root.destroy_account') }}">

                        @csrf

                        <div class="row">

                            <div class="col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label>Mot de Passe</label>
                                    <input type="hidden" name="user_id" value="{{ $account->id }}">
                                    <input type="password" class="form-control" name="password" required>
                                </div>
                            </div>

                            <!-- Submit Busston -->
                            <div class="col-lg-12 col-md-12">
                                <button type="submit" class="btn ft--medium btn-danger">Soumettre</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <!-- Card Row End -->
            @else
            <!-- Card Row -->
            <div class="card">
                <div class="card-header">
                    <h4>Activer Compte</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('root.active_account') }}">

                        @csrf

                        <div class="row">

                            <div class="col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label>Mot de Passe</label>
                                    <input type="hidden" name="user_id" value="{{ $account->id }}">
                                    <input type="password" class="form-control" name="password" required>
                                </div>
                            </div>

                            <!-- Submit Busston -->
                            <div class="col-lg-12 col-md-12">
                                <button type="submit" class="btn ft--medium btn-succees">Soumettre</button>
                            </div>

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

        </div>
        <!-- End Delete Account -->

    </div>

    <div class="row">

        <!-- Start Responsable -->
        <div class="col-xl-6 col-lg-6 col-md-12">

            <!-- Card Row -->
            <div class="card">
                <div class="card-header">
                    <h4>Responsable</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('root.update_account') }}">

                        @csrf

                        <input type="hidden" name="user_id" value="{{ $account->id }}">

                        <div class="row">

                            <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="{{ $account->noms }}">
                                </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="{{ $account->prenoms }}">
                                </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="{{ $account->birthday }}">
                                </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="M" @if(intval($account->sexe) == 'M') selected @endif>Masculin</option>
                                            <option value="F" @if(intval($account->sexe) == 'F') selected @endif>Féminin</option>
                                        </select>
                                    </div>
                                </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="{{ $account->email }}">
                                </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="{{ $account->phone }}">
                                </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="{{ $account->nationalite }}">
                                </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="{{ $account->zip_code }}">
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label>Adresse</label>
                                    <input type="text" class="form-control" name="adresse" value="{{ $account->adresse }}">
                                </div>
                            </div>

                            <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="{{ $account->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="{{ $account->twitter }}">
                                </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="{{ $account->linkedin }}">
                                </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="{{ $account->instagram }}">
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label>Biographie</label>
                                    <textarea id="tinymce" class="form-control" name="biographie">{!! $account->biographie !!}</textarea>
                                </div>
                            </div>

                            <!-- Submit Busston -->
                            <div class="col-lg-12 col-md-12">
                                <button type="submit" class="btn ft--medium btn-primary">Soumettre</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <!-- Card Row End -->
            <div></div>

        </div>
        <!-- End Responsable -->

        <!-- Start Entreprise -->
        <div class="col-xl-6 col-lg-6 col-md-12">

            <!-- Card Row -->
            <div class="card">
                <div class="card-header">
                    <h4>Entreprise</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('root.update_entreprise') }}" enctype="multipart/form-data">

                        @csrf

                        <input type="hidden" name="user_id" value="{{ $account->id }}">

                        <div class="row">

                            <div class="col-xl-12 col-lg-12 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="{{ $account->logo ? $account->logo : URL::to('assets/img/icone1.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">
                                <div class="form-group">
                                    <label>Raison sociale</label>
                                    <input type="text" class="form-control" name="raison_sociale" value="{{ $account->raison_sociale ? $account->raison_sociale : old('raison_sociale') }}">
                                </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="{{ $account->sigle ? $account->sigle : 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" @if(intval($account->annee_experience) == 1) selected @endif>1+ an</option>
                                            <option value="2" @if(intval($account->annee_experience) == 2) selected @endif>2+ années</option>
                                            <option value="3" @if(intval($account->annee_experience) == 3) selected @endif>3+ années</option>
                                            <option value="4" @if(intval($account->annee_experience) == 4) selected @endif>4+ années</option>
                                            <option value="5" @if(intval($account->annee_experience) == 5) selected @endif>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="{{ $account->rccm ? $account->rccm : old('rccm') }}">
                                </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="{{ $account->nif ? $account->nif : old('nif') }}">
                                </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="{{ $account->siret ? $account->siret : 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="{{ $account->forme_juridique ? $account->forme_juridique : 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 }}" @if($account->secteur_id == $secteur->id) selected @endif>
                                                {{ $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="tinymce2" name="description" rows="5">{{ $account->description ? $account->description : old('description') }}</textarea>
                                </div>
                            </div>

                            <!-- Submit Busston -->
                            <div class="col-lg-12 col-md-12">
                                <button type="submit" class="btn ft--medium btn-primary">Soumettre</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <!-- Card Row End -->

        </div>
        <!-- End Entreprise -->

        <!-- Start Localisation -->
        <div class="col-xl-12 col-lg-12 col-md-12">

            <!-- Card Row -->
            <div class="card">
                <div class="card-header">
                    <h4>Localisation</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('root.update_localisation') }}">

                        @csrf

                        <input type="hidden" name="user_id" value="{{ $account->id }}">

                        <div class="row">

                            <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-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="{{ $account->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="{{ $account->longitude }}">
                                </div>
                            </div>

                            <!-- Submit Busston -->
                            <div class="col-lg-12 col-md-12">
                                <button type="submit" class="btn ft--medium btn-primary">Soumettre</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <!-- Card Row End -->

        </div>
        <!-- End Localisation -->

    </div>





</div>

@endsection

@section('scripts')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->
<!-- Inclure Leaflet.js JS -->
<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('imageUpload').addEventListener('change', function(event) {
        var reader = new FileReader();
        var file = event.target.files[0];

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

            reader.readAsDataURL(file);

            // Soumettre le formulaire automatiquement
            document.getElementById('avatar-form').submit();
        }
    });
</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);

            // Soumettre le formulaire automatiquement
            document.getElementById('logo-form').submit();
        }
    });
</script>

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

        if (file) {
            reader.onload = function(e) {
                // Ici, vous pouvez prévisualiser l'image (optionnel)
                document.getElementById('banner').src = e.target.result;
            }

            reader.readAsDataURL(file);

            // Soumettre le formulaire automatiquement après la sélection de l'image
            document.getElementById('banner-form').submit();
        }
    });

</script>

<script>
    $(document).ready(function() {
        // Activer les tooltips
        $('[data-toggle="tooltip"]').tooltip();

        // Fonction pour copier le lien
        $('#copyUrl').click(function() {
            var link = $('#linkAffiliation').text();
            var tempInput = $('<input>');
            $('body').append(tempInput);
            tempInput.val(link).select();
            document.execCommand('copy');
            tempInput.remove();

            // Afficher une alerte ou un message de succès
            //alert('Lien copié : ' + link);
        });
    });
</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>

<script>
    function submitForm() {
        document.getElementById('form-skill').submit();
    }
</script>

@endsection