@extends('layouts.app', ['activePage' => 'contabilidad', 'menuParent' => 'reportes', 'titlePage' => __('')])
@section('content')
@include('includes.tailwind')
<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">Auxiliar de cuentas</h6>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6">
                        <div class="grid grid-cols-12 gap-4 mb-4">
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Periodo: <span class="text-red-500">*</span></label>
                                <select id="periodoAuxiliar" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="" disabled selected>-Todas-</option>
                                    @foreach($periodos as $p)
                                    <option value="{{$p->id}}">{{$p->descripcion}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Cuentas contables: <span class="text-red-500">*</span></label>
                                <select class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" name="cuentasAuxiliar[]" multiple="multiple" id="cuentasAuxiliar">
                                    @foreach($cuentasUltimaExpresion as $cuenta)
                                    <option value="{{ $cuenta->id }}">{{ $cuenta->cuenta }} - {{ $cuenta->numero_cuenta }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-2 mt-4">
                                <button class="px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-[#0A415F] hover:bg-[#083549] text-white transition-colors duration-200" onclick="generarReporte()">
                                    <i class="material-icons align-middle text-sm">search</i> Generar reporte
                                </button>
                            </div>
                        </div>

                        <div class="overflow-x-auto">

                            <div class="flex gap-2 mb-4 justify-end m-2" style="display: none;" id="acordeon-auxiliar-cuentas-acciones">
                                <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-1.5 text-sm rounded-md transition-colors font-medium duration-200" onclick="exportarAuxiliarCuentas('excel')">
                                    <i class="material-icons align-middle text-sm">file_present</i>Exportar EXCEL
                                </button>
                                <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-1.5 text-sm rounded-md transition-colors font-medium duration-200" onclick="exportarAuxiliarCuentas('pdf')">
                                    <i class="material-icons align-middle text-sm">picture_as_pdf</i>Exportar PDF
                                </button>
                            </div>
                            <div id="loading-auxiliar-cuentas" style="display:none; min-height: 200px;" class="flex flex-col justify-center items-center w-full h-full">
                                <svg class="animate-spin h-10 w-10 text-blue-700 mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                                </svg>
                                <span class="text-lg font-semibold text-blue-700">Cargando reporte...</span>
                            </div>
                            <table class="min-w-full divide-y divide-gray-200" id="tabla-auxiliar-cuentas" style="display:none;">
                                <thead class="bg-gray-100">
                                    <tr>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-700 uppercase tracking-wider" style="width: 40px;"></th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Cuenta</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Número de cuenta</th>
                                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-700 uppercase tracking-wider">Saldo inicial</th>
                                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-700 uppercase tracking-wider">Cargos</th>
                                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-700 uppercase tracking-wider">Abonos</th>
                                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-700 uppercase tracking-wider">Saldo final</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-auxiliar-cuentas" class="bg-white divide-y divide-gray-200">
                                    <!-- Las filas se generan dinámicamente -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }

    /* Estilos para el acordeón */
    .acordeon-item {
        border: 1px solid #d1d5db;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin: 0.5rem;
    }

    .acordeon-header {
        background-color: #ffffff;
        padding: 1rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.2s ease;
        border-bottom: 1px solid #f3f4f6;
    }

    .acordeon-header:hover {
        background-color: #f8fafc;
        border-left: 4px solid #3b82f6;
    }

    .acordeon-header.active {
        background-color: rgb(229, 229, 229);
        border-left: 4px solid #fbbf24;
    }

    .acordeon-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background-color: #fafafa;
    }

    .acordeon-content.active {
        max-height: 10000px;
    }

    .acordeon-icon {
        transition: transform 0.3s ease;
        color: #6b7280;
    }

    .acordeon-header.active .acordeon-icon {
        transform: rotate(180deg);
        color: #6b7280;
    }

    .cuenta-item {
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ffffff;
        transition: background-color 0.2s ease;
    }

    .cuenta-item:hover {
        background-color: #f9fafb;
    }

    .cuenta-item:last-child {
        border-bottom: none;
    }

    .cuenta-info {
        flex: 1;
    }

    .cuenta-acciones {
        display: flex;
        gap: 0.5rem;
    }


    .grupo-indicator {
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        font-weight: 600;

    }

    .cuenta-codigo {
        font-weight: 700;
        color: #1f2937;
        font-size: 0.85rem;
    }

    .cuenta-descripcion {
        color: #4b5563;
        font-size: 0.875rem;
        font-weight: 700;
    }

    .estatus-grupo {
        background-color: #dbeafe;
        color: #1e40af;
        border: 1px solid #93c5fd;
    }
</style>

@endsection

@push('js')
<script>
    $(document).ready(function() {

        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });
    });



    const ajaxResponseErrors = {
        icon: 'error',
        title: 'Error',
        html: '',
        confirmButtonText: 'Aceptar'
    };



    function generarReporte() {
        var periodo = $('#periodoAuxiliar').val();
        if (!periodo) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: 'Por favor selecciona un periodo.',
                confirmButtonText: 'Aceptar'
            });
            return;
        }

        var cuentasAuxiliar = $('#cuentasAuxiliar').val();
        if (!cuentasAuxiliar) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: 'Por favor selecciona por lo menos una cuenta contable.',
                confirmButtonText: 'Aceptar'
            });
            return;
        }

        $('#tabla-auxiliar-cuentas').hide();
        $('#acordeon-auxiliar-cuentas-acciones').hide();
        $('#loading-auxiliar-cuentas').show();
        $.ajax({
            url: "{{ route('reporte-auxiliar-cuentas.generar-reporte') }}",
            type: "POST",
            data: {
                periodo: $('#periodoAuxiliar').val(),
                cuentasAuxiliar: cuentasAuxiliar,
            },
            success: function(response) {
                renderizarAuxiliarCuentas(response);
                $('#loading-auxiliar-cuentas').hide();
                $('#acordeon-auxiliar-cuentas-acciones').show();

            },
            error: function(xhr, status, error) {
                $('#contenedor-auxiliar-cuentas').html('<div class="text-center py-8"><i class="material-icons text-gray-400 text-4xl mb-2">error</i><p class="text-gray-500">Error al cargar el reporte</p></div>');
                $('#loading-auxiliar-cuentas').hide();
            }
        });
    }

    // Renderiza el auxiliar de cuentas: cada cuenta como bloque, debajo tabla de movimientos
    function renderizarAuxiliarCuentas(data) {
        let html = '';
        if (!data.length) {
            html = '<div class="text-center py-8 text-gray-500">No hay datos para mostrar.</div>';
        }
        data.forEach(function(cuenta) {
            html += `<div class="acordeon-item mb-6">
                <div class="acordeon-header active">
                    <span class="cuenta-codigo ">${cuenta.cuenta}</span><span class="cuenta-descripcion font-semibold">${cuenta.descripcion_cuenta}</span>
                    <span class="ml-4 font-semibold">Saldo inicial: $${cuenta.saldo_inicial}</span>
                </div>
                <div class="acordeon-content active">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 mb-4">
                            <thead class="bg-gray-100">
                                <tr>
                                    <th class="px-2 py-1 text-xs font-medium text-gray-700">Periodo</th>
                                    <th class="px-2 py-1 text-xs font-medium text-gray-700">Tipo</th>
                                    <th class="px-2 py-1 text-xs font-medium text-gray-700">Núm. póliza</th>
                                    <th class="px-2 py-1 text-xs font-medium text-gray-700">Fecha</th>
                                    <th class="px-2 py-1 text-xs font-medium text-gray-700">Descripción</th>
                                    <th class="px-2 py-1 text-xs font-medium text-gray-700">Cargo</th>
                                    <th class="px-2 py-1 text-xs font-medium text-gray-700">Abono</th>
                                    <th class="px-2 py-1 text-xs font-medium text-gray-700">Saldo</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                ${cuenta.movimientos.map(mov => `
                                    <tr>
                                        <td class="px-2 py-1">${mov.periodo || ''}</td>
                                        <td class="px-2 py-1">${mov.tipo || ''}</td>
                                        <td class="px-2 py-1">${mov.numero_poliza || ''}</td>
                                        <td class="px-2 py-1">${mov.fecha || ''}</td>
                                        <td class="px-2 py-1">${mov.descripcion_poliza || ''}</td>
                                        <td class="px-2 py-1">${Number(mov.cargo).toLocaleString('es-MX', {minimumFractionDigits:2})}</td>
                                        <td class="px-2 py-1">${Number(mov.abono).toLocaleString('es-MX', {minimumFractionDigits:2})}</td>
                                        <td class="px-2 py-1">${Number(mov.saldo).toLocaleString('es-MX', {minimumFractionDigits:2})}</td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>`;
        });
        // Crear un contenedor si no existe
        if ($('#contenedor-auxiliar-cuentas').length === 0) {
            $('<div id="contenedor-auxiliar-cuentas"></div>').insertAfter('.overflow-x-auto');
        }
        $('#contenedor-auxiliar-cuentas').html(html);
    }


    function exportarAuxiliarCuentas(type) {
        var periodo = $('#periodoAuxiliar').val();
        if (!periodo) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: 'Por favor selecciona un periodo.',
                confirmButtonText: 'Aceptar'
            });
            return;
        }

        var cuentasAuxiliar = $('#cuentasAuxiliar').val();
        if (!cuentasAuxiliar) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: 'Por favor selecciona por lo menos una cuenta contable.',
                confirmButtonText: 'Aceptar'
            });
            return;
        }
        $.ajax({
            url: "{{ route('reporte-auxiliar-cuentas.generar-archivo') }}",
            type: 'POST',
            data: {
                export: type,
                periodo: $('#periodoAuxiliar').val(),
                cuentasAuxiliar: cuentasAuxiliar,
            },
            beforeSend: function() {
                $('#loadingLoad').modal('show');
            },
            success: function(response) {
                if (response.filename) {
                    // Crear un enlace temporal para descargar el archivo
                    var link = document.createElement('a');
                    link.href = response.url;
                    link.download = response.filename;
                    link.click();
                } else {
                    showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Error al exportar el archivo.');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error al exportar:', error);
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Error al exportar el archivo.');
            },
            complete: function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 2000);
            }
        });
    }
</script>
@endpush