@extends('layouts.app')
@section('titulo', 'Movimientos de Caja')

@section('contenido')

<style>
/* Estilos principales para replicar el diseño de los otros módulos */
.table-premium {
    border-collapse: collapse;
    width: 100%;
}

.table-premium thead {
    background: #f8fafc;
    text-transform: uppercase;
    font-size: .7rem;
    color: #64748b;
    letter-spacing: 0.05em;
}

.table-premium thead th {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    text-align: left;
}

.table-premium tbody td {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    vertical-align: middle;
}

.table-premium tbody tr:hover {
    background: #f8fafc;
}

/* Estilos para el contenedor de la tabla */
.table-container {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Header */
.header-section {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    margin-bottom: 20px;
}

.header-icon {
    width: 36px;
    height: 36px;
    background: #dbeafe;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
}

.header-icon svg {
    width: 18px;
    height: 18px;
}

/* Cards */
.card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* KPI Cards */
.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.kpi-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.kpi-card .kpi-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #94a3b8;
}

.kpi-card .kpi-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 4px;
}

.kpi-card .kpi-value.green {
    color: #059669;
}

.kpi-card .kpi-value.red {
    color: #dc2626;
}

/* Formulario */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    margin-bottom: 4px;
}

.form-label .required {
    color: #ef4444;
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #fafbfc;
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #2563eb;
    background: white;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.form-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #fafbfc;
    color: #1e293b;
    transition: all 0.2s ease;
}

.form-select:focus {
    outline: none;
    border-color: #2563eb;
    background: white;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.btn-primary {
    width: 100%;
    padding: 10px 16px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background: #f8fafc;
}

/* Badges de tipo */
.type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.type-badge.income {
    background: #dcfce7;
    color: #166534;
}

.type-badge.expense {
    background: #fee2e2;
    color: #991b1b;
}

.type-badge.sale {
    background: #dbeafe;
    color: #1e40af;
}

/* Monto */
.monto-income {
    color: #059669;
}

.monto-expense {
    color: #dc2626;
}

/* Paginación */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.8rem;
    color: #64748b;
}

.breadcrumb {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-bottom: 2px;
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.empty-state .empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.empty-state .empty-icon svg {
    width: 24px;
    height: 24px;
}

/* Anchos fijos para las columnas */
.col-fecha { width: 15%; }
.col-concepto { width: 30%; }
.col-usuario { width: 18%; }
.col-tipo { width: 15%; }
.col-monto { width: 22%; }
</style>

<div class="max-w-[1650px] mx-auto space-y-4 px-4 sm:px-6">

    {{-- HEADER --}}
    <div class="header-section">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <div class="breadcrumb">Comercio & Ventas / Gestión de Caja</div>
                <div class="flex items-center gap-3 mt-1">
                    <div class="header-icon">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/>
                        </svg>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-slate-800">Movimientos de Caja</h1>
                    </div>
                </div>
            </div>
            <a href="{{ route('caja.index') }}" class="btn-outline">← Apertura / Cierre</a>
        </div>
    </div>

    @if (! $sesion)
        <div class="card text-center">
            <p class="text-slate-500">No hay una caja abierta.</p>
            <a href="{{ route('caja.index') }}" class="inline-block mt-3 rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Abrir caja</a>
        </div>
    @else
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {{-- Registrar movimiento --}}
            <div class="card self-start">
                <h3 class="font-semibold text-slate-700 mb-4">Registrar movimiento</h3>
                <form method="POST" action="{{ route('caja.movimientos.store') }}" class="space-y-4">
                    @csrf
                    <div>
                        <label class="form-label">Tipo</label>
                        <select name="tipo" class="form-select">
                            <option value="ingreso">Ingreso (+)</option>
                            <option value="egreso">Egreso (−)</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Concepto <span class="required">*</span></label>
                        <input type="text" name="concepto" value="{{ old('concepto') }}" required
                               placeholder="Pago a proveedor, gasto, retiro…" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Monto (S/) <span class="required">*</span></label>
                        <input type="number" step="0.01" min="0.01" name="monto" value="{{ old('monto') }}" required class="form-input">
                    </div>
                    <button type="submit" class="btn-primary">Registrar</button>
                </form>
            </div>

            {{-- Resumen + tabla --}}
            <div class="lg:col-span-2 space-y-4">
                <div class="kpi-grid">
                    <div class="kpi-card">
                        <p class="kpi-label">Ingresos</p>
                        <p class="kpi-value green">S/ {{ number_format($resumen['ingresos'], 2) }}</p>
                    </div>
                    <div class="kpi-card">
                        <p class="kpi-label">Egresos</p>
                        <p class="kpi-value red">S/ {{ number_format($resumen['egresos'], 2) }}</p>
                    </div>
                    <div class="kpi-card">
                        <p class="kpi-label">Esperado en caja</p>
                        <p class="kpi-value">S/ {{ number_format($resumen['esperado'], 2) }}</p>
                    </div>
                </div>

                <div class="table-container">
                    <div class="overflow-x-auto">
                        <table class="table-premium">
                            <thead>
                                <tr>
                                    <th class="col-fecha">FECHA</th>
                                    <th class="col-concepto">CONCEPTO</th>
                                    <th class="col-usuario">USUARIO</th>
                                    <th class="col-tipo text-center">TIPO</th>
                                    <th class="col-monto text-right">MONTO</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($movimientos as $m)
                                    @php
                                        // Detectar si el concepto contiene "Venta"
                                        $esVenta = stripos($m->concepto, 'Venta') !== false;
                                    @endphp

                                    <tr class="hover:bg-slate-50/60">
                                        <td class="col-fecha text-slate-500">
                                            {{ $m->created_at->format('d/m/Y H:i') }}
                                        </td>
                                        <td class="col-concepto text-slate-700">
                                            {{ $m->concepto }}
                                        </td>
                                        <td class="col-usuario text-slate-500">
                                            {{ $m->usuario?->name ?? '—' }}
                                        </td>
                                        <td class="col-tipo text-center">
                                            @if ($esVenta)
                                                <span class="type-badge sale">VENTA</span>
                                            @elseif ($m->tipo === 'ingreso')
                                                <span class="type-badge income">Ingreso</span>
                                            @else
                                                <span class="type-badge expense">Egreso</span>
                                            @endif
                                        </td>
                                        <td class="col-monto text-right font-semibold 
                                            {{ $m->tipo === 'ingreso' ? 'monto-income' : 'monto-expense' }}">
                                            {{ $m->tipo === 'ingreso' ? '+' : '−' }} S/ {{ number_format($m->monto, 2) }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="py-8">
                                            <div class="empty-state">
                                                <div class="empty-icon">
                                                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/>
                                                    </svg>
                                                </div>
                                                <p class="font-medium text-slate-500">Sin movimientos en esta sesión.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if ($movimientos instanceof \Illuminate\Pagination\LengthAwarePaginator && $movimientos->hasPages())
                        <div class="pagination-bar">
                            <div class="flex items-center gap-3">
                                <span>Mostrando {{ $movimientos->firstItem() ?? 0 }} a {{ $movimientos->lastItem() ?? 0 }} de {{ $movimientos->total() }} registros</span>
                                <select onchange="window.location.href = this.value" class="form-select" style="width:auto;padding:4px 8px;font-size:0.8rem;">
                                    @foreach([10, 25, 50, 100] as $perPage)
                                        <option value="{{ request()->fullUrlWithQuery(['per_page' => $perPage]) }}"
                                                @selected(request('per_page', 10) == $perPage)>
                                            {{ $perPage }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                {{ $movimientos->links() }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif
</div>
@endsection