@extends('clients.layout.baseT')

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    {{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> --}}
@endsection



@section('contenu')
    <!-- Titlebar                                                                                                                                                            ================================================== -->
    <div id="titlebar" class="gradient">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="col-xl-12">
                        <div class="section-headline centered margin-top-0 margin-bottom-0">
                            <img src="{{ asset('clients/images/favicon.png') }}" alt=""
                                style="height: 150px;width: 150px">
                        </div>
                    </div>

                    <div class="col-xl-12">
                        <div class="section-headline centered margin-top-0 margin-bottom-0">
                            <img src="{{ asset('clients/images/Logo.png') }}" alt=""
                                style="height: 150px;width: 100">
                        </div>
                    </div>

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

    <div class="container">
        <div class="col-xl-12">
            @include('clients.layout.message')
        </div>
    </div>


    <!-- Page Content
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ================================================== -->
    <div class="container">
        <div class="row">
            <div class="col-xl-12">

                <div class="login-register-page">
                    <!-- Welcome Text -->
                    <div class="welcome-text">
                        <h3 style="font-size: 26px;">Créons votre compte !</h3>
                        <span>Avez-vous deja un compte ? <a href="{{ url('login') }}">Log In!</a></span>
                    </div>


                    <!-- Form -->
                    <form method="post" action="{{ url('register') }}" enctype="multipart/form-data">

                        {{-- <input type="text" name="" id="" class="form-control"> --}}

                        @csrf
                        <div class="row">

                            <div class="col-xl-6">
                                <label>Nom : </label>
                                <input type="text" class="input-text with-border" name="nom" id="nom"
                                    placeholder="Nom d'utilisateur " required value="{{ old('nom') }}" />
                            </div>

                            <div class="col-xl-6">
                                <label for="prenom">Prénom : </label>
                                <input type="text" class="input-text with-border" name="prenom" id="prenom"
                                    placeholder="Prénom d'utilisateur " required value="{{ old('prenom') }}" />
                            </div>
                            <div class="col-xl-6">
                                <label for="fonction">Fonction :</label>
                                <input type="text" class="input-text with-border" name="fonction" id="fonction"
                                    placeholder="Fonction de l'utilisateur " required value="{{ old('fonction') }}" />
                            </div>





                            <div class="col-xl-6">
                                <div class="#">
                                    <label for="password_confirmation">Choisir votre ville, saisir votre adresse:</label>
                                    <select id="#ville" class="input-text with-border js-example-basic-single"
                                        name="search">
                                        <option value="">Choisir votre ville</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-xl-6">
                                <div class="submit-field">
                                    <label for="pierre"> Votre ville :</label>
                                    <input type="text" class="input-text with-border" name="city" id="city"
                                        required value="{{ old('city') }}" />
                                </div>
                            </div>

                            <input type="hidden" name="score" id="score">
                            <input type="hidden" name="housenumber" id="housenumber">
                            <input type="hidden" name="name" id="name">
                            <input type="hidden" name="street" id="street">

                            <div class="col-xl-6">
                                <label for="adresse">Adresse Postale :</label>
                                <input type="text" class="input-text with-border" name="adresse" id="adresse"
                                    placeholder="Adresse Postale " required value="{{ old('adresse') }}" />
                            </div>

                            <div class="col-xl-6">
                                <label for="code">Code Postale</label>
                                <input type="text" class="input-text with-border" name="code" id="code"
                                    placeholder="Code Postale " required value="{{ old('code') }}" />
                            </div>

                            <div class="col-xl-6">
                                <label for="email">Email :</label>
                                <input type="email" class="input-text with-border" name="email" id="email"
                                    placeholder="Email Address" required value="{{ old('email') }}" />
                            </div>

                            <div class="col-xl-6">
                                <label for="phone">Télphone d'utilisateur :</label>
                                <input type="number" class="input-text with-border" name="phone" id="phone"
                                    placeholder="Télphone d'utilisateur" required value="{{ old('phone') }}" />
                            </div>


                            <div class="col-xl-6" title="Should be at least 8 characters long"
                                data-tippy-placement="bottom">
                                <label for="password">Mot de passe :</label>
                                <input type="password" class="input-text with-border" name="password" id="password"
                                    placeholder="Password" required value="{{ old('password') }}" />
                            </div>

                            <div class="col-xl-6">
                                <label for="password_confirmation">Confirmer mot de passe :</label>
                                <input type="password" class="input-text with-border" name="password_confirmation"
                                    id="password_confirmation" placeholder="Confirmer le Mot de Passe" required />
                            </div>


                            <div class="col-xl-6">
                                <div class="submit-field">
                                    <label for="ville">Profil :</label>
                                    <select class="selectpicker with-border" name="profil_id" id="profil_id" required>
                                        @foreach ($profils as $profil)
                                            <option value="{{ $profil->id }}">{{ $profil->profil_label }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="submit-field" id="profil_cache">
                                    <label for="ville">Plus de précision :</label>
                                    <textarea name="autre_profil" id="autre_profil" class="input-text with-border"></textarea>
                                </div>
                            </div>

                            <div class="col-xl-6">
                                <label for=""> Votre Logo :</label>
                                <input type="file" class="input-text with-border" name="logo" accept=".png,.jpg"
                                    required>
                            </div>




                            {{-- <div class="col-xl-6"data-tippy-placement="bottom">
                                <label for="logo">Logo :</label>
                                <input type="file" class="input-text with-border" name="logo" id="logo"
                                    placeholder="logo" required value="{{ old('logo') }}" accept=".png,.jpg" />
                            </div> --}}


                        </div>

                        <!-- Button -->
                        <div class="col-xl-12">
                            <button class="button full-width button-sliding-icon ripple-effect margin-top-10 "
                                type="submit">S'inscrire <i class="icon-material-outline-arrow-right-alt"></i></button>
                        </div>
                    </form>


                    <!-- Social Login -->
                    {{-- <div class="social-login-separator"><span>Ou </span></div>
                    <div class="social-login-buttons">
                        <a class="ripple-effect button"></i>Login</a>
                        <button class="google-login ripple-effect"><i class="icon-brand-google-plus-g"></i> Register via
                        Google+</button>
                    </div> --}}
                </div>

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

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // https://api-adresse.data.gouv.fr/search/?q=
            $('.js-example-basic-single').select2({
                placeholder: 'Rechercher votre ville en saisissant votre adresse ...',
                // theme: 'bootstrap5',
                // data : data,
                language: {
                    searching: function() {
                        return "Recherche en cours ...";
                    },
                    inputTooShort: function() {
                        return "Entrer au moins 3 caractere ...";
                    },
                    // noResults: function(){
                    // return "Type keywords separated by commas";
                    // },
                },
                minimumInputLength: 5,
                maximumSelectionLength: 5,
                ajax: {
                    url: function(params) {
                        return `https://api-adresse.data.gouv.fr/search/?q=${params.term}&type=housenumber&autocomplete=0`
                    },
                    method: 'get',
                    dataType: "json",
                    cache: true,
                    data: function(params) {
                        var query = {
                            search: params.term,
                        }
                        return query;
                    },
                    processResults: function(data) {
                        //  console.log(data.features[0].properties);
                        var properties = $.map(data.features, function(feature) {
                            return feature.properties;
                        });
                    //   console.log(properties);
                        return {
                            results: $.map(properties, function(item) {
                                // console.log(item);
                                return {
                                    text: item.label,
                                    id: item.label,
                                    name: item.name,
                                    code: item.postcode,
                                    citycode: item.citycode,
                                    housenumber: item.housenumber,
                                    city: item.city,
                                    street: item.street,
                                    score: item.score
                                }
                            })
                        }
                    }
                }
            });

        });
    </script>
    <script>
        $(document).ready(function() {

            $("#profil_cache").hide();

            $("#profil_id").change(function() {
                var profil = $(this).val();
                if (parseInt(profil) === 8) {
                    $("#profil_cache").show();
                    $("#autre_profil").attr('required', true); //Add attribut required
                } else {
                    $("#profil_cache").hide();
                    $("#autre_profil").removeAttr('required'); //remove attribut required
                }
            })
        })
    </script>


    <script>
        $('.js-example-basic-single').on('select2:select', function(e) {
            var data = e.params.data;
            // console.log(data);
            $("#code").val(data.code)
            $("#adresse").val(data.citycode)
            $("#housenumber").val(data.housenumber)
            $("#name").val(data.name)
            $("#score").val(data.score)
            $("#street").val(data.street)
            $("#city").val(data.city)

        });
    </script>







    {{-- <script>
        function addville(ville, id, code, adresse) {
            $("#search").val(ville)
            $("#code").val(code)
            $("#adresse").val(adresse)
            // alert(code)
            // $(`#${id}`).remove()
            $('.mylistItem').remove()
            $("#villegroupe").removeAttr('style')
        }
    </script> --}}



    {{-- <script>
        $(document).ready(function() {


            var style = {
                "border-radius": "20px",
                "border": " 2px solid #73AD21",
                "padding-left": "10px",
                "z-index": "2999999",
                "position": "relative",
            }

            $("#villegroupe").hide()
            var villegroupe = document.getElementById("villegroupe")
            let url = "https://api-adresse.data.gouv.fr/search/?q="
            let myUrl
            let data
            $("#search").keyup(function() {
                var searchvalu = this.value
                if (searchvalu.trim().toLowerCase().length > 2) {
                    $("#villegroupe").css(style)
                    $('.mylistItem').remove()
                    data = []
                    myUrl = url + searchvalu
                    fetch(myUrl)
                        .then((response) => {
                            return response.json()
                        })
                        .then((response) => {
                            $("#villegroupe").show()
                            data = response

                            // data.features.map((data) => {
                            //     var li = document.createElement('li')
                            //     li.className = "list-group-item mylistItem"
                            //     li.id = data.properties.id
                            //     li.innerHTML = data.properties.label
                            //     villegroupe.appendChild(li)
                            // })

                            if (data.features.length > 0) {
                                $.each(data.features, (key, value) => {
                                    $('#villegroupe').append($(
                                        `<li class=" mylistItem"onclick="addville('${value.properties.label}', '${value.properties.id}', '${value.properties.citycode}', '${value.properties.postcode}')" id="${value.properties.id}" >${value.properties.label}</li>`
                                    ))

                                })
                            }
                        })
                        .catch((error) => console.log(error))

                } else {
                    $('.mylistItem').remove()
                    $("#villegroupe").removeAttr('style')
                }
            })

            $(".mylistItem").each(function(index) {
                $(this).click(function() {
                    $("#search").val($(this).text())
                    $(this).remove()
                })
            })

        })
    </script> --}}
@endsection