@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 -->

@endsection

@section('root-content')

<form method="POST" action="{{ route('root.store_utilisateur') }}" enctype="multipart/form-data">

    @csrf

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

        <div class="row">

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

                    <div class="card-body align-items-center text-center">
                        <figure>
                            <img src="{{ URL::to('storage/avatars/avatar.png') }}" id="image" class="img-fluid circle" style="height: 100px;">
                        </figure>
                    </div>

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

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

                    <div class="card-body align-items-center text-center">
                        <figure>
                            <img src="{{ URL::to('storage/avatars/avatar.png') }}" id="logo" class="img-fluid circle" style="height: 100px;">
                        </figure>
                    </div>

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

            <!-- 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">

                        <div class="row">

                            <div class="col-xl-12 col-lg-12 col-md-9">
                                <div class="form-group">
                                    <label>Avatar du responsable</label>
                                    <input onclick="changeAvatar();" type="file" class="form-control" name="avatar" id="imageUpload" value="{{ old('avatar') }}">
                                </div>
                            </div>

                            <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>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="M" @if(old('sexe') == 'M') selected @endif>Masculin</option>
                                            <option value="F" @if(old('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="{{ 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-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-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>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>Adresse</label>
                                    <input type="text" class="form-control" name="adresse" value="{{ old('adresse') }}" required>
                                </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="role" required>
                                            <option value="Root" @if(old('role') == "Root") selected @endif>Root</option>
                                            <option value="Entreprise" @if(old('role') == "Entreprise") selected @endif>Entreprise</option>
                                            <option value="Freelance" @if(old('role') == "Freelance") selected @endif>Freelance</option>
                                            <option value="Client" @if(old('role') == "Client") selected @endif>Client</option>
                                        </select>
                                    </div>
                                </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="{{ 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>Linked'In</label>
                                    <input type="text" class="form-control" name="linkedin" value="{{ old('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="{{ old('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" required>{!! old('biographie') !!}</textarea>
                                </div>
                            </div>



                        </div>

                    </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">

                        <div class="row">

                            <div class="col-xl-12 col-lg-12 col-md-9">
                                <div class="form-group">
                                    <label>Logo de l'entreprise</label>
                                    <input type="file" class="form-control" name="logo" id="logoUpload" value="{{ old('logo') }}">
                                </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="{{ 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" required>
                                            <option value="1" @if(old('annee_experience') == 1) selected @endif>1+ an</option>
                                            <option value="2" @if(old('annee_experience') == 2) selected @endif>2+ années</option>
                                            <option value="3" @if(old('annee_experience') == 3) selected @endif>3+ années</option>
                                            <option value="4" @if(old('annee_experience') == 4) selected @endif>4+ années</option>
                                            <option value="5" @if(old('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="{{ 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') }}" required>
                                    <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" required>
                                            <option value="">Choix du Secteur</option>
                                            @foreach($secteurs as $secteur)
                                            <option value="{{ $secteur->id }}" @if(old('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" required>{{ old('description') }}</textarea>
                                </div>
                            </div>

                        </div>

                    </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">

                        <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="{{ old('latitude') }}" required>
                                </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') }}" required>
                                </div>
                            </div>

                            <br>

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

                        </div>

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

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

        </div>





    </div>

</form>

@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);
        }
    });
</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).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>





@endsection