@extends('layouts.cashier')

@section('page_title', 'Apertura de Caja')

@push('styles')
<style>
    .apertura-container {
        max-width: 500px;
        margin: 40px auto;
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        padding: 40px;
        text-align: center;
    }

    .apertura-icon {
        width: 80px;
        height: 80px;
        background: rgba(226, 28, 33, 0.1);
        color: var(--brand-red);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
    }

    .apertura-icon svg {
        width: 40px;
        height: 40px;
    }

    .apertura-title {
        font-size: 24px;
        font-weight: 900;
        color: var(--brand-black);
        margin-bottom: 10px;
    }

    .apertura-subtitle {
        color: var(--text-muted);
        font-size: 15px;
        margin-bottom: 30px;
        line-height: 1.5;
    }

    .input-group {
        text-align: left;
        margin-bottom: 25px;
    }

    .input-group label {
        display: block;
        font-size: 14px;
        font-weight: 800;
        color: var(--brand-black);
        margin-bottom: 8px;
    }

    .monto-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .monto-prefix {
        position: absolute;
        left: 20px;
        font-size: 20px;
        font-weight: 800;
        color: var(--brand-black);
    }

    .monto-input {
        width: 100%;
        padding: 20px 20px 20px 50px;
        font-size: 24px;
        font-weight: 900;
        color: var(--brand-red);
        border: 2px solid #cbd5e1;
        border-radius: 15px;
        background: #f8fafc;
        transition: 0.3s;
    }

    .monto-input:focus {
        outline: none;
        border-color: var(--brand-red);
        background: white;
        box-shadow: 0 0 0 4px rgba(226, 28, 33, 0.1);
    }

    .btn-abrir {
        width: 100%;
        padding: 18px;
        background: linear-gradient(to right, var(--brand-red), var(--brand-dark-red));
        color: white;
        font-size: 18px;
        font-weight: 800;
        border: none;
        border-radius: 15px;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 6px 20px rgba(226, 28, 33, 0.3);
    }

    .btn-abrir:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(226, 28, 33, 0.4);
    }

    .btn-abrir:disabled {
        background: #cbd5e1;
        box-shadow: none;
        cursor: not-allowed;
        transform: none;
    }
</style>
@endpush

@section('cashier_content')
    <div class="apertura-container">
        <div class="apertura-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
        </div>
        <h2 class="apertura-title">Apertura de Turno</h2>
        <p class="apertura-subtitle">Para comenzar a cobrar pedidos, ingresa el monto inicial (sencillo) con el que inicia tu caja.</p>

        <div class="input-group">
            <label>Monto Inicial en Efectivo (S/)</label>
            <div class="monto-input-wrapper">
                <span class="monto-prefix">S/</span>
                <input type="number" id="monto-inicial" class="monto-input" placeholder="0.00" step="0.10" min="0">
            </div>
        </div>

        <button id="btn-abrir-caja" class="btn-abrir" onclick="abrirCaja()">
            ABRIR CAJA
        </button>
    </div>
@endsection

@push('scripts')
<script>
    // Ocultar el badge superior porque aún no hay caja
    document.addEventListener('DOMContentLoaded', () => {
        const badge = document.getElementById('caja-status-badge');
        if (badge) {
            badge.style.display = 'none';
        }
    });

    async function abrirCaja() {
        const montoInput = document.getElementById('monto-inicial').value;
        const btn = document.getElementById('btn-abrir-caja');
        
        if (!montoInput || isNaN(montoInput) || parseFloat(montoInput) < 0) {
            Swal.fire('Atención', 'Por favor ingresa un monto válido mayor o igual a 0', 'warning');
            return;
        }

        const userStr = localStorage.getItem('auth_user');
        const token = localStorage.getItem('auth_token');

        if (!userStr || !token) {
            Swal.fire('Error', 'Sesión inválida, por favor inicia sesión nuevamente.', 'error');
            return;
        }

        const user = JSON.parse(userStr);

        try {
            btn.disabled = true;
            btn.innerText = 'Abriendo...';

            // Llamada al API real del backend PiterDB
            // Asumimos que la API está en el mismo dominio o tenemos que extraerla
            // Para `vistas_piter`, usamos rutas relativas de API si proxy, o full domain.
            // Usaremos /api/caja/Abrir si estamos en el mismo servidor de sistema_piter.
            const response = await fetch('/api/caja/Abrir', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + token
                },
                body: JSON.stringify({
                    usuario_id: user.id,
                    monto_inicial: parseFloat(montoInput)
                })
            });

            const bodyText = await response.text();
            let data = {};
            try {
                data = JSON.parse(bodyText);
            } catch(e) {
                throw new Error("El servidor no devolvió JSON válido.");
            }

            if (response.ok) {
                // Éxito: Guardar en localStorage
                const cajaId = data.data.id;
                const montoInicial = data.data.monto_inicial;
                
                localStorage.setItem('active_caja_id', cajaId);
                localStorage.setItem('active_caja_monto_inicial', montoInicial);

                Swal.fire({
                    title: '¡Caja Abierta!',
                    text: 'El turno se ha iniciado correctamente.',
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.href = '/cashier/dashboard';
                });
            } else {
                throw new Error(data.message || 'No se pudo abrir la caja.');
            }

        } catch (error) {
            console.error('Error abriendo caja:', error);
            Swal.fire('Error', error.message, 'error');
            btn.disabled = false;
            btn.innerText = 'ABRIR CAJA';
        }
    }
</script>
@endpush