{% extends 'plantilla_final.html' %}

<!-- Asegúrate de usar el nombre correcto de tu plantilla base -->

{% block title %}

{% endblock%}

{% block head %}

{% endblock %}

{% block content %}
<!-- Este bloque contendrá todo el contenido específico de la página de listado de teléfonos -->
<div class="row p-1">
    <span class="text-center"><b>Listado de Programaciones</b></span>
</div>

<div class="row d-flex justify-content-end">
    <div class="col-sm-2">
        <button class="btn btn-sm btn-secondary create__buttons w-100" data-bs-toggle="modal"
            data-bs-target="#modal_crear_programacion" id="btnCrearProgramacion" title="Nueva">Nueva
            Programacion</button>
    </div>
</div>

<br>
<hr>

<div class="unique-table-container">
    <table id="tabla_programaciones"
        class="table table-sm table-striped align-middle mb-0 bg-white table-basic custom-table" style="width:100%">
        <thead>
            <tr>
                <th>Fecha</th>
                <th>N. Orden</th>
                <th>Destinatario</th>
                <th>Origen</th>
                <th>Destino</th>
                <th>Placa Vehículo</th>
                <th>Conductor</th>
                <th>Estado</th>
                <th>Creada por</th>
                <th>Creada por</th>
            </tr>
        </thead>
        <tbody>
            <tr>

            </tr>
        </tbody>
    </table>
    </button>
</div>
<!-- Modal -->
<div class="modal fade" id="modalProgramacion" tabindex="-1" aria-labelledby="modalProgramacionLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalProgramacionLabel">PROCESO ENTREGA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Formulario -->
                <form>
                    <div class="col-lg-5">
                        <input type="text" hidden id="id_programacion" class="form-control">
                    </div>
                    <!-- Cargo -->
                    <div class="row mb-3">
                        <div class="col-lg-2">
                        </div>
                        <div class="col-lg-5">
                            <label for="fecha_inicio_cargo" class="col-form-label">Fecha Inicio</label>
                        </div>
                        <div class="col-lg-5">
                            <label for="fecha_final_cargo" class="col-form-label">Fecha Final</label>

                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-lg-2">
                            <label class="col-form-label" hidden>Cargo</label>
                            <label class="col-form-label">Cargo</label>
                        </div>
                        <div class="col-lg-5">
                            <input type="datetime-local" id="fecha_inicio_cargo" class="form-control">
                        </div>
                        <div class="col-lg-5">

                            <input type="datetime-local" id="fecha_final_cargo" class="form-control">
                        </div>
                    </div>
                    <!-- Entrega -->
                    <div class="row mb-3">
                        <div class="col-lg-2">
                            <label class="col-form-label">Entrega</label>
                        </div>
                        <div class="col-lg-5">
                            <input type="datetime-local" id="fecha_inicio_entrega" class="form-control">
                        </div>
                        <div class="col-lg-5">
                        </div>
                    </div>
                    <!-- Regreso Esperado -->
                    <div class="row mb-3">
                        <div class="col-lg-2">
                            <label class="col-form-label">Regreso Esperado</label>
                        </div>
                        <div class="col-lg-5">
                            <input type="datetime-local" id="fecha_inicio_regreso_esperado" class="form-control">
                        </div>
                        <div class="col-lg-5">
                        </div>
                    </div>
                    <!-- Regresó -->
                    <div class="row mb-3">
                        <div class="col-lg-2">
                            <label class="col-form-label">Regresó</label>
                        </div>
                        <div class="col-lg-5">
                            <input type="datetime-local" id="fecha_inicio_regreso" class="form-control">
                        </div>
                        <div class="col-lg-5">

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="guardarCambios">Guardar Cambios</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_crear_programacion" tabindex="-1" aria-labelledby="modalDjangoContentLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalDjangoContentLabel">CREAR PROGRAMACIÓN</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="padding: 0;"> <!-- Remover el padding del cuerpo del modal -->
                {% include 'myapp/modal_crear_programacion.html' %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary">Guardar Cambios</button>
            </div>
        </div>
    </div>
</div>


<!-- jQuery (necesario para Bootstrap y DataTables) -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- Popper.js (necesario para Bootstrap) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" crossorigin="anonymous"></script>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>

<!-- Font Awesome para iconos -->
<script src="https://kit.fontawesome.com/e716b78aa6.js" crossorigin="anonymous"></script>

<!-- SweetAlert para alertas bonitas -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<!-- DataTables y sus plugins -->
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/2.0.2/js/dataTables.searchPanes.min.js"></script>
<script src="https://cdn.datatables.net/select/1.4.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/2.0.2/js/searchPanes.bootstrap5.min.js"></script>
<script src="https://nightly.datatables.net/fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<script src="https://nightly.datatables.net/fixedheader/js/dataTables.fixedHeader.min.js"></script>


<!-- Otros plugins y scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/5.2.0/js/tableexport.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.6/jquery.inputmask.min.js"></script>

<script>
    function cargarDatosProgramacion(idProgramacion) {
        $.ajax({
            url: "/ruta/a/django/view/" + idProgramacion, // La URL de tu endpoint
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                // Suponiendo que data es un objeto con las propiedades que coinciden con los names de los inputs
                $('#id_programacion').val(data.id_programacion);
                $('#hora_carga_inicio').val(data.hora_carga_inicio ? data.hora_carga_inicio.split(' ').join('T') : '');
                $('#hora_carga_fin').val(data.hora_carga_fin ? data.hora_carga_fin.split(' ').join('T') : '');
                $('#hora_carga_fin').val(data.hora_carga_fin ? data.hora_carga_fin.split(' ').join('T') : '');
                $('#hora_carga_fin').val(data.hora_carga_fin ? data.hora_carga_fin.split(' ').join('T') : '');
                $('#hora_carga_fin').val(data.hora_carga_fin ? data.hora_carga_fin.split(' ').join('T') : '');


                if (data.hora_carga_inicio) {
                    $('#hora_carga_inicio').prop('disabled', true);
                }

            },
            error: function (xhr, status, error) {
                console.error("Error al cargar los datos de la programación: ", status, error);
            }
        });
    }
    $(document).ready(function () {
        $(document).on('click', '.btnEdit', function () {
            var programacionId = $(this).data('id'); // Obtiene el ID de la programación
            $('#id_programacion').val(programacionId); // Asigna el ID al campo de entrada
        });

        $('#guardarCambios').click(function () {
            var programacionId = $('#id_programacion').val();
            var fechaInicioCargo = $('#fecha_inicio_cargo').val();
            var fechaFinalCargo = $('#fecha_final_cargo').val();
            var fechaInicioEntrega = $('#fecha_inicio_entrega').val();
            var fechaInicioRegresoEsperado = $('#fecha_inicio_regreso_esperado').val();
            var fechaInicioRegreso = $('#fecha_inicio_regreso').val();


            $.ajax({
                url: '/DAC/logistica/programaciones_procesos_insertar/' + programacionId + "/",
                type: 'POST',
                data: {
                    'id_programacion': programacionId,
                    'hora_inicio_carga': fechaInicioCargo,
                    'hora_final_carga': fechaFinalCargo,
                    'hora_entrega': fechaInicioEntrega,
                    'hora_regreso_esperado': fechaInicioRegresoEsperado,
                    'hora_regreso': fechaInicioRegreso,

                },
                success: function (response) {
                    console.log(response.message);
                    $('#modalProgramacion').modal('hide'); // Cierra el modal
                },
                error: function (error) {
                    // Manejo de errores
                    console.log(error);
                }
            });
        });

        if ($.fn.DataTable.isDataTable('#tabla_programaciones')) {
            $('#tabla_programaciones').DataTable().destroy();
        }

        var windowSize = $(window).width();
      
        if (windowSize <= 960) {
            fixedColumnsIzq = 0;
            fixedColumnsDer = 1;
        } else if (windowSize > 960) {
            fixedColumnsIzq = 4;
            fixedColumnsDer = 1;
        }

        var table = $('#tabla_programaciones').DataTable({
            pageLength: 10,
            scrollX: true,  
            fixedColumns: {
                left: fixedColumnsIzq,
                right: fixedColumnsDer
            },
            initComplete: function () {
                //
            },
            ajax: {
                beforeSend: function (xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader(
                            'X-CSRF-Token',
                            $(
                                'meta[name="csrf-token"]'
                            ).attr('content'));
                    }
                },
                url: '/DAC/logistica/programaciones_data',
                dataSrc: 'programaciones'
            },
            dom: "prtliB",
            buttons: [{
                extend: 'excel',
                text: '<i class="fas fa-file-excel"></i>',
                titleAttr: 'Excel',
                className: 'btn btn-success',
            },
            {
                extend: 'pdf',
                text: '<i class="fas fa-file-pdf"></i>',
                titleAttr: 'PDF',
                className: 'btn btn-danger',
            },
            {
                extend: 'print',
                text: '<i class="fas fa-print"></i>',
                titleAttr: 'Imprimir',
                className: 'btn btn-null',
            }
            ],
            language: {
                url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json",
            },
            columns: [
                {
                    data: 'fecha',

                },
                {
                    data: 'id_programacion',
                },
                {
                    data: 'destinatario',
                    defaultContent: "CLIENTES VARIOS/RUTAS"
                },
                {
                    data: 'destinatario',
                    defaultContent: "CHOLUTECA"
                },
                {
                    data: 'nombre_destino',
                },
                {
                    data: 'placa',
                },
                {
                    data: 'nombre_tripulante',
                },

                {
                    data: 'estado',
                },
                {
                    data: 'creado_por',
                },

                {
                    data: 'id_programacion', // Asegúrate de que 'id' sea el nombre del campo que contiene el ID del teléfono
                    render: function (data, type, row) {
                        return `
              <div class="d-flex">
                <a class="btn btn-sm btn-info btnEdit mx-1" data-bs-toggle="modal" 
                   data-bs-target="#modalProgramacion" data-id="${data}">
                    <i class="material-icons">edit</i>
                </a>
                <button class="btn btn-info btn-sm btnOjo " data-toggle="modal" data-target="#miModalAncho" data-telefono-id="${data}">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                
              `;
                    },
                    orderable: false
                }
            ],
        });
    });
</script>
{% endblock %}