@extends('layouts.pos')

@section('content')
    <div class="container mt-4">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0"><i class="fas fa-cash-register me-2"></i>Gestión de Caja</h4>
                    </div>
                    <div class="card-body">

                        @if(!$caja || $caja->estado == 'cerrada')
                            <div class="text-center py-5">
                                <h3 class="text-muted mb-4">La caja está cerrada</h3>
                                <form action="{{ route('caja.open') }}" method="POST">
                                    @csrf
                                    <div class="form-group mb-3">
                                        <label class="form-label">Monto Inicial (€)</label>
                                        <input type="number" step="0.01" name="monto_inicial"
                                            class="form-control form-control-lg text-center mx-auto" style="max-width: 200px;"
                                            required>
                                    </div>
                                    <button type="submit" class="btn btn-success btn-lg px-5">
                                        <i class="fas fa-key me-2"></i>ABRIR CAJA
                                    </button>
                                </form>
                            </div>
                        @else
                            <!-- Caja Abierta -->
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="card bg-light h-100">
                                        <div class="card-body">
                                            <h5 class="card-title text-primary">Estado Actual</h5>
                                            <hr>
                                            <p class="mb-1"><strong>Apertura:</strong>
                                                {{ $caja->fecha_apertura->format('H:i d/m/Y') }}</p>
                                            <p class="mb-1"><strong>Cajera:</strong> {{ $caja->nombre_cajera }}</p>
                                            <p class="mb-1"><strong>Base Inicial:</strong>
                                                {{ number_format($caja->monto_inicial, 2) }} €</p>

                                            @php
                                                $totales = app(App\Services\CajaService::class)->calcularTotales($caja);
                                            @endphp

                                            <div class="mt-3">
                                                <div class="d-flex justify-content-between">
                                                    <span>Efectivo:</span>
                                                    <span
                                                        class="fw-bold text-success">{{ number_format($totales['efectivo'], 2) }}
                                                        €</span>
                                                </div>
                                                <div class="d-flex justify-content-between">
                                                    <span>Tarjeta:</span>
                                                    <span class="fw-bold text-info">{{ number_format($totales['tarjeta'], 2) }}
                                                        €</span>
                                                </div>
                                                <div class="d-flex justify-content-between">
                                                    <span>Bizum:</span>
                                                    <span class="fw-bold text-warning">{{ number_format($totales['bizum'], 2) }}
                                                        €</span>
                                                </div>
                                                <div class="d-flex justify-content-between text-danger mt-2 border-top pt-2">
                                                    <span>Gastos:</span>
                                                    <span class="fw-bold">-{{ number_format($totales['gastos'], 2) }} €</span>
                                                </div>
                                                <div
                                                    class="d-flex justify-content-between mt-2 pt-2 border-top bg-white p-2 rounded">
                                                    <span class="h5 mb-0">Esperado en Caja:</span>
                                                    <span
                                                        class="h5 mb-0 text-dark">{{ number_format($totales['esperado_efectivo'], 2) }}
                                                        €</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    <div class="card h-100 border-danger">
                                        <div class="card-header bg-danger text-white">Registrar Gasto (Salida)</div>
                                        <div class="card-body">
                                            <form action="{{ route('caja.gasto', $caja->id) }}" method="POST">
                                                @csrf
                                                <div class="mb-3">
                                                    <label>Concepto</label>
                                                    <input type="text" name="concepto" class="form-control" required
                                                        placeholder="Ej: Hielo, Cambio...">
                                                </div>
                                                <div class="mb-3">
                                                    <label>Monto</label>
                                                    <input type="number" step="0.01" name="monto" class="form-control" required>
                                                </div>
                                                <button type="submit" class="btn btn-outline-danger w-100">Registrar
                                                    Salida</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center mt-4">
                                <button class="btn btn-danger btn-lg w-100 p-3" data-bs-toggle="modal"
                                    data-bs-target="#modalCierre">
                                    <i class="fas fa-lock me-2"></i>CERRAR CAJA
                                </button>
                            </div>

                            <!-- Modal Cierre -->
                            <div class="modal fade" id="modalCierre" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header bg-danger text-white">
                                            <h5 class="modal-title">Confirmar Cierre de Caja</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <form action="{{ route('caja.close', $caja->id) }}" method="POST">
                                            @csrf
                                            <div class="modal-body">
                                                <div class="alert alert-warning">
                                                    Verifica que el dinero en efectivo coincida con el esperado:
                                                    <strong>{{ number_format($totales['esperado_efectivo'], 2) }} €</strong>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Dinero REAL en efectivo contado:</label>
                                                    <input type="number" step="0.01" name="monto_final"
                                                        class="form-control form-control-lg text-center" required
                                                        value="{{ $totales['esperado_efectivo'] }}">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Cancelar</button>
                                                <button type="submit" class="btn btn-danger">Confirmar Cierre</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection