@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Caja</strong></li>
    </ul>
    @if (session('message'))
        <div class="alert {{ session('alert') }} mb-3">
            {!! session('message') !!}
        </div>
    @endif
    @if (session('punto_venta_id'))
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // Llamada a la función al cargar la página
                procesarVentaCaja({{ session('punto_venta_id') }});
            });
        </script>
    @endif
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-0">Caja </h1>
        </div>
        <div class="col-md">
            <form class="row align-items-end justify-content-end form-registro form-enter" method="post" class="form-inline"
                id="form-caja" onsubmit="return formCaja(this.id, true)">
                <div class="col-auto form-group pl-0">
                    <label for="rut" class="d-block small mb-0">RUT:</label>
                    <input type="text" name="rut" id="rut" class="form-control form-control-sm"
                        placeholder="RUT Cliente">
                </div>
                <div class="col-auto form-group pl-0">
                    <input type="hidden" name="form-caja" value="1">
                    <input type="hidden" name="offset">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Buscar</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card list-caja">
        @include('dashboard.puntos-ventas.table-caja')
    </div>


@endsection

@section('scripts')
    <script>

        function agregarReferencia() {
            fetch('/dashboard/agregar-referencia', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        agregarReferencia: true
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw new Error(data.error || 'Error en la solicitud.');
                        });
                    }
                    return response.json(); // Parsear la respuesta JSON
                })
                .then(data => {

                    if (data.success) {
                        //alert(data.htmlReferencia)
                        var formReferencia = document.querySelector('.form-referencia');
                        // Agregar el HTML recibido directamente al final
                        formReferencia.insertAdjacentHTML('beforeend', data.htmlReferencia);

                    } else {
                        alert('Error: ' + (error || 'No se pudieron cargar los datos.'));
                    }

                    cerrarCargando();
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Ocurrió un error al procesar la solicitud. Por favor, inténtelo de nuevo.');
                    cerrarCargando();
                });

            return false; // Evitar envío convencional del formulario
        }
    </script>
@endsection