@extends('models')

@section('content-body')
    <div class="modal fade" id="exampleModalLg" data-bs-focus="false" tabindex="-1" aria-labelledby="exampleModalLgLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">

            <div class="modal-content">

                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLgLabel">Gestion des clients de garde
                    </h6>
                    <div class="" style="padding-left: 1rem;">
                        <i class='bx bxs-info-circle  fs-10' style='color:#696969; font-size:16pt' data-bs-toggle="tooltip"
                            data-bs-custom-class="tooltip-light" data-bs-placement="bottom"
                            title="Les données affichées sont fonctions de la période de garde."></i>

                    </div>
                    <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="d-flex justify-content-end mb-2">
                        <button class=" btn btn-success py-1 me-1" id="addGarde" title=" Ajouter un client de garde">
                            <i class='bx bxs-check-circle fs-14 me-2'></i>
                            <span class="fs-14">valider</span>
                        </button>
                        <button class=" btn btn-warning py-1 me-1" id="updateGarde" title=" Modifier un client de garde"
                            style="display:none">
                            <i class='bx bx-edit fs-14 me-2'></i>
                            <span class="fs-14">Modifier</span>
                        </button>
                        <button class=" btn btn-danger py-1" id="anulUpdate">
                            <i class='bx bx-x-circle fs-14 me-2'></i>
                            <span class="fs-14">Annuler</span>
                        </button>
                        <form id="formCsvClientGarde" class="ms-1">
                            @csrf
                            <input type="file" name="csvClientGarde" id="btnIntegreCsv" hidden>
                            <label class=" btn btn-primary py-1" for="btnIntegreCsv" id="">
                                <i class='bx bx-download fs-14 me-2'></i>
                                <span class="fs-14">Integrer csv</span>
                                <input type="submit" value="" id="btnsubmitCsv" hidden>
                            </label>
                        </form>
                    </div>

                    <div class=" row mb-2">
                        <div class="col-lg-7 col-sm-12 col-md-12 mb-2">
                            <p for="input-label" class="mb-0 text-muted">Client : </p>

                            <select class="js-example-basic-multiple form-control" name="listeClient[]" id="listeClient"
                                multiple="multiple">
                                <option value="">Selectionner le client</option>
                                @foreach ($listeClient as $item)
                                    <option value="{{ $item->IDCLIENT }}">{{ $item->NomClient }} </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-xl-5 col-sm-6 mb-2">
                            <p for="input-label" class="mb-0 text-muted">Période de garde : </p>
                            <input type="text" name="daterange" class="form-control text-center" style="padding :6px" id="daterange">
                        </div>

                        <!-- <div class="col-xl-2 col-md-2 col-sm-2 m-0 d-flex justify-content-end align-items-center" style="padding-left:0px !important;padding-top: 1rem;">
                                    {{-- <i class="ri-file-excel-2-fill fs-32 text-success"></i>
                            <i class='bx bxs-file-pdf fs-32 text-danger'></i> --}}


                                        <i class="las la-file-pdf fs-36 text-danger"  data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-danger" data-bs-placement="top"  title=" Exporter en PDF"></i>
                                        <i class="las la-file-excel fs-36 text-success"  data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-success" data-bs-placement="bottom"  title=" Exporter en excel"></i>

                                </div> -->
                    </div>
                    <div class="row">
                        <div class="table-responsive">
                            <table class="tablehover table table-striped text-nowrap w-100" id="tableclient">
                                <thead class="table-header-primary">
                                    <tr class="text-light">
                                        <th class=" text-center">Action</th>
                                        <th class=" text-center">Debut de garde</th>
                                        <th class=" text-center">Fin de garde</th>
                                        <th class=" text-center">Client</th>
                                        <th class=" text-center">Posit°</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

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

    </div>


    {{-- Toastr --}}
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div id="notification" class="toast colored-toast " role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header text-fixed-white" id="notif-header">
                <img class="bd-placeholder-img rounded me-2" src="../assets/images/brand-logos/toggle-dark.png"
                    alt="...">
                <strong class="me-auto" id="notif-title">Notification</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="notif-body">
                Your,toast message here.
            </div>
        </div>
    </div>
@endsection
@section('script')
    {{-- <script>
        $(document).ready(function() {
            // config

            $('#notification').on('hidden.bs.toast', function() {
                // console.log(types)
                _("notif-header").classList.remove("bg-" + types)
                _("notification").classList.remove("bg-" + types + "-transparent")
                $("#notif-title").text("")
                $("#notif-body").text("")
            })

            // select2 parameter
            $('.js-example-basic-multiple').select2({
                dropdownParent: $("#exampleModalLg")
            });

            var table = $("#tableclient").DataTable({
                language: languageTable,
                columnDefs: [{
                    targets: [0, 1, 2, 4],
                    className: 'text-center'
                }],
                // pagingType: 'full_numbers',
                pageLength: 10,
            })

            // VARIABLE
            var dateDebut = ""
            var dateFin = ""
            var types = ""
            var idGarde = ""

            // CHAREMENT DE LA LISTE DANS LE MODAL
            listeGarde(dateConstruct($('input[name="daterange"]').val()))
            listeClient()

            // ouverture du modal
            $("#exampleModalLg").modal("show")

            // TRAITEMENTS

            $('input[name="daterange"]').change(function() {
                listeGarde(dateConstruct($('input[name="daterange"]').val()))
            })

            $("#addGarde").click(function() {

                $.ajax({
                    url: "{{ route('addClientGarde') }}",
                    method: "post",
                    dataType: "json",
                    data: {
                        _token: '{{ csrf_token() }}',
                        dateInterval: dateConstruct($('input[name="daterange"]').val()),
                        clients: $("#listeClient").val()
                    },
                    beforeSend: progressHandler(),
                    success: function(response, statut) {
                        // console.log(response)

                        if (response.error != false) {
                            completeHandler()
                            notif("danger", "Attention", "Erreur lors de l'enregistrement")
                            return 0
                        }
                        completeHandler()
                        notif("success", "Success !!", "Ajout effectué avec success")
                        listeGarde(dateConstruct($('input[name="daterange"]').val()))
                        listeClient()
                        $("#listeClient").val("")
                        $(".select2-selection__rendered").html("")
                    },
                    error: function(response, statut) {
                        completeHandler()
                        console.log(response)
                    }
                })
            })

            $("#tableclient tbody").on("click", ".btn-trash", function(evt) {
                var id = $(this)[0].id.split("-")[1]

                confirmMdp("{{ csrf_token() }}", () => $.ajax({
                    type: 'POST',
                    url: "{{ route('deleteClientGarde') }}",
                    dataType: 'json',
                    data: {
                        _token: "{{ csrf_token() }}",
                        mdp: document.getElementById('swal2-input').value,
                        idClientGarde: id
                    },
                    success: function(response) {
                        console.log(response)
                        if (response.error == false) {
                            if (response.ok == false) {
                                Swal.fire(
                                    'Vous n\'avez pas le droit de suppression !',
                                    '', 'warning')
                                return 0;
                            }

                            if (response.data == 0) {
                                notif("warning", "Attention !",
                                    "Suppression non éffectuée !!")
                                return 0;
                            }

                            listeGarde(dateConstruct($(
                                    'input[name="daterange"]')
                                .val()))
                            notif("success", "Success !",
                                "Suppression éffectuée avec success !!")
                            return 0;
                        }

                        notif("danger", "Attention !",
                            "Une erreur est survénue !!")
                    },
                    error: function(response) {
                        console.log(response)
                    }
                }))
            })

            $("#tableclient tbody").on("click", ".btn-edit", function(evt) {

                var id = $(this)[0].id.split("-")[1]

                var idclient = $(this).attr("data_id")
                idGarde = $(this).attr("data_id2")
                dateDebut = $("#debut-" + id).text()
                dateFin = $("#fin-" + id).text()

                // console.log(dateDebut, dateFin)
                document.querySelector('input[name="daterange"]').value = dateDebut + ' - ' + dateFin
                $('input[name="daterange"]').trigger("change")
                $(".js-example-basic-multiple").val(idclient).trigger('change');

                _('addGarde').style.display = 'none'
                _('updateGarde').style.display = ''
            })

            $("#updateGarde").click(function() {
                console.log($('input[name="daterange"]').val())
                $.ajax({
                    url: "{{ route('updateClientGarde') }}",
                    method: "post",
                    dataType: "json",
                    data: {
                        _token: '{{ csrf_token() }}',
                        dateInterval: dateConstruct($('input[name="daterange"]').val()),
                        clients: $("#listeClient").val(),
                        garde: idGarde
                    },
                    success: function(response, statut) {
                        // console.log(response)

                        if (response.error != false) {
                            notif("danger", "Attention", "Erreur lors de l'enregistrement")
                            return 0
                        }

                        if (response.edit == false) {
                            notif("danger", "Attention", "Modification non éffectuée !")
                            return 0
                        }

                        notif("success", "Success !!", "Ajout effectué avec success")
                        listeGarde(dateConstruct($('input[name="daterange"]').val()))
                        listeClient()
                        $("#listeClient").val("")
                        $(".select2-selection__rendered").html("")

                        _('addGarde').style.display = ''
                        _('updateGarde').style.display = 'none'
                    },
                    error: function(response, statut) {
                        console.log(response)
                    }
                })

            })

            // Annuler la modification
            $("#anulUpdate").click(function() {
                $("#listeClient").val("")
                $(".select2-selection__rendered").html("")

                _('addGarde').style.display = ''
                _('updateGarde').style.display = 'none'
            })

            $("#btnIntegreCsv").on("change", function() {

                if ($(this).val()) {
                    $("#btnsubmitCsv").trigger("click")
                    $(this).val("")
                }
            })

            $("#formCsvClientGarde").on("submit", function(evt) {
                evt.preventDefault()

                let formData = new FormData(_("formCsvClientGarde"))
                $("#btnIntegreCsv").val("")
                $.ajax({
                    url: "{{ route('integerCsvClientGarde') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)

                        if (response.error == false) {
                            completeHandler()
                            listeGarde(dateConstruct($(
                                    'input[name="daterange"]')
                                .val()))
                                notifSuccess(response.messages)
                            return 0
                        }
                        completeHandler()
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        console.log(response)
                        notifError(response.messages)
                    }
                })
            })
            // FONCTIONS
            function listeGarde(date) {
                $.ajax({
                    url: "{{ route('listeClientGarde') }}",
                    method: "get",
                    dataType: "json",
                    data: {
                        date: date
                    },
                    beforeSend() {

                    },
                    success: function(response, statut) {
                        // console.log(response)

                        table.clear().draw()
                        $.each(response.data, function(key, value) {
                            table.row.add([
                                `<button class=" btn btn-sm btn-outline-danger btn-icon btn-trash" id="trash-${value.IDGARDECLIENT}">
                                    <i class='bx bxs-trash' style='font-size:14px'></i>
                                </button> &nbsp; &nbsp;
                                <button class=" btn btn-sm btn-outline-warning btn-edit btn-icon" id="edit-${key}" data_id="${value.IDCLIENT}" data_id2="${value.IDGARDECLIENT}">
                                    <i class='bx bxs-edit' style='font-size:14px'></i>
                                </button>`,
                                `<span id="debut-${key}">${explodeDate(value.DateDebutGarde)}</span>`,
                                `<span id="fin-${key}">${explodeDate(value.DateFinGarde)}</span>`,
                                `${value.NomClient}`,
                                `${value.IntentionCommande}`
                            ])
                        })

                        table.draw();
                        $('#tableclient_length').addClass('d-flex')

                        if ($('#tableclient_length').children().length == 2) {

                            $('#tableclient_length').children().eq(1).remove()
                        }
                        $('#tableclient_length').children().eq(0).addClass('me-2')
                        $('#tableclient_length').append('<div class="dropdown">\
                                                                    <button class="btn btn-sm btn-icon btn-outline-dark" type="button" id="dropdownMenuButton1"\
                                                                        data-bs-toggle="dropdown" aria-expanded="false">\
                                                                        <i class="bx bx-dots-horizontal-rounded " style="font-size : 17px;cursor : pointer;" ></i>\
                                                                    </button>\
                                                                    <ul class="dropdown-menu overflow-auto" aria-labelledby="dropdownMenuButton1" id="dropChoixCol"  style="max-height: 300px;">\
                                                                        <li>\
                                                                            <a class="dropdown-item" href="javascript:void(0);">\
                                                                               Imprimer\
                                                                            </a>\
                                                                        </li>\
                                                                        <li>\
                                                                            <hr class="dropdown-divider">\
                                                                        </li>\
                                                                        <li>\
                                                                            <a class="dropdown-item" href="javascript:void(0);">\
                                                                                Exporter(XLS)\
                                                                            </a>\
                                                                        </li>\
                                                                    </ul>\
                                                                </div>')
                    },
                    error: function(response, statut) {
                        console.log(response)
                    }
                })
            }

            function listeClient() {

                $.ajax({
                    url: "{{ route('listeClient') }}",
                    method: "get",
                    dataType: "json",
                    success: function(response, statut) {
                        // console.log(response)

                        if (response.error != false) {
                            $("#listeClient").html("")
                            $("#listeClient").append(`<option value="">Selectionner le client</option>`)

                            $.each(response.data, function(key, value) {

                                var newOption = new Option(value.NomClient, value.IDCLIENT,
                                    true, true);
                                // Append it to the select
                                $('.js-example-basic-multiple').append(newOption).trigger(
                                    'change');
                            })
                            return 0
                        }
                    },
                    error: function(response, statut) {
                        console.log(response)
                    }
                })
            }

            function dateConstruct(date) {
                var dateDiv = date.split(' - ')
                var dateDebut = dateDiv[0].split("/").reverse().join("-")
                var dateFin = dateDiv[1].split("/").reverse().join("-")

                return {
                    dateDebut: dateDebut,
                    dateFin: dateFin
                }
            }

            function notif(type, title, message) {
                types = type

                _("notif-header").classList.add("bg-" + type)
                _("notification").classList.add("bg-" + type + "-transparent")
                $("#notif-title").text(title)
                $("#notif-body").text(message)
                const toast = new bootstrap.Toast(_("notification"))
                toast.show()
            }
        })
    </script> --}}
@endsection