{% extends 'menu/menu.html' %}
{% load static %}


{% block title %} Horarios de Atencion {% endblock %}

{% block body %}

<h4 class=" mb-4 fw-bold text-center">Horarios de Atencion</h4>


<div class="container mt-4">

    <div class="alert alert-info mt-3 d-none" role="alert">
        <h5>Horario Actual</h5>
        <div id="horarioVerbose"></div>
    </div>

    <div class="row">
        <div class="col-6 col-md-3">
            <label>Abre</label>
            <input type="time" name="hora_abre_todos" class="form-control horario-input" value="08:00">
        </div>
        <div class="col-6 col-md-3">
            <label>Cierra</label>
            <input type="time" name="hora_cierra_todos" class="form-control horario-input" value="17:00">
        </div>
        <div class="col-12 col-md-3 d-grid mt-2 mt-md-0">
            <button type="button" id="setSameTime" class="btn btn-warning w-100">Establecer Horario En Todos</button>
        </div>
        <div class="col-12 col-md-3 d-grid mt-2 mt-md-0">
            <button type="button" id="setTodosAbierto" class="btn btn-danger w-100">Establecer Abierto En Todos</button>
        </div>
    </div>

    <br>

    <form id="horarioForm">
        <table class="table">
            <thead>
                <tr>
                    <th>Día</th>
                    <th>Abre</th>
                    <th>Cierra</th>
                    <th>Día Libre</th>
                </tr>
            </thead>
            <tbody>
                <tr data-dia="7">
                    <td>Domingo</td>
                    <td><input type="time" name="hora_abre_7" class="form-control horario-input"></td>
                    <td><input type="time" name="hora_cierra_7" class="form-control horario-input"></td>
                    <td><input type="checkbox" class="dia-libre" data-dia="7"></td>
                </tr>
                <tr data-dia="1">
                    <td>Lunes</td>
                    <td><input type="time" name="hora_abre_1" class="form-control horario-input"></td>
                    <td><input type="time" name="hora_cierra_1" class="form-control horario-input"></td>
                    <td><input type="checkbox" class="dia-libre" data-dia="1"></td>
                </tr>
                <tr data-dia="2">
                    <td>Martes</td>
                    <td><input type="time" name="hora_abre_2" class="form-control horario-input"></td>
                    <td><input type="time" name="hora_cierra_2" class="form-control horario-input"></td>
                    <td><input type="checkbox" class="dia-libre" data-dia="2"></td>
                </tr>
                <tr data-dia="3">
                    <td>Miércoles</td>
                    <td><input type="time" name="hora_abre_3" class="form-control horario-input"></td>
                    <td><input type="time" name="hora_cierra_3" class="form-control horario-input"></td>
                    <td><input type="checkbox" class="dia-libre" data-dia="3"></td>
                </tr>
                <tr data-dia="4">
                    <td>Jueves</td>
                    <td><input type="time" name="hora_abre_4" class="form-control horario-input"></td>
                    <td><input type="time" name="hora_cierra_4" class="form-control horario-input"></td>
                    <td><input type="checkbox" class="dia-libre" data-dia="4"></td>
                </tr>
                <tr data-dia="5">
                    <td>Viernes</td>
                    <td><input type="time" name="hora_abre_5" class="form-control horario-input"></td>
                    <td><input type="time" name="hora_cierra_5" class="form-control horario-input"></td>
                    <td><input type="checkbox" class="dia-libre" data-dia="5"></td>
                </tr>
                <tr data-dia="6">
                    <td>Sábado</td>
                    <td><input type="time" name="hora_abre_6" class="form-control horario-input"></td>
                    <td><input type="time" name="hora_cierra_6" class="form-control horario-input"></td>
                    <td><input type="checkbox" class="dia-libre" data-dia="6"></td>
                </tr>
            </tbody>
        </table>
        <button type="button" id="guardarHorario" class="btn btn-primary w-100">Guardar Horario</button>
    </form>

</div>


{% endblock %}



{% block scripts %}


<script>
    $(document).ready(function () {
        var buttons = "Bfrtlip";

        var csrfToken = "{{ csrf_token }}";
        var user_id = "{{ user_id }}";
        var tipo_usuario = "{{ tipo_usuario }}";
        var userName = "{{ userName }}";

        var toastMixin = Swal.mixin({
            toast: true,
            icon: 'success',
            title: 'General Title',
            animation: false,
            position: 'top-right',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        let dollarUSLocale = Intl.NumberFormat("en-US", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });

        let intergerLocale = Intl.NumberFormat("en-US", {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });


        function saveHorarios() {
            let horarioData = [];

            $(".dia-libre").each(function () {
                let diaId = $(this).data("dia");
                let esLibre = $(this).is(":checked");
                let horaAbre = $(`input[name="hora_abre_${diaId}"]`).val();
                let horaCierra = $(`input[name="hora_cierra_${diaId}"]`).val();

                horarioData.push({
                    dia_id: diaId,
                    libre: esLibre,
                    abre: esLibre ? "00:00" : horaAbre,
                    cierra: esLibre ? "00:00" : horaCierra
                });
            });

            $.ajax({
                url: "{% url 'save_horario_atencion' %}",
                type: "POST",
                data: {
                    horario: JSON.stringify(horarioData),
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                },
                beforeSend: function () {
                    // loading layer
                    showLoadingLayer();
                },
                complete: function (data) {
                    // loading layer
                    hideLoadingLayer();
                },
                success: function (data) {
                    if (data.save == 1) {
                        Swal.fire("Éxito", "Horario guardado correctamente.", "success");
                    } else {
                        Swal.fire("Error A1", "Hubo un problema: " + data.error, "error");
                    }
                },
                error: function (error) {
                    Swal.fire("Error A2", "No se pudo guardar el horario.", "error");
                }
            });
        }

        $(document).on("click", "#guardarHorario", function () {
            saveHorarios();
        });

        $(document).on("change", ".dia-libre", function () {
            var diaId = $(this).data("dia");
            if ($(this).is(":checked")) {
                $(`input[name="hora_abre_${diaId}"]`).val("00:00");
                $(`input[name="hora_cierra_${diaId}"]`).val("00:00");
            } else {
                $(`input[name="hora_abre_${diaId}"]`).val("08:00");
                $(`input[name="hora_cierra_${diaId}"]`).val("17:00");
            }
        });

        setValues();

        function setValues() {
            try {
                $.ajax({
                    url: `{% url 'control_get_horario_atencion' %}`,
                    method: 'POST',
                    data: {
                        user_negocio_id: "{{user_id}}",
                        csrfmiddlewaretoken: "{{ csrf_token }}"
                    },
                    beforeSend: function () {
                        showLoadingLayer();
                    },
                    success: function (data) {
                        if (data.save == 1) {
                            let horarioVerbose = "";
                            data.data?.forEach(function (horario) {
                                var dia = horario.numero_dia;
                                var horaAbre = horario.hora_abre?.substring(0, 5);
                                var horaCierra = horario.hora_cierra?.substring(0, 5);
                                var libre = horario.libre === 1;
                                $("input[name='hora_abre_" + dia + "']").val(horaAbre);
                                $("input[name='hora_cierra_" + dia + "']").val(horaCierra);
                                $("input[data-dia='" + dia + "']").prop("checked", libre);
                                let libre_ = libre ? "Cerrado" : "Abierto";
                                horarioVerbose += "<span><strong>" + horario.descripcion_dia + "</strong> (" + libre_ + ") De " + horaAbre + " a " + horaCierra + "</span><br>";
                            });
                            $("#horarioVerbose").html(horarioVerbose);
                        } else {
                            Swal.fire("", "Error D5: " + data.error, "error");
                        }
                    },
                    error: function (error) {
                        Swal.fire("", "Error E: " + error, "error");
                    },
                    complete: function () {
                        hideLoadingLayer();
                    }
                });
            } catch (error) {
                Swal.fire("", "Error A: " + error, "error");
            }
        }

        $('#setSameTime').click(function () {
            var horaAbre = $('input[name="hora_abre_todos"]').val();
            var horaCierra = $('input[name="hora_cierra_todos"]').val();
            if (horaAbre && horaCierra) {
                $(".dia-libre").each(function () {
                    var diaId = $(this).data("dia");
                    if (!$(this).is(":checked")) {
                        $(`input[name="hora_abre_${diaId}"]`).val(horaAbre);
                        $(`input[name="hora_cierra_${diaId}"]`).val(horaCierra);
                    }
                });
                saveHorarios();
            } else {
                Swal.fire("", "Por favor, ingrese ambos horarios (abre y cierra).", "error");
            }
        });

        $('#setTodosAbierto').click(function () {
            $('.dia-libre').prop('checked', false);
            saveHorarios();
        });

    });
</script>



{% endblock %}