@extends('../partials.model')

@section('content')

<div class="container-fluid">

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center my-4 justify-content-between page-header-breadcrumb">
        <div>
            <h1 class="text-3xl font-bold text-slate-900">
                Gestion des Rendez-vous
            </h1>
            <p class="text-slate-600 mtw-1">
                Gérer toutes vos Rendez-vous en toute simplicité
            </p>
        </div>
        <div class="ms-md-1 ms-0">
            <nav>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reservationModal">
                    <i class="bi bi-plus-circle btn-icon-size"></i>
                    <!-- Nouvelle réservation -->
                     Nouveau Rendez-vous
                </button>
            </nav>

        </div>
    </div>
    <!-- Page Header Close -->


    <!-- Start::row-1 -->
    <div class="card card-border">
        <div class="card-body">

            <div class="table-responsive">
                <table class="table table-striped" id="reservationTable">
                    <thead>
                        <th>#</th>
                        <th class="text-center">Date</th>
                        <th class="text-center">Numéro reservation</th>
                        <th class="text-center">Client</th>
                        <th class="text-center">Statut</th>
                        <th class="text-center">Numéro lot</th>
                        <th class="text-center">Date RDV</th>
                        <th class="text-center">Heure RDV</th>
                        <th class="text-center">Email</th>
                        <th class="text-center">Téléphone client</th>
                        <th class="text-center">Description</th>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!--End::row-1 -->

    <!-- Modal -->
    <div class="modal fade" id="reservationModal" tabindex="-1" aria-labelledby="reservationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="reservationModalLabel">Nouveau Rendez-vous</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="reservation_form">
                        @csrf

                        <div class="row">

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Lot* :</div>
                                <input type="text" class="form-control" value="5" name="id_lot" id="id_lot" placeholder="Lot" />
                            </div>

                            <div class="col-xl-12  mb-1">
                                <div class="lib">Nom* :</div>
                                <input type="text" class="form-control" name="nom_client" id="nom_client" placeholder="Nom du client" />
                            </div>

                            <div class="col-xl-12  mb-1">
                                <div class="lib">Prénoms* :</div>
                                <input type="text" class="form-control" name="prenom_client" id="prenom_client" placeholder="Prénom du client" />
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Email* :</div>
                                <input type="email" class="form-control" name="email_client" id="email_client" placeholder="Email du client" />
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Téléphone* :</div>
                                <input type="number" class="form-control" name="telephone_client" id="telephone_client" placeholder="Téléphone du client" />
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Description :</div>
                                <textarea class="form-control" name="description_reservation" id="description_reservation" placeholder="Description reservation"></textarea>
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="card">
                                    <div class="card-body">
                                        <h6>📅 Sélectionner une date et une heure de rendez-vous</h6>
                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#appointmentCalendarModal">
                                            Ouvrir le calendrier des rendez-vous
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                    <!-- <button type="button" class="btn btn-primary" id="save_reservation">Enregistrer</button> -->
                </div>
            </div>
        </div>
    </div>


    <!-- COMPOSANT MODAL CALENDRIER -->
    <x-calendrier-rdv-modal />
</div>



@endsection

@section('script')

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

        recuperation_reservation()


        $('#save_reservation').on('click', function() {
            $('#reservation_form').submit();
        })

        $(document).on('click', '#suppression_ligne', function() {
            var id = $(this).data('id')

            sweet_alert(callback = function() {
                useAjaxPromise('DELETE', "{{ route('reservation.delete') }}", {
                        id_reservation: id,
                        _token: '{{ csrf_token() }}'
                    })
                    .then(resp => {
                        notif('success', 'Succès', resp.msg);
                        recuperation_reservation()
                    })
                    .catch(xhr => {
                        handleAjaxError(xhr);
                    });
            })
        })

        $('#reservation_form').on('submit', function(e) {
            e.preventDefault();

            $.ajax({
                type: "POST",
                url: "{{ route('reservation.store') }}",
                data: new FormData(this),
                dataType: "JSON",
                contentType: false,
                processData: false,
                beforeSend: function() {

                    if ($('#nom_client').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#nom_client').focus()
                        return false
                    }

                    if ($('#prenom_client').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#prenom_client').focus()
                        return false
                    }

                    if ($('#email_client').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#email_client').focus()
                        return false
                    }

                    if ($('#telephone_client').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#telephone_client').focus()
                        return false
                    }
                },
                success: function(resp) {

                    if (resp.error) {
                        notif('danger', 'Erreur', resp.msg)
                        return false;
                    }
                    $("#reservationModal").modal('hide')
                    notif('success', 'Succès', resp.msg)
                    recuperation_reservation()
                },
                error: handleAjaxError
            });
        })

        $(document).on('change', '#statut-reservation', function() {
            var id = $(this).data('id')
            var statut_val = $(this).val()
            useAjaxPromise('PUT', "{{ route('reservation_statut.update') }}", {
                    id_reservation: id,
                    statut: statut_val,
                    _token: '{{ csrf_token() }}'
                })
                .then(resp => {
                    notif('success', 'Succès', resp.msg);
                    recuperation_reservation()
                })
                .catch(xhr => {
                    handleAjaxError(xhr);
                });
        })

        $(document).on('click', '#convertir_reservation', function() {
            var id_reservation = $(this).data('id')

            useAjaxPromise('GET', "{{ route('convertir_reservation.get') }}", {
                    id_reservation: id_reservation
                })
                .then(resp => {

                    if (resp.error) {
                        notify_error(resp.msg)
                        return false
                    }

                    notif('success', 'Succès', resp.msg)
                    recuperation_reservation()
                })
                .catch(xhr => {
                    handleAjaxError(xhr);
                });
        })

        $(document).on('click','.save_rdv', function() {
            // $('#rdv_form').submit();

            var id_lot = $('#id_lot').val();
            var nom_client = $('#nom_client').val();
            var prenom_client = $('#prenom_client').val();
            var email_client = $('#email_client').val();
            var telephone_client = $('#telephone_client').val();
            var description_reservation = $('#description_reservation').val();
            confirmAppointment(id_lot, nom_client, prenom_client, email_client, telephone_client, description_reservation,'reservation_form');
        })


        $(document).on('click', '#calendarCloseBtn', function() {
            // Réinitialiser le calendrier lorsque le modal est fermé
           $('#reservationModal').modal('show');
           //resetCalendar();
        });
    })

    function recuperation_reservation($id) {

        useAjaxPromise('GET', "{{ route('reservation.get') }}", {
                id_reservation: $id
            })
            .then(resp => {

                var table = $('#reservationTable').DataTable();
                table.clear()
                $.each(resp.data, function(key, value) {

                    if (value.statut_reservation == 1) {
                        statut = '<span class="badge bg-success">En cours</span>';
                    } else if (value.statut_reservation == 2) {
                        statut = '<span class="badge bg-warning">Approuvé</span>';
                    } else {
                        statut = '<span class="badge bg-danger">Rejetté</span>';
                    }
                    table.row.add([
                        renderActions(value.id_reservation, null, null, 'suppression_ligne', 'convertir_reservation'),
                        formatDate(value.date_reservation),
                        value.numero_reservation,
                        value.nom_client + ' ' + value.prenom_client,
                        select(value.statut_reservation, value.id_reservation),
                        value.numero_lot,
                        formatDate(value.date_rdv),
                        value.heure_rdv,
                        value.email_client,
                        value.telephone_client,
                        value.description_reservation,
                    ])
                })
                table.draw();
            })
            .catch(xhr => {
                handleAjaxError(xhr);
            });
    }

    function select($val, $id) {
        const options = [{
                val: 1,
                libelle: 'ATTENTE'
            },
            {
                val: 2,
                libelle: 'CONFIRME'
            },
            {
                val: 3,
                libelle: 'ANNULE'
            },
            {
                val: 4,
                libelle: 'CONCLU'
            }
        ];

        let output = '';

        $.each(options, function(key, value) {
            // Si le statut actuel est CONCLU, on n’affiche que CONCLU
            if ($val == 4) {
                if (value.val == 4) {
                    output += `<option value="${value.val}" selected>${value.libelle}</option>`;
                }
            } else {
                // Sinon, on affiche toutes sauf CONCLU
                if (value.val != 4) {
                    output += `<option value="${value.val}" ${$val == value.val ? 'selected' : ''}>${value.libelle}</option>`;
                }
            }
        });

        // Désactiver le select si CONCLU
        const disabledAttr = ($val == 4) ? 'disabled' : '';

        return `<select data-id="${$id}" class="form-select" id="statut-reservation" ${disabledAttr}>${output}</select>`;
    }

    function activerOptions() {
        const select = document.getElementById('statut_reservation');
        for (let i = 1; i < select.options.length; i++) {
            select.options[i].disabled = false;
        }
    }
</script>
@endsection