@extends('layouts.app')
@section('title', 'Caja')

@section('content')
<div class="container pb-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="fw-bold m-0 text-success"><i class="bi bi-cash-stack"></i> Caja</h3>
        <button class="btn btn-success rounded-pill shadow-sm" data-bs-toggle="modal" data-bs-target="#modalAbrir">
            <i class="bi bi-door-open"></i> Abrir Caja
        </button>
    </div>

    @if(session('success'))
        <div class="alert alert-success rounded-4">{{ session('success') }}</div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger rounded-4">{{ $errors->first() }}</div>
    @endif

    <div class="row g-3">
        @foreach($movimientos as $item)
        <div class="col-12">
            <div class="card shadow-sm border-0 rounded-4 {{ $item->estado == 'CERRADO' ? 'bg-light text-muted' : 'border-success border-2' }}">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div>
                            <span class="badge {{ $item->estado == 'ABIERTO' ? 'bg-success' : 'bg-secondary' }} mb-1">{{ $item->estado }}</span>
                            <h5 class="fw-bold m-0">Mov #{{ $item->idmovimiento }}</h5>
                        </div>
                        <span class="fs-5 fw-bold">Gs. {{ number_format($item->monto_apertura, 0, ',', '.') }}</span>
                    </div>

                    <div class="small mb-2">
                        <div><i class="bi bi-bank"></i> Cuentas Múltiples (Ver detalles abajo)</div>
                        <div><i class="bi bi-clock"></i> Apertura: {{ $item->fecha_apertura }}</div>
                        @if($item->estado == 'CERRADO')
                            <div><i class="bi bi-clock-history"></i> Cierre: {{ $item->fecha_cierre }}</div>
                            <div class="text-danger fw-bold">Cierre: Gs. {{ number_format($item->monto_cierre, 0, ',', '.') }}</div>
                        @endif
                    </div>

                    <!-- Acordeón para ver los detalles de movimientos -->
                    <div class="accordion accordion-flush mt-3 border-top" id="accDetalles{{ $item->idmovimiento }}">
                        <div class="accordion-item bg-transparent">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed bg-transparent px-0 py-2 small fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#colDetalles{{ $item->idmovimiento }}">
                                    Ver Detalles ({{ $item->detalles->count() }})
                                </button>
                            </h2>
                            <div id="colDetalles{{ $item->idmovimiento }}" class="accordion-collapse collapse" data-bs-parent="#accDetalles{{ $item->idmovimiento }}">
                                <div class="accordion-body px-0 py-2">
                                    <ul class="list-group list-group-flush small">
                                        @foreach($item->detalles as $det)
                                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center px-0">
                                            <span><i class="bi bi-arrow-right-short"></i> {{ $det->cuenta->denominacion ?? 'Cuenta eliminada' }}</span>
                                            <span class="fw-bold">Gs. {{ number_format($det->monto_apertura, 0, ',', '.') }}</span>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if($item->estado == 'ABIERTO')
                    <div class="mt-3 text-end border-top pt-3">
                        <button type="button" class="btn btn-outline-danger btn-sm rounded-pill px-3" onclick="abrirModalCerrar({{ $item->idmovimiento }})">
                            <i class="bi bi-door-closed"></i> Cerrar Caja
                        </button>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

<!-- Modal ABRIR CAJA (Maestro-Detalle) -->
<div class="modal fade" id="modalAbrir" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content rounded-4 border-0 shadow">
        <div class="modal-header bg-success text-white">
            <h1 class="modal-title fs-5"><i class="bi bi-door-open"></i> Abrir Caja</h1>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <form action="{{ route('movimientos.store') }}" method="POST" onsubmit="return validarCaja()">
            @csrf
            <div class="modal-body p-4">
                <div class="p-3 bg-light border rounded-3 mb-3">
                    <h6 class="fw-bold text-success mb-3">Agregar Saldo Inicial</h6>
                    <div class="row g-2 mb-2">
                        <div class="col-md-6 form-floating">
                            <select class="form-select" id="tmp_cuenta">
                                <option value="">Seleccione cuenta...</option>
                                @foreach($cuentas as $cue)
                                    <option value="{{ $cue->idcuenta }}">{{ $cue->denominacion }}</option>
                                @endforeach
                            </select>
                            <label>Cuenta Físico/Virtual</label>
                        </div>
                        <div class="col-md-6 form-floating">
                            <select class="form-select" id="tmp_tipo">
                                <option value="">Seleccione tipo...</option>
                                @foreach($tiposCuenta as $tc)
                                    <option value="{{ $tc->idtipo_cuenta }}">{{ $tc->nombre }}</option>
                                @endforeach
                            </select>
                            <label>Tipo de Ingreso</label>
                        </div>
                    </div>
                    <div class="form-floating mb-2">
                        <input type="number" class="form-control" id="tmp_monto" placeholder="0">
                        <label>Monto de Apertura (Gs.)</label>
                    </div>
                    <button type="button" class="btn btn-secondary w-100" onclick="agregarCuentaCaja()">
                        <i class="bi bi-plus-circle"></i> Agregar a la Apertura
                    </button>
                </div>

                <div class="table-responsive mb-2">
                    <table class="table table-sm align-middle table-striped">
                        <thead class="table-light">
                            <tr>
                                <th>Cuenta</th>
                                <th>Tipo</th>
                                <th class="text-end">Monto</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="caja_tbody"></tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-between align-items-center bg-white p-2 rounded border">
                    <span class="text-muted fw-bold">TOTAL APERTURA Gs.</span>
                    <h5 class="fw-bold m-0 text-success" id="caja_total_lbl">0</h5>
                </div>
            </div>
            <div class="modal-footer border-0 pb-4 pe-4">
                <button type="submit" class="btn btn-success rounded-pill px-4">Confirmar Apertura</button>
            </div>
        </form>
    </div>
    </div>
</div>

<script>
    let cuentasApertura = [];

    function agregarCuentaCaja() {
        let selCuenta = document.getElementById('tmp_cuenta');
        let selTipo = document.getElementById('tmp_tipo');
        let monto = parseInt(document.getElementById('tmp_monto').value);

        if (!selCuenta.value || !selTipo.value || isNaN(monto) || monto < 0) {
            alert("Seleccione cuenta, tipo y un monto válido.");
            return;
        }

        cuentasApertura.push({
            idcuenta: selCuenta.value,
            nom_cuenta: selCuenta.options[selCuenta.selectedIndex].text,
            idtipo: selTipo.value,
            nom_tipo: selTipo.options[selTipo.selectedIndex].text,
            monto: monto
        });

        actualizarTablaCaja();
        selCuenta.value = ''; selTipo.value = ''; document.getElementById('tmp_monto').value = '';
    }

    function actualizarTablaCaja() {
        let tbody = document.getElementById('caja_tbody');
        let lblTotal = document.getElementById('caja_total_lbl');
        tbody.innerHTML = '';
        let total = 0;

        cuentasApertura.forEach((item, index) => {
            total += item.monto;
            tbody.insertAdjacentHTML('beforeend', `
                <tr>
                    <td>${item.nom_cuenta} <input type="hidden" name="idcuenta[]" value="${item.idcuenta}"></td>
                    <td>${item.nom_tipo} <input type="hidden" name="idtipo_cuenta[]" value="${item.idtipo}"></td>
                    <td class="text-end">${item.monto.toLocaleString('es-PY')} <input type="hidden" name="monto[]" value="${item.monto}"></td>
                    <td class="text-center"><button type="button" class="btn btn-sm text-danger p-0" onclick="eliminarCuentaCaja(${index})"><i class="bi bi-x-circle fs-5"></i></button></td>
                </tr>
            `);
        });
        lblTotal.innerText = total.toLocaleString('es-PY');
    }

    function eliminarCuentaCaja(index) {
        cuentasApertura.splice(index, 1);
        actualizarTablaCaja();
    }

    function validarCaja() {
        if (cuentasApertura.length === 0) {
            alert("Debe agregar al menos una cuenta para abrir la caja.");
            return false;
        }
        return true;
    }
</script>

<!-- Modal CERRAR CAJA -->
<div class="modal fade" id="modalCerrar" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-4 border-0 shadow">
        <div class="modal-header bg-danger text-white">
            <h1 class="modal-title fs-5"><i class="bi bi-door-closed"></i> Cerrar Caja</h1>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <form id="formCerrar" method="POST">
            @csrf @method('PUT')
            <div class="modal-body p-4">
                <div class="form-floating mb-2">
                    <input type="number" class="form-control" name="monto_cierre" required>
                    <label>Monto Físico al Cierre (Gs.)</label>
                </div>
            </div>
            <div class="modal-footer border-0 pb-4 pe-4">
                <button type="submit" class="btn btn-danger rounded-pill px-4">Cerrar Caja</button>
            </div>
        </form>
    </div>
    </div>
</div>

<script>
    function abrirModalCerrar(id) {
        document.getElementById('formCerrar').action = "{{ url('/movimientos') }}/" + id;
        new bootstrap.Modal(document.getElementById('modalCerrar')).show();
    }
</script>
@endsection