@extends('padre.padre')
@section('contenido')
    <!-- SweetAlert2 & FontAwesome -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            --accent-blue: #3b82f6;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --border-radius: 12px;
            --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06);
        }

        .cc-header {
            background: var(--primary-gradient);
            padding: 1.25rem 2rem;
            color: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2);
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cc-header h1 {
            font-weight: 800;
            font-size: 1.5rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .glass-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }

        .table-custom th {
            background-color: #f8fafc;
            color: #334155;
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            padding: 8px 10px;
            border-bottom: 2px solid #e2e8f0;
        }

        .table-custom td {
            font-size: 0.85rem;
            padding: 8px 10px;
            vertical-align: middle;
        }
    </style>

    <div class="container-fluid py-3">
        <!-- HEADER -->
        <div class="cc-header">
            <div>
                <h1><i class="fa-solid fa-tags text-primary"></i> Catálogo de Centros de Costos</h1>
                <p class="text-white-50 m-0" style="font-size: 0.85rem;">Clasificación de gastos y costos por áreas operativas y funcionales (Administración, Ventas, Domicilios, etc.).</p>
            </div>
            <div>
                @include('menu.botonRegresar')
            </div>
        </div>

        <!-- BARRA DE ACCIÓN -->
        <div class="glass-card">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="d-flex gap-2">
                    <button class="btn btn-primary fw-bold" onclick="abrirModalCC()">
                        <i class="fa-solid fa-plus me-1"></i> Nuevo Centro de Costos
                    </button>
                    <button class="btn btn-outline-primary fw-bold" onclick="abrirModalReclasificar()">
                        <i class="fa-solid fa-arrows-rotate me-1"></i> Reclasificar / Sincronizar Histórico
                    </button>
                </div>
                <span class="text-muted small"><i class="fa-solid fa-info-circle me-1"></i> Los centros de costos permiten analizar la rentabilidad por área en el Estado de Resultados.</span>
            </div>
        </div>

        <!-- TABLA DE CENTROS DE COSTOS -->
        <div class="glass-card">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold m-0 text-dark">
                    <i class="fa-solid fa-list text-primary me-2"></i> Centros de Costos Registrados
                </h5>
                <span class="badge bg-light text-muted border px-2 py-1">{{ $centros->count() }} centros</span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover table-custom align-middle mb-0">
                    <thead>
                        <tr>
                            <th style="width: 120px;">Código</th>
                            <th>Nombre del Centro de Costos</th>
                            <th>Tipo / Clasificación</th>
                            <th>Sucursal / Bodega</th>
                            <th>Estado</th>
                            <th class="text-center" style="width: 120px;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($centros as $c)
                            <tr>
                                <td class="fw-bold"><span class="badge bg-dark">{{ $c->codigo }}</span></td>
                                <td class="fw-bold text-dark">{{ $c->nombre }}</td>
                                <td>
                                    <span class="badge bg-light text-dark border">
                                        @if($c->tipo == 'Administrativo') 💼 Administrativo
                                        @elseif($c->tipo == 'Comercial') 🛍️ Comercial / Ventas
                                        @elseif($c->tipo == 'Logistica') 🛵 Logística / Domicilios
                                        @elseif($c->tipo == 'Produccion') 🍳 Cocina / Producción
                                        @else ⚙️ {{ $c->tipo }}
                                        @endif
                                    </span>
                                </td>
                                <td>{{ $c->nombreBodega ?? 'Bodega ' . $c->idbodega }}</td>
                                <td>
                                    @if($c->estado == 1)
                                        <span class="badge bg-success">Activo</span>
                                    @else
                                        <span class="badge bg-secondary">Inactivo</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <button class="btn btn-sm btn-outline-primary me-1" onclick='editarCC(@json($c))' title="Editar">
                                        <i class="fa-solid fa-pen"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" onclick="eliminarCC({{ $c->id }}, '{{ $c->codigo }}')" title="Eliminar / Inactivar">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-4 text-muted">
                                    <i class="fa-solid fa-tags fa-2x mb-2 d-block opacity-50"></i>
                                    No hay centros de costos creados. Haz clic en "Nuevo Centro de Costos" para comenzar.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- MODAL REGISTRO / EDICIÓN -->
    <div class="modal fade" id="modalCC" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title fw-bold" id="modalCCTitle"><i class="fa-solid fa-tag me-2"></i> Nuevo Centro de Costos</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <input type="hidden" id="ccId">
                    <div class="mb-3">
                        <label class="form-label fw-bold small">CÓDIGO (Identificador Corto) *</label>
                        <input type="text" class="form-control" id="txtCodigoCC" placeholder="ej. CC-ADM, CC-POS, CC-DOM" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">NOMBRE DESCRIPTIVO *</label>
                        <input type="text" class="form-control" id="txtNombreCC" placeholder="ej. Administración General, Punto de Venta 1" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">TIPO / CLASIFICACIÓN *</label>
                        <select class="form-select" id="selectTipoCC">
                            <option value="Operativo">Operativo (General)</option>
                            <option value="Administrativo">Administrativo</option>
                            <option value="Comercial">Comercial / Ventas</option>
                            <option value="Logistica">Logística y Domicilios</option>
                            <option value="Produccion">Producción y Cocina</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">SUCURSAL / BODEGA *</label>
                        <select class="form-select" id="selectBodegaCC">
                            @foreach($bodegas as $b)
                                <option value="{{ $b->id }}">{{ $b->nombreBodega }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">ESTADO</label>
                        <select class="form-select" id="selectEstadoCC">
                            <option value="1">Activo</option>
                            <option value="0">Inactivo</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary fw-bold" onclick="guardarCC()"><i class="fa-solid fa-floppy-disk me-1"></i> Guardar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL RECLASIFICACIÓN PERSONALIZADA DE HISTÓRICO -->
    <div class="modal fade" id="modalReclasificar" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title fw-bold"><i class="fa-solid fa-arrows-rotate me-2 text-warning"></i> Reclasificar Movimientos por Bodega y Centro de Costos</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <p class="text-muted small">Selecciona la <strong>Bodega de Origen</strong> de los movimientos contables y el <strong>Centro de Costos</strong> al que deseas asignarlos masivamente en la contabilidad.</p>
                    
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small"><i class="fa-solid fa-store me-1"></i> 1. BODEGA DE ORIGEN (bodegaIng) *</label>
                            <select class="form-select fw-bold" id="recBodegaOrigen">
                                <option value="0">TODAS LAS BODEGAS (Global)</option>
                                @foreach($bodegas as $b)
                                    <option value="{{ $b->id }}">{{ $b->nombreBodega }} (ID #{{ $b->id }})</option>
                                @endforeach
                            </select>
                            <small class="text-muted">Movimientos generados en esta sucursal.</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small"><i class="fa-solid fa-tag me-1"></i> 2. CENTRO DE COSTOS DESTINO *</label>
                            <select class="form-select fw-bold" id="recCentroDestino">
                                @foreach($centros as $c)
                                    <option value="{{ $c->id }}">{{ $c->codigo }} - {{ $c->nombre }} ({{ $c->tipo }})</option>
                                @endforeach
                            </select>
                            <small class="text-muted">Centro de costos al que se asignarán los movimientos.</small>
                        </div>
                    </div>

                    <div class="p-3 bg-light rounded border mb-3">
                        <label class="form-label fw-bold small text-dark"><i class="fa-regular fa-calendar-days me-1"></i> RANGO DE FECHAS (OPCIONAL)</label>
                        <p class="text-muted small mb-2">Deja los campos en blanco para actualizar <strong>todo el histórico</strong>, o especifica un período:</p>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="small text-muted">Fecha Inicial</label>
                                <input type="date" class="form-control" id="recFechaI">
                            </div>
                            <div class="col-md-6">
                                <label class="small text-muted">Fecha Final</label>
                                <input type="date" class="form-control" id="recFechaF">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary fw-bold" onclick="ejecutarReclasificacion()">
                        <i class="fa-solid fa-bolt me-1"></i> Aplicar Reclasificación
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- SCRIPT JS -->
    <script>
        let modalCCBs = null;
        let modalReclasificarBs = null;

        document.addEventListener('DOMContentLoaded', () => {
            modalCCBs = new bootstrap.Modal(document.getElementById('modalCC'));
            modalReclasificarBs = new bootstrap.Modal(document.getElementById('modalReclasificar'));
        });

        function abrirModalCC() {
            document.getElementById('ccId').value = '';
            document.getElementById('modalCCTitle').innerHTML = '<i class="fa-solid fa-tag me-2"></i> Nuevo Centro de Costos';
            document.getElementById('txtCodigoCC').value = '';
            document.getElementById('txtNombreCC').value = '';
            document.getElementById('selectTipoCC').value = 'Operativo';
            document.getElementById('selectEstadoCC').value = '1';
            modalCCBs.show();
        }

        function editarCC(c) {
            document.getElementById('ccId').value = c.id;
            document.getElementById('modalCCTitle').innerHTML = '<i class="fa-solid fa-pen me-2"></i> Editar Centro de Costos';
            document.getElementById('txtCodigoCC').value = c.codigo;
            document.getElementById('txtNombreCC').value = c.nombre;
            document.getElementById('selectTipoCC').value = c.tipo;
            document.getElementById('selectBodegaCC').value = c.idbodega;
            document.getElementById('selectEstadoCC').value = c.estado;
            modalCCBs.show();
        }

        function guardarCC() {
            const payload = {
                id: document.getElementById('ccId').value,
                codigo: document.getElementById('txtCodigoCC').value,
                nombre: document.getElementById('txtNombreCC').value,
                tipo: document.getElementById('selectTipoCC').value,
                idbodega: document.getElementById('selectBodegaCC').value,
                estado: document.getElementById('selectEstadoCC').value
            };

            Swal.fire({ title: 'Guardando...', didOpen: () => Swal.showLoading() });

            fetch("{{ url('centros-costos/guardar') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(payload)
            })
            .then(res => res.json())
            .then(data => {
                Swal.close();
                if (data.status === 'ok') {
                    modalCCBs.hide();
                    Swal.fire('Guardado', data.message, 'success').then(() => window.location.reload());
                } else {
                    Swal.fire('Error', data.message, 'error');
                }
            })
            .catch(() => Swal.fire('Error', 'No se pudo guardar el centro de costos', 'error'));
        }

        function eliminarCC(id, codigo) {
            Swal.fire({
                title: `¿Eliminar centro ${codigo}?`,
                text: 'Si tiene movimientos asociados, pasará a estado Inactivo.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                confirmButtonText: 'Sí, continuar'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`{{ url('centros-costos/eliminar') }}/${id}`, {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.status === 'ok') {
                            Swal.fire('Actualizado', data.message, 'success').then(() => window.location.reload());
                        } else {
                            Swal.fire('Error', data.message, 'error');
                        }
                    });
                }
            });
        }

        function abrirModalReclasificar() {
            modalReclasificarBs.show();
        }

        function ejecutarReclasificacion() {
            const bodegaOrigen = document.getElementById('recBodegaOrigen').value;
            const centroDestino = document.getElementById('recCentroDestino').value;
            const fechaI = document.getElementById('recFechaI').value;
            const fechaF = document.getElementById('recFechaF').value;

            Swal.fire({
                title: '¿Confirmar Reclasificación?',
                text: 'Se actualizarán los registros contables de la bodega seleccionada con el centro de costos elegido.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#0f172a',
                cancelButtonColor: '#64748b',
                confirmButtonText: '<i class="fa-solid fa-bolt"></i> Sí, Reclasificar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Procesando Reclasificación...',
                        text: 'Actualizando registros en la tabla contabilidad',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    fetch("{{ url('centros-costos/sincronizar-historico') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            modo: 'personalizado',
                            bodega_origen: bodegaOrigen,
                            centro_costo_destino: centroDestino,
                            fecha_i: fechaI,
                            fecha_f: fechaF
                        })
                    })
                    .then(res => res.json())
                    .then(data => {
                        Swal.close();
                        if (data.status === 'ok') {
                            modalReclasificarBs.hide();
                            Swal.fire('¡Reclasificación Completa!', data.message, 'success');
                        } else {
                            Swal.fire('Error', data.message, 'error');
                        }
                    })
                    .catch(() => {
                        Swal.close();
                        Swal.fire('Error', 'No se pudo completar la operación', 'error');
                    });
                }
            });
        }
    </script>
@endsection