@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">Auto Descarga SAT</h4>
            <p class="text-muted mb-0">Configuración global de descargas automáticas programadas</p>
        </div>
        <button class="btn btn-primary" onclick="mostrarModalNuevo()">
            <i class="ri-add-line me-1"></i> Nueva Configuración
        </button>
    </div>

    <div class="card">
        <div class="card-body">
            <table id="tabla-autodescargas" class="table table-striped table-hover" style="width:100%">
                <thead>
                    <tr>
                        <th>Comprobante</th>
                        <th>Tipo Descarga</th>
                        <th>Rango</th>
                        <th>Días Programados</th>
                        <th>Estado</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- Modal para crear/editar configuración -->
<div class="modal fade" id="modalConfig" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalConfigTitle">Nueva Configuración</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formConfig">
                <div class="modal-body">
                    <input type="hidden" id="config_id" name="config_id">

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="tipo_comprobante" class="form-label">Tipo de Comprobante <span class="text-danger">*</span></label>
                            <select class="form-select" id="tipo_comprobante" name="tipo_comprobante" required>
                                <option value="">Seleccione...</option>
                                <option value="gastos">Gastos</option>
                                <option value="ingresos">Ingresos</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="tipo_descarga" class="form-label">Tipo de Descarga <span class="text-danger">*</span></label>
                            <select class="form-select" id="tipo_descarga" name="tipo_descarga" required>
                                <option value="">Seleccione...</option>
                                <option value="scrap">Scrap Normal</option>
                                <option value="scrapconcerykey">Scrap con CER y KEY</option>
                            </select>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label for="rango_descarga" class="form-label">Rango de Descarga <span class="text-danger">*</span></label>
                            <select class="form-select" id="rango_descarga" name="rango_descarga" required>
                                <option value="">Seleccione...</option>
                                <option value="mes_anterior">Mes Anterior Completo</option>
                                <option value="mes_anterior_hasta_hoy">Mes Anterior hasta Fecha Actual</option>
                            </select>
                            <small class="text-muted">
                                <strong>Mes Anterior Completo:</strong> Descarga del día 1 al último día del mes anterior<br>
                                <strong>Mes Anterior hasta Hoy:</strong> Descarga del día 1 del mes anterior hasta el día actual
                            </small>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label class="form-label">Días del Mes para Ejecutar <span class="text-danger">*</span></label>
                            <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
                                <div class="row g-2">
                                    @for($dia = 1; $dia <= 31; $dia++)
                                        <div class="col-md-2 col-sm-3 col-4">
                                        <div class="form-check">
                                            <input class="form-check-input dia-checkbox" type="checkbox"
                                                name="dias_mes[]" value="{{ $dia }}" id="dia_{{ $dia }}">
                                            <label class="form-check-label" for="dia_{{ $dia }}">
                                                Día {{ $dia }}
                                            </label>
                                        </div>
                                </div>
                                @endfor
                            </div>
                        </div>
                        <small class="text-muted">
                            Selecciona uno o varios días del mes en que se ejecutará la descarga automática
                        </small>
                        <div class="mt-2">
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="seleccionarTodos()">
                                Seleccionar Todos
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="limpiarSeleccion()">
                                Limpiar Selección
                            </button>
                        </div>
                    </div>

                    <div class="col-md-6 mb-3 d-none">
                        <label for="hora_ejecucion" class="form-label">Hora de Ejecución <span class="text-danger">*</span></label>
                        <input type="time" class="form-control" id="hora_ejecucion" name="hora_ejecucion" value="06:00"  required>
                        <small class="text-muted">Hora en que se ejecutará la descarga</small>
                    </div>
                </div>

                <div class="alert alert-info">
                    <i class="ri-information-line me-2"></i>
                    <strong>Nota:</strong> La configuración se ejecutará automáticamente en los días seleccionados a la hora indicada.
                    Asegúrate de que los clientes tengan sus credenciales configuradas correctamente.
                </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
            <button type="submit" class="btn btn-primary">Guardar Configuración</button>
        </div>
        </form>
    </div>
</div>
</div>

<script>
    let tabla;
    let modalConfig;

    // Funciones globales
    function mostrarModalNuevo() {
        $('#modalConfigTitle').text('Nueva Configuración de Auto Descarga');
        $('#formConfig')[0].reset();
        $('#config_id').val('');
        $('.dia-checkbox').prop('checked', false);
        modalConfig.show();
    }

    function editarConfig(id) {
        $.get(`/configuracion/auto-descarga/${id}`, function(data) {
            $('#modalConfigTitle').text('Editar Configuración de Auto Descarga');
            $('#config_id').val(data.id);
            $('#tipo_comprobante').val(data.tipo_comprobante);
            $('#tipo_descarga').val(data.tipo_descarga);
            $('#rango_descarga').val(data.rango_descarga);
            $('#hora_ejecucion').val(data.hora_ejecucion);

            // Marcar los días seleccionados
            $('.dia-checkbox').prop('checked', false);
            if (data.dias_mes_array) {
                data.dias_mes_array.forEach(function(dia) {
                    $(`#dia_${dia}`).prop('checked', true);
                });
            }

            modalConfig.show();
        });
    }

    function toggleActivo(id) {
        $.ajax({
            url: `/configuracion/auto-descarga/${id}/toggle`,
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    text: response.message,
                    timer: 1500
                });
                tabla.ajax.reload();
            }
        });
    }

    function eliminarConfig(id) {
        Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta configuración será eliminada permanentemente",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/configuracion/auto-descarga/${id}`,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Eliminado',
                            text: response.message,
                            timer: 2000
                        });
                        tabla.ajax.reload();
                    }
                });
            }
        });
    }

    function seleccionarTodos() {
        $('.dia-checkbox').prop('checked', true);
    }

    function limpiarSeleccion() {
        $('.dia-checkbox').prop('checked', false);
    }

    function guardarConfig() {
        const configId = $('#config_id').val();
        const url = configId ?
            `/configuracion/auto-descarga/${configId}` :
            '{{ route("configuracion.auto-descarga.store") }}';
        const method = configId ? 'PUT' : 'POST';

        const diasSeleccionados = [];
        $('.dia-checkbox:checked').each(function() {
            diasSeleccionados.push($(this).val());
        });

        const formData = {
            tipo_comprobante: $('#tipo_comprobante').val(),
            tipo_descarga: $('#tipo_descarga').val(),
            rango_descarga: $('#rango_descarga').val(),
            dias_mes: diasSeleccionados,
            hora_ejecucion: $('#hora_ejecucion').val()
        };

        $.ajax({
            url: url,
            type: method,
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Éxito',
                        text: response.message,
                        timer: 2000
                    });
                    modalConfig.hide();
                    tabla.ajax.reload();
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message
                    });
                }
            },
            error: function(xhr) {
                let message = 'Ocurrió un error al guardar la configuración';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: message
                });
            }
        });
    }

    $(document).ready(function() {
        modalConfig = new bootstrap.Modal(document.getElementById('modalConfig'));

        tabla = $('#tabla-autodescargas').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ route("configuracion.auto-descarga.datatable") }}',
            columns: [{
                    data: 'tipo_comprobante_label',
                    name: 'tipo_comprobante'
                },
                {
                    data: 'tipo_descarga_label',
                    name: 'tipo_descarga'
                },
                {
                    data: 'rango_descarga_label',
                    name: 'rango_descarga'
                },
                {
                    data: 'dias_mes_formatted',
                    name: 'dias_mes',
                    orderable: false
                },
                {
                    data: 'estado',
                    name: 'activo'
                },
                {
                    data: 'acciones',
                    name: 'acciones',
                    orderable: false,
                    searchable: false
                }
            ],
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-MX.json'
            },
            order: [
                [0, 'asc']
            ]
        });

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

            // Validar que al menos un día esté seleccionado
            const diasSeleccionados = $('.dia-checkbox:checked').length;
            if (diasSeleccionados === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Atención',
                    text: 'Debes seleccionar al menos un día del mes'
                });
                return;
            }

            guardarConfig();
        });
    });
</script>
@endsection