@extends('layouts.app')

@php $cur = auth()->user()->company->currency ?? 'PEN'; @endphp
@section('title', 'Gastos')
@section('hi', 'Gastos')
@section('hi_sub', 'Finanzas')

@section('content')
    <div class="page-head">
        <div>
            <h1 class="page-title">Gastos</h1>
            <p class="page-sub">Registro de egresos del negocio.</p>
        </div>
        @if(auth()->user()->company_id)
            <button class="btn-primary" onclick="document.getElementById('expModal').classList.add('open')">@include('partials.icon', ['name' => 'plus', 'class' => 'ic-sm']) Nuevo gasto</button>
        @endif
    </div>

    <div class="stat-row" style="grid-template-columns:repeat(2,1fr)">
        <div class="stat"><span>Gastos del mes</span><b style="color:var(--bad)">{{ $cur }} {{ number_format($monthTotal, 2) }}</b></div>
        <div class="stat"><span>Registros</span><b>{{ $expenses->total() }}</b></div>
    </div>

    <div class="card table-card">
        <div class="toolbar">
            <form class="search" method="GET" action="{{ route('expenses.index') }}">
                @include('partials.icon', ['name' => 'search'])
                <input type="text" name="q" value="{{ $q }}" placeholder="Buscar por categoría o nota...">
            </form>
        </div>
        <table class="dt">
            <thead><tr><th>Fecha</th><th>Categoría</th><th>Nota</th><th>Registró</th><th>Monto</th><th style="text-align:right"></th></tr></thead>
            <tbody>
            @forelse($expenses as $e)
                <tr>
                    <td class="muted">{{ $e->spent_on->format('d/m/Y') }}</td>
                    <td><span class="badge badge-type">{{ $e->category }}</span></td>
                    <td>{{ $e->note ?: '—' }}</td>
                    <td class="muted">{{ $e->user->name ?? '—' }}</td>
                    <td class="strong">{{ $cur }} {{ number_format($e->amount, 2) }}</td>
                    <td style="text-align:right">
                        <form method="POST" action="{{ route('expenses.destroy', $e) }}" onsubmit="return confirm('¿Eliminar este gasto?')">
                            @csrf @method('DELETE')
                            <button class="btn-danger btn-icon" title="Eliminar">@include('partials.icon', ['name' => 'trash', 'class' => 'ic-sm'])</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6"><div class="empty">
                    @if(auth()->user()->company_id) No hay gastos registrados. @else Ingresa como usuario de una empresa para registrar gastos. @endif
                </div></td></tr>
            @endforelse
            </tbody>
        </table>
        @include('partials.pager', ['paginator' => $expenses])
    </div>

    <div class="modal" id="expModal">
        <div class="modal__box">
            <div class="modal__head"><h3>Nuevo gasto</h3><button class="modal__x" onclick="document.getElementById('expModal').classList.remove('open')">&times;</button></div>
            <div class="modal__body">
                <form method="POST" action="{{ route('expenses.store') }}">
                    @csrf
                    <div class="form-grid">
                        <div><label class="lbl">Categoría *</label>
                            <input class="inp" name="category" list="expCats" placeholder="Ej: Servicios" required>
                            <datalist id="expCats"><option>Servicios</option><option>Alquiler</option><option>Planilla</option><option>Publicidad</option><option>Suministros</option><option>Transporte</option><option>Otros</option></datalist>
                        </div>
                        <div><label class="lbl">Monto *</label><input class="inp" type="number" step="0.01" min="0.01" name="amount" required></div>
                        <div><label class="lbl">Fecha *</label><input class="inp" type="date" name="spent_on" value="{{ now()->format('Y-m-d') }}" required></div>
                        <div class="col-2"><label class="lbl">Nota</label><input class="inp" name="note" placeholder="Detalle del gasto"></div>
                    </div>
                    <div class="form-actions"><button type="button" class="btn-ghost" onclick="document.getElementById('expModal').classList.remove('open')">Cancelar</button><button class="btn-primary">Registrar gasto</button></div>
                </form>
            </div>
        </div>
    </div>
@endsection