@extends('layouts.kaiadmin.master')

@section('template_title')
Detalle Cuenta Municipal CGC
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="container-fluid px-4 mt-4">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="fw-bold">
            <i class="fas fa-file-invoice me-2"></i> Detalle Cuenta Municipal CGC
        </h4>
        <button class="btn btn-primary" id="btnNuevo">
            <i class="fas fa-plus-circle"></i> Nuevo Detalle
        </button>
    </div>

    <div class="card shadow-sm">
        <div class="card-body table-responsive">
            <table class="table table-hover align-middle" id="tablaDetalleCGC">
                <thead class="table-light">
                    <tr>
                        <th width="60">ID</th>
                        <th>Valor</th>
                        <th>Observación</th>
                        <th>Tipo Autorización</th>
                        <th>Serie Documento</th>
                        <th>Catálogo CGC</th>
                        <th width="140">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- DataTables lo llenará -->
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(function () {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    /* =========================
       CARGAR CATÁLOGOS (DIRECTO CON URL)
    ========================= */
    let documentosCGC = [];
    let catalogoCGC = [];
    
    function cargarDocumentosCGC() {
        return $.get("/documentos-cgc/list")  // Ruta directa sin name
            .done(data => {
                documentosCGC = data;
                console.log('Documentos cargados:', documentosCGC.length);
            })
            .fail(() => {
                console.error('Error al cargar documentos CGC');
                // Datos de ejemplo para desarrollo
                documentosCGC = [
                    { id: 1, tipoAutorizaiconCGC_id: 1, serieDocumentosCGC: 'A001', descripcion: 'Autorización Tipo 1 - Serie A001' },
                    { id: 2, tipoAutorizaiconCGC_id: 1, serieDocumentosCGC: 'A002', descripcion: 'Autorización Tipo 1 - Serie A002' },
                    { id: 3, tipoAutorizaiconCGC_id: 2, serieDocumentosCGC: 'B001', descripcion: 'Autorización Tipo 2 - Serie B001' },
                ];
            });
    }

    function cargarCatalogoCGC() {
        return $.get("/catalogo-cgc/list")  // Ruta directa sin name
            .done(data => {
                catalogoCGC = data;
                console.log('Catálogos cargados:', catalogoCGC.length);
            })
            .fail(() => {
                console.error('Error al cargar catálogo CGC');
                // Datos de ejemplo para desarrollo
                catalogoCGC = [
                    { id: 1, descripcionCGC: 'Catálogo General' },
                    { id: 2, descripcionCGC: 'Catálogo Específico' },
                    { id: 3, descripcionCGC: 'Catálogo Municipal' },
                ];
            });
    }

    // Cargar todos los catálogos al iniciar
    cargarDocumentosCGC();
    cargarCatalogoCGC();

    /* =========================
       DATATABLE
    ========================= */
    let tabla = $('#tablaDetalleCGC').DataTable({
        ajax: {
            url: "{{ route('detalle-cuenta-municipal-c-g-cs.create') }}",
            dataSrc: '',
            error: function(xhr, error, code) {
                console.error('Error al cargar datos:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'No se pudieron cargar los datos'
                });
            }
        },
        columns: [
            { 
                data: 'id',
                className: 'fw-bold text-primary'
            },
            { 
                data: 'valor',
                render: data => {
                    if (data) {
                        return `<span class="badge bg-success bg-opacity-10 text-success px-3 py-2">
                            <i class="fas fa-dollar-sign me-1"></i> ${parseFloat(data).toFixed(2)}
                        </span>`;
                    }
                    return '<span class="text-muted">-</span>';
                }
            },
            { 
                data: 'observacion',
                render: data => {
                    if (data && data.length > 30) {
                        return `<span title="${data}">${data.substring(0, 30)}...</span>`;
                    }
                    return data || '<span class="text-muted">-</span>';
                }
            },
            { 
                data: 'documentosCGC_tipoAutorizaiconCGC_id',
                render: function(data, type, row) {
                    if (type === 'display') {
                        return `<span class="badge bg-info">Tipo #${data}</span>`;
                    }
                    return data;
                }
            },
            { 
                data: 'documentosCGC_serieDocumentosCGC',
                render: data => {
                    if (data) {
                        return `<span class="badge bg-secondary">${data}</span>`;
                    }
                    return '<span class="text-muted">-</span>';
                }
            },
            { 
                data: 'catalogoCGC_id',
                render: function(data, type, row) {
                    if (type === 'display') {
                        // Buscar la descripción en el catálogo
                        let catalogo = catalogoCGC.find(c => c.id == data);
                        if (catalogo) {
                            return `<span class="badge bg-purple" style="background-color: #6f42c1;">
                                <i class="fas fa-book me-1"></i> ${catalogo.descripcionCGC || 'Catálogo #' + data}
                            </span>`;
                        }
                        return `<span class="badge bg-secondary">ID: ${data}</span>`;
                    }
                    return data;
                }
            },
            {
                data: null,
                orderable: false,
                className: 'text-center',
                render: d => {
                    // Escapar caracteres especiales para el atributo data-json
                    const jsonStr = JSON.stringify(d).replace(/'/g, "&apos;").replace(/"/g, "&quot;");
                    
                    return `
                        <div class="btn-group" role="group">
                            <button class="btn btn-sm btn-outline-info btnVer" 
                                    title="Ver detalles"
                                    data-json='${jsonStr}'>
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-warning btnEditar"
                                    title="Editar"
                                    data-json='${jsonStr}'>
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger btnEliminar"
                                    title="Eliminar"
                                    data-id="${d.id}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    `;
                }
            }
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json'
        },
        order: [[0, 'desc']],
        pageLength: 10,
        lengthMenu: [5, 10, 25, 50, 100]
    });

    /* =========================
       FUNCIONES PARA GENERAR SELECTS
    ========================= */
    function generarSelectDocumentos(selectedTipo = null, selectedSerie = null) {
        if (!documentosCGC || documentosCGC.length === 0) {
            return '<option value="">Cargando documentos...</option>';
        }
        
        // Agrupar por tipo y serie
        let options = '';
        let paresUnicos = new Set();
        
        documentosCGC.forEach(doc => {
            let tipoId = doc.tipoAutorizaiconCGC_id;
            let serie = doc.serieDocumentosCGC;
            let key = `${tipoId}|${serie}`;
            
            if (!paresUnicos.has(key)) {
                paresUnicos.add(key);
                options += `
                    <option value="${tipoId}|${serie}" 
                        ${selectedTipo == tipoId && selectedSerie == serie ? 'selected' : ''}>
                        Tipo: ${tipoId} - Serie: ${serie} ${doc.descripcion ? `(${doc.descripcion})` : ''}
                    </option>
                `;
            }
        });
        
        return options;
    }

    function generarSelectCatalogo(selectedId = null) {
        if (!catalogoCGC || catalogoCGC.length === 0) {
            return '<option value="">Cargando catálogos...</option>';
        }
        
        let options = catalogoCGC.map(c => 
            `<option value="${c.id}" ${selectedId == c.id ? 'selected' : ''}>
                ${c.descripcionCGC || `Catálogo #${c.id}`}
            </option>`
        ).join('');
        
        return `<option value="">Seleccione un catálogo</option>${options}`;
    }

    /* =========================
       FORMULARIO
    ========================= */
    function formulario(data = {}, modoEdicion = false) {
        const valor = data.valor || '';
        const observacion = data.observacion || '';
        const tipoActual = data.documentosCGC_tipoAutorizaiconCGC_id || '';
        const serieActual = data.documentosCGC_serieDocumentosCGC || '';
        const catalogoActual = data.catalogoCGC_id || '';
        
        return `
            <div style="text-align: left; margin: 15px 0; max-height: 70vh; overflow-y: auto; padding-right: 10px;">
                <div style="background-color: #f8f9fa; padding: 20px; border-radius: 8px;">
                    
                    ${modoEdicion ? `
                        <div style="background-color: #e9ecef; border-radius: 5px; padding: 8px; margin-bottom: 20px; text-align: center;">
                            <span style="font-weight: bold;">Editando Registro #${data.id}</span>
                        </div>
                    ` : ''}
                    
                    <!-- Valor -->
                    <div style="margin-bottom: 20px;">
                        <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 8px;">
                            <i class="fas fa-dollar-sign" style="margin-right: 5px; color: #28a745;"></i>
                            Valor <span style="color: #dc3545;">*</span>
                        </label>
                        <input id="valor" type="number" step="0.01" class="swal2-input" 
                            style="width: 100%; margin: 0;" 
                            placeholder="0.00"
                            value="${valor}">
                    </div>
                    
                    <!-- Observación -->
                    <div style="margin-bottom: 20px;">
                        <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 8px;">
                            <i class="fas fa-comment" style="margin-right: 5px; color: #6c757d;"></i>
                            Observación
                        </label>
                        <textarea id="observacion" class="swal2-textarea" 
                            style="width: 100%; min-height: 80px; margin: 0;" 
                            placeholder="Notas adicionales...">${observacion}</textarea>
                    </div>
                    
                    <!-- Documento CGC -->
                    <div style="margin-bottom: 20px;">
                        <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 8px;">
                            <i class="fas fa-file-alt" style="margin-right: 5px; color: #17a2b8;"></i>
                            Documento <span style="color: #dc3545;">*</span>
                        </label>
                        <select id="documentoSelect" class="swal2-select" 
                            style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ced4da;">
                            <option value="">Seleccione un documento</option>
                            ${generarSelectDocumentos(tipoActual, serieActual)}
                        </select>
                        <input type="hidden" id="tipo" value="${tipoActual}">
                        <input type="hidden" id="serie" value="${serieActual}">
                    </div>
                    
                    <!-- Catálogo CGC -->
                    <div style="margin-bottom: 20px;">
                        <label style="font-weight: bold; color: #495057; display: block; margin-bottom: 8px;">
                            <i class="fas fa-book" style="margin-right: 5px; color: #6f42c1;"></i>
                            Catálogo <span style="color: #dc3545;">*</span>
                        </label>
                        <select id="catalogo" class="swal2-select" 
                            style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ced4da;">
                            ${generarSelectCatalogo(catalogoActual)}
                        </select>
                    </div>
                    
                    <!-- Leyenda -->
                    <div style="margin-top: 20px; padding: 10px; background-color: #e7f3ff; border-radius: 5px;">
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <i class="fas fa-info-circle" style="color: #004085; font-size: 1.2em;"></i>
                            <span style="color: #004085; font-size: 0.9em;">
                                Los campos marcados con <span style="color: #dc3545;">*</span> son obligatorios
                            </span>
                        </div>
                    </div>
                    
                </div>
            </div>
        `;
    }

    /* =========================
       NUEVO
    ========================= */
    $('#btnNuevo').click(function () {
        Swal.fire({
            title: '➕ Nuevo Detalle CGC',
            html: formulario({}, false),
            showCancelButton: true,
            confirmButtonText: '💾 Guardar',
            cancelButtonText: '❌ Cancelar',
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            width: '600px',
            didOpen: () => {
                $('#documentoSelect').on('change', function() {
                    let valor = $(this).val();
                    if (valor) {
                        let partes = valor.split('|');
                        $('#tipo').val(partes[0]);
                        $('#serie').val(partes[1]);
                    } else {
                        $('#tipo').val('');
                        $('#serie').val('');
                    }
                });
            },
            preConfirm: () => {
                const valor = $('#valor').val();
                const tipo = $('#tipo').val();
                const serie = $('#serie').val();
                const catalogo = $('#catalogo').val();
                
                if (!valor || valor === '') {
                    Swal.showValidationMessage('El valor es obligatorio');
                    return false;
                }
                
                if (!tipo) {
                    Swal.showValidationMessage('Debe seleccionar un tipo de autorización');
                    return false;
                }
                
                if (!serie) {
                    Swal.showValidationMessage('Debe seleccionar una serie de documento');
                    return false;
                }
                
                if (!catalogo) {
                    Swal.showValidationMessage('Debe seleccionar un catálogo');
                    return false;
                }
                
                return {
                    valor: parseFloat(valor),
                    observacion: $('#observacion').val(),
                    documentosCGC_tipoAutorizaiconCGC_id: tipo,
                    documentosCGC_serieDocumentosCGC: serie,
                    catalogoCGC_id: catalogo
                };
            }
        }).then(r => {
            if (r.isConfirmed) {
                guardarRegistro(r.value);
            }
        });
    });

    /* =========================
       EDITAR
    ========================= */
    $(document).on('click', '.btnEditar', function () {
        let data = JSON.parse($(this).attr('data-json'));
        
        Swal.fire({
            title: '✏️ Editar Detalle CGC',
            html: formulario(data, true),
            showCancelButton: true,
            confirmButtonText: '💾 Actualizar',
            cancelButtonText: '❌ Cancelar',
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            width: '600px',
            didOpen: () => {
                let tipoActual = data.documentosCGC_tipoAutorizaiconCGC_id;
                let serieActual = data.documentosCGC_serieDocumentosCGC;
                
                if (tipoActual && serieActual) {
                    $(`#documentoSelect option[value="${tipoActual}|${serieActual}"]`).prop('selected', true);
                }
                
                $('#documentoSelect').on('change', function() {
                    let valor = $(this).val();
                    if (valor) {
                        let partes = valor.split('|');
                        $('#tipo').val(partes[0]);
                        $('#serie').val(partes[1]);
                    } else {
                        $('#tipo').val('');
                        $('#serie').val('');
                    }
                });
            },
            preConfirm: () => {
                const valor = $('#valor').val();
                const tipo = $('#tipo').val();
                const serie = $('#serie').val();
                const catalogo = $('#catalogo').val();
                
                if (!valor || valor === '') {
                    Swal.showValidationMessage('El valor es obligatorio');
                    return false;
                }
                
                if (!tipo) {
                    Swal.showValidationMessage('Debe seleccionar un tipo de autorización');
                    return false;
                }
                
                if (!serie) {
                    Swal.showValidationMessage('Debe seleccionar una serie de documento');
                    return false;
                }
                
                if (!catalogo) {
                    Swal.showValidationMessage('Debe seleccionar un catálogo');
                    return false;
                }
                
                return {
                    valor: parseFloat(valor),
                    observacion: $('#observacion').val(),
                    documentosCGC_tipoAutorizaiconCGC_id: tipo,
                    documentosCGC_serieDocumentosCGC: serie,
                    catalogoCGC_id: catalogo
                };
            }
        }).then(r => {
            if (r.isConfirmed) {
                actualizarRegistro(data.id, r.value);
            }
        });
    });

    /* =========================
       GUARDAR/ACTUALIZAR
    ========================= */
    function guardarRegistro(data) {
        Swal.fire({
            title: 'Guardando...',
            text: 'Por favor espere',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        $.post("{{ route('detalle-cuenta-municipal-c-g-cs.store') }}", data)
            .done(() => {
                Swal.fire({
                    icon: 'success',
                    title: '¡Guardado!',
                    text: 'El registro se creó correctamente',
                    timer: 2000,
                    showConfirmButton: false
                });
                tabla.ajax.reload(null, false);
            })
            .fail((xhr) => {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON?.message || 'Error al guardar'
                });
            });
    }
    
    function actualizarRegistro(id, data) {
        Swal.fire({
            title: 'Actualizando...',
            text: 'Por favor espere',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        $.ajax({
            url: `detalle-cuenta-municipal-c-g-cs/${id}`,
            type: 'PUT',
            data: data,
            success: () => {
                Swal.fire({
                    icon: 'success',
                    title: '¡Actualizado!',
                    text: 'El registro se actualizó correctamente',
                    timer: 2000,
                    showConfirmButton: false
                });
                tabla.ajax.reload(null, false);
            },
            error: (xhr) => {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON?.message || 'Error al actualizar'
                });
            }
        });
    }

    /* =========================
       VER
    ========================= */
    $(document).on('click', '.btnVer', function () {
        let d = JSON.parse($(this).attr('data-json'));
        
        let catalogoDesc = 'No encontrado';
        let catalogoInfo = catalogoCGC.find(c => c.id == d.catalogoCGC_id);
        if (catalogoInfo) {
            catalogoDesc = catalogoInfo.descripcionCGC || `ID: ${d.catalogoCGC_id}`;
        }
        
        Swal.fire({
            title: '🔍 Detalle del Registro CGC',
            html: `
                <div style="text-align: left; margin: 20px 0;">
                    <div style="background-color: #f8f9fa; border-radius: 10px; padding: 20px;">
                        
                        <div style="background-color: #e9ecef; border-radius: 8px; padding: 10px; margin-bottom: 20px; text-align: center;">
                            <span style="font-weight: bold; font-size: 1.1em;">Registro #${d.id}</span>
                        </div>
                        
                        <div style="display: grid; grid-template-columns: 120px 1fr; gap: 15px; align-items: center;">
                            
                            <div style="font-weight: bold; color: #495057;">
                                <i class="fas fa-dollar-sign" style="color: #28a745;"></i> Valor:
                            </div>
                            <div style="background-color: white; padding: 8px 12px; border-radius: 5px; border: 1px solid #dee2e6;">
                                <span style="font-weight: bold; color: #28a745;">Q ${parseFloat(d.valor).toFixed(2)}</span>
                            </div>
                            
                            <div style="font-weight: bold; color: #495057;">
                                <i class="fas fa-tag" style="color: #fd7e14;"></i> Tipo Aut.:
                            </div>
                            <div style="background-color: white; padding: 8px 12px; border-radius: 5px; border: 1px solid #dee2e6;">
                                ${d.documentosCGC_tipoAutorizaiconCGC_id}
                            </div>
                            
                            <div style="font-weight: bold; color: #495057;">
                                <i class="fas fa-file-alt" style="color: #17a2b8;"></i> Serie:
                            </div>
                            <div style="background-color: white; padding: 8px 12px; border-radius: 5px; border: 1px solid #dee2e6;">
                                ${d.documentosCGC_serieDocumentosCGC}
                            </div>
                            
                            <div style="font-weight: bold; color: #495057;">
                                <i class="fas fa-book" style="color: #6f42c1;"></i> Catálogo:
                            </div>
                            <div style="background-color: white; padding: 8px 12px; border-radius: 5px; border: 1px solid #dee2e6;">
                                ${catalogoDesc}
                            </div>
                            
                        </div>
                        
                        <div style="margin-top: 20px;">
                            <div style="font-weight: bold; color: #495057; margin-bottom: 8px;">
                                <i class="fas fa-comment" style="color: #6c757d;"></i> Observación:
                            </div>
                            <div style="background-color: white; padding: 12px; border-radius: 5px; border: 1px solid #dee2e6;">
                                ${d.observacion || '<span style="color: #999;">Sin observación</span>'}
                            </div>
                        </div>
                        
                    </div>
                </div>
            `,
            confirmButtonText: 'Cerrar',
            confirmButtonColor: '#6c757d',
            width: '600px'
        });
    });

    /* =========================
       ELIMINAR
    ========================= */
    $(document).on('click', '.btnEliminar', function () {
        let id = $(this).data('id');
        
        Swal.fire({
            title: '¿Eliminar Registro?',
            html: `
                <div style="text-align: center;">
                    <i class="fas fa-exclamation-triangle" style="font-size: 48px; color: #dc3545; margin-bottom: 15px;"></i>
                    <p>¿Estás seguro de eliminar el registro #${id}?</p>
                    <p style="color: #dc3545; font-weight: bold;">¡Esta acción no se puede deshacer!</p>
                </div>
            `,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '🗑️ Sí, eliminar',
            cancelButtonText: '❌ Cancelar',
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d'
        }).then(r => {
            if (r.isConfirmed) {
                $.ajax({
                    url: `detalle-cuenta-municipal-c-g-cs/${id}`,
                    type: 'DELETE',
                    success: () => {
                        Swal.fire('¡Eliminado!', '', 'success');
                        tabla.ajax.reload(null, false);
                    }
                });
            }
        });
    });

});
</script>

<style>
    .swal2-popup { font-family: inherit; border-radius: 12px; }
    .swal2-input:focus, .swal2-select:focus { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25); }
    .btn-group .btn { transition: all 0.2s; margin: 0 2px; }
    .btn-group .btn:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
    .badge.bg-purple { background-color: #6f42c1; color: white; }
</style>
@endsection