@extends('../layout/' . $layout)

@section('subhead')
    <title>{{ config('app.name', '') }}-Clients</title>
@endsection

@section('subcontent')
    <div class="intro-y flex flex-col sm:flex-row items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Liste des clients</h2>
        <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
            <button class="btn btn-primary shadow-md mr-2" onclick="location.href = '/clients/'">
                <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Liste des clients
            </button>
        </div>
    </div>
    <div class="grid grid-cols-11 gap-x-6 mt-5 pb-20">
        <!-- BEGIN: Notification -->
        <!-- <div class="intro-y col-span-11 alert alert-primary alert-dismissible show flex items-center mb-6" role="alert">
                    <span><i data-lucide="info" class="w-4 h-4 mr-2"></i></span>
                    <span>Starting May 10, 2021, there will be changes to the Terms & Conditions regarding the number of products that may be added by the Seller. <a href="https://themeforest.net/item/midone-jquery-tailwindcss-html-admin-template/26366820" class="underline ml-1" target="blank">Learn More</a></span>
                    <button type="button" class="btn-close text-white" data-tw-dismiss="alert" aria-label="Close">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div> -->
        <!-- BEGIN: Notification -->
        <div class="intro-y col-span-11 2xl:col-span-9">
            <form id="form-client" action="" method="post" enctype="multipart/form-data">
                <!-- BEGIN: informations commerciales -->
                <div class="intro-y box p-5 mt-5">
                    <div class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-5">
                        <div
                            class="font-medium text-base flex items-center border-b border-slate-200/60 dark:border-darkmode-400 pb-5">
                            <i data-lucide="chevron-down" class="w-4 h-4 mr-2"></i> Informations client
                        </div>
                        <div class="mt-5">

                            <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
                                <div class="form-label xl:w-64 xl:!mr-10">
                                    <div class="text-left">
                                        <div class="flex items-center">
                                            <div class="font-medium">Dénomination</div>
                                            <div
                                                class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md">
                                                Obligatoire</div>
                                        </div>
                                        <div class="leading-relaxed text-slate-500 text-xs mt-3">

                                        </div>
                                    </div>
                                </div>
                                <div class="w-full mt-3 xl:mt-0 flex-1">
                                    <input id="client-name" type="text" maxlength="50" class="form-control"
                                        value="{{ $client->name ?? '' }}" placeholder="Tappez le nom de la structure"
                                        required>
                                    <div class="form-help text-right">50 caractères aux maximum</div>
                                </div>
                            </div>

                            <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
                                <div class="form-label xl:w-64 xl:!mr-10">
                                    <div class="text-left">
                                        <div class="flex items-center">
                                            <div class="font-medium">RCCM</div>
                                            <div
                                                class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md">
                                                Optionnel</div>
                                        </div>
                                        <div class="leading-relaxed text-slate-500 text-xs mt-3">

                                        </div>
                                    </div>
                                </div>
                                <div class="w-full mt-3 xl:mt-0 flex-1">
                                    <input id="client-rccm" type="text" maxlength="10" class="form-control"
                                        value="{{ $client->rc ?? '' }}" placeholder="ABC12 2512">
                                    <div class="form-help text-right">10 caractères aux maximum</div>
                                </div>
                            </div>
                            <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
                                <div class="form-label xl:w-64 xl:!mr-10">
                                    <div class="text-left">
                                        <div class="flex items-center">
                                            <div class="font-medium">IFU</div>
                                            <div
                                                class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md">
                                                Optionnel</div>
                                        </div>
                                        <div class="leading-relaxed text-slate-500 text-xs mt-3">

                                        </div>
                                    </div>
                                </div>
                                <div class="w-full mt-3 xl:mt-0 flex-1">
                                    <input id="client-ifu" type="number" maxlength="13" class="form-control"
                                        value="{{ $client->ifu ?? '' }}" placeholder="1234567890012">
                                    <div class="form-help text-right">13 caractères aux maximum</div>
                                </div>
                            </div>

                            <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
                                <div class="form-label xl:w-64 xl:!mr-10">
                                    <div class="text-left">
                                        <div class="flex items-center">
                                            <div class="font-medium">Adresse physique</div>
                                            <div
                                                class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md">
                                                Optionnel</div>
                                        </div>
                                        <div class="leading-relaxed text-slate-500 text-xs mt-3">
                                            <div></div>
                                            <div class="mt-2"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-full mt-3 xl:mt-0 flex-1">
                                    <textarea id="client-adresse" class="form-control">{{ $client->adresse ?? '' }}</textarea>
                                    <div class="form-help text-right">191 caractères au maximum</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="intro-y box p-5 mt-5">
                    <div class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-5">
                        <div
                            class="font-medium text-base flex items-center border-b border-slate-200/60 dark:border-darkmode-400 pb-5">
                            <i data-lucide="chevron-down" class="w-4 h-4 mr-2"></i> Rattachement
                        </div>
                        <div class="mt-5">
                            @if (isCommercial(Auth()->user()->id))
                                <input type="hidden" value="{{ Auth()->user()->id }}" id="commercial_id">
                            @else
                                <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
                                    <div class="form-label xl:w-64 xl:!mr-10">
                                        <div class="text-left">
                                            <div class="flex items-center">
                                                <div class="font-medium">Commercial</div>
                                                <div
                                                    class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md">
                                                    Obligatoire</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-full mt-3 xl:mt-0 flex-1">
                                        <select id="commercial_id" data-placeholder="Choisir ou saisir le commercial"
                                            class="tom-select w-full" required>
                                            @foreach ($commerciaux as $commercial)
                                                <option
                                                    {{ $client ? ($client->user_id == $commercial->id ? 'selected' : '') : '' }}
                                                    value="{{ $commercial->id }}">
                                                    {{ $commercial->nom . ' ' . $commercial->prenom . '(' . $commercial->name . ')' }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endif

                            <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
                                <div class="form-label xl:w-64 xl:!mr-10">
                                    <div class="text-left">
                                        <div class="flex items-center">
                                            <div class="font-medium">Zone (Provenance)</div>
                                            <div
                                                class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md">
                                                Obligatoire</div>
                                        </div>
                                        <div class="leading-relaxed text-slate-500 text-xs mt-3">
                                            Veuillez sélectionner la zone où ce trouve l'établissement principal du client.
                                        </div>
                                    </div>
                                </div>
                                <div class="w-full mt-3 xl:mt-0 flex-1">
                                    {{-- @dd($zones) --}}
                                    <select id="zone_id" data-placeholder="Choisir ou saisir le zone"
                                        class="tom-select w-full" required>
                                        {{-- @if (is_null($zones))
                                        <option value=""></option>
                                        @else --}}
                                        @foreach ($zones as $zone)
                                            <option {{ $client ? ($client->zone_id == $zone->id ? 'selected' : '') : '' }}
                                                value="{{ $zone->id }}">{{ $zone->name }}</option>
                                        @endforeach
                                        {{-- @endif --}}
                                    </select>
                                </div>
                            </div>
                            <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
                                <div class="form-label xl:w-64 xl:!mr-10">
                                    <div class="text-left">
                                        <div class="flex items-center">
                                            <div class="font-medium">Catégorie</div>
                                            <div
                                                class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md">
                                                Obligatoire</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-full mt-3 xl:mt-0 flex-1">
                                    <select id="categorie_id" data-placeholder="Choisir ou saisir la catégorie"
                                        class="tom-select w-full" required>
                                        @foreach ($categories as $categorie)
                                            <option
                                                {{ $client ? ($categorie->id == $client->categorie_id ? 'selected' : '') : '' }}
                                                value="{{ $categorie->id }}">{{ $categorie->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END: informations commerciales -->
                <!-- BEGIN: Product Information -->
                <div class="intro-y box p-5 mt-5">
                    <div class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-5">
                        <div
                            class="font-medium text-base flex items-center border-b border-slate-200/60 dark:border-darkmode-400 pb-5">
                            <i data-lucide="chevron-down" class="w-4 h-4 mr-2"></i> Informations sur le promoteur
                        </div>
                        <div class="mt-5">
                            <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
                                <div class="form-label xl:w-64 xl:!mr-10">
                                    <div class="text-left">
                                        <div class="flex items-center">
                                            <div class="font-medium">Promoteur</div>
                                            <div
                                                class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md">
                                                Obligatoire</div>
                                        </div>
                                        <div class="leading-relaxed text-slate-500 text-xs mt-3">

                                        </div>
                                    </div>
                                </div>
                                <div class="w-full mt-3 xl:mt-0 flex-1">
                                    <input id="client-promotteur" type="text" maxlength="100" class="form-control"
                                        value="{{ $client->promotteur ?? '' }}"
                                        placeholder="Tappez les nom et prénoms du promoteur" required>
                                    <div class="form-help text-right">100 caractères aux maximum</div>
                                </div>
                            </div>

                            <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
                                <div class="form-label xl:w-64 xl:!mr-10">
                                    <div class="text-left">
                                        <div class="flex items-center">
                                            <div class="font-medium">Téléphone</div>
                                            <div
                                                class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md">
                                                Obligatoire</div>
                                        </div>
                                        <div class="leading-relaxed text-slate-500 text-xs mt-3">

                                        </div>
                                    </div>
                                </div>
                                <div class="w-full mt-3 xl:mt-0 flex-1">
                                    <input id="client-telephone" type="number" maxlength="10" class="form-control"
                                        placeholder="97123456" value="{{ $client->telephone ?? '' }}" required>
                                    <div class="form-help text-right"></div>
                                </div>
                            </div>
                            <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
                                <div class="form-label xl:w-64 xl:!mr-10">
                                    <div class="text-left">
                                        <div class="flex items-center">
                                            <div class="font-medium">Email</div>
                                            <div
                                                class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md">
                                                Optionnel</div>
                                        </div>
                                        <div class="leading-relaxed text-slate-500 text-xs mt-3">

                                        </div>
                                    </div>
                                </div>
                                <div class="w-full mt-3 xl:mt-0 flex-1">
                                    <input id="client-email" type="email" maxlength="50" class="form-control"
                                        placeholder="monnom@domaine.com" value="{{ $client->email ?? '' }}">
                                    <div class="form-help text-right"></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- END: Product Information -->
                <div class="intro-y box p-5 mt-5">
                    <div class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-5">
                        <div
                            class="font-medium text-base flex items-center border-b border-slate-200/60 dark:border-darkmode-400 pb-5">
                            <i data-lucide="chevron-down" class="w-4 h-4 mr-2"></i> Etat du client
                        </div>
                        <div class="mt-5">
                            <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
                                <div class="form-label xl:w-64 xl:!mr-10">
                                    <div class="text-left">
                                        <div class="flex items-center">
                                            <div class="font-medium">Statut</div>
                                            <div
                                                class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md">
                                                Actif</div>
                                        </div>
                                        <div class="leading-relaxed text-slate-500 text-xs mt-3">
                                        </div>
                                    </div>
                                </div>
                                <div class="w-full mt-3 xl:mt-0 flex-1">
                                    <div class="form-check form-switch">
                                        <input id="client-status-active" class="form-check-input" type="checkbox"
                                            {{ $client ? ($client->status ? 'checked' : '') : 'checked' }}>
                                        <label class="form-check-label" for="product-status-active">Disponible</label>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- END: Product Management -->
                <div class="flex justify-end flex-col md:flex-row gap-2 mt-5">
                    <button type="button"
                        class="btn py-3 border-slate-300 dark:border-darkmode-400 text-slate-500 w-full md:w-52">Abandonner</button>
                    <button id="save-client" type="button"
                        class="btn py-3 btn-primary w-full md:w-52">Enregistrer</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    @vite('resources/js/ckeditor-classic.js')
    <script type="module">
        (function() {

            $('#save-client').on('click', (event) => {
                save();
            });

            $('#form-client').on('keyup', (event) => {
                if (event.keyCode === 13) {
                    save()
                }
            });
            const clientId = {{ $client->id ?? 0 }};
            async function save() {
                $('#save-client').html(
                    '<i data-loading-icon="oval" data-color="white" class="w-5 h-5 mx-auto"></i>');
                $('#save-client').attr('disabled', true);
                tailwind.svgLoader()
                await helper.delay(1500)
                try {
                    let data = {
                        name: $('#client-name').val(),
                        adresse: $('#client-adresse').val(),
                        rc: $('#client-rccm').val(),
                        ifu: $('#client-ifu').val(),
                        commercialId: $('#commercial_id').val(),
                        categorieId: $('#categorie_id').val(),
                        zoneId: $('#zone_id').val(),
                        promotteur: $('#client-promotteur').val(),
                        telephone: $('#client-telephone').val(),
                        email: $('#client-email').val(),
                        status: $('#client-status-active').is(':checked'),

                    };
                    console.log(data);
                    if (clientId != 0) {
                        axios.put('/api/clients/' + clientId, data).then((res) => {
                            let result = res.data;
                            if (result.success) {
                                Swal.fire({
                                    title: 'Opération réussie',
                                    text: "Le client a été modifié",
                                    icon: 'success',
                                    confirmButtonColor: '#3085d6',
                                    confirmButtonText: 'OK'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        location.href = '/clients';
                                    } else {
                                        location.href = '/clients';
                                    }
                                })
                            } else {
                                Swal.fire("Echec de l'opération", result.message, 'error');
                                $('#save-client').html('Enregister');
                                $('#save-client').removeAttr('disabled');
                                console.log("error log update");
                                console.log(result);
                            }
                        });
                    } else {
                        axios.post('/api/clients/store', data).then((res) => {
                            let result = res.data;
                            if (result.success) {
                                Swal.fire({
                                    title: 'Opération réussie',
                                    text: "Voulez-vous ajouter un autre client ?",
                                    icon: 'success',
                                    showCancelButton: true,
                                    confirmButtonColor: '#d33',
                                    cancelButtonColor: '#3085d6',
                                    confirmButtonText: 'Oui',
                                    cancelButtonText: 'Non'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        document.getElementById('form-client').reset();
                                        $('#save-client').html('Enregistrer');
                                        $('#save-client').removeAttr('disabled');
                                    } else {
                                        location.href = '/clients';
                                    }
                                })
                            } else {
                                Swal.fire("Echec de l'opération", result.message, 'error');
                                $('#save-client').html('Enregistrer');
                                $('#save-client').removeAttr('disabled');
                                console.log("error log new create");
                                console.log(result);
                            }
                        });
                    }
                } catch (error) {
                    $('#save-client').html('Enregistrer');
                    $('#save-client').removeAttr('disabled');
                    console.log(error);
                }
            }
        })()
    </script>
@endsection