@extends('layouts.admin')

@section('title', 'Accesos Famesa')

@section('content_header')
<div class="d-flex justify-content-between align-items-center">
    <h1>Accesos Personal Famesa</h1>
    <a href="{{ route('guardia.famesa.dashboard') }}" class="btn btn-info">
        <i class="fas fa-home me-1"></i> Volver al Dashboard
    </a>
</div>
@endsection

@section('content')

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="mb-3">
    <a href="{{ route('guardia.famesa.accesos.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Nuevo acceso
    </a>

    @can('ver-acceso')
        <a href="{{ route('guardia.famesa.accesos.informe') }}" class="btn btn-primary">
            <i class="fas fa-file-alt"></i> Crear Informe
        </a>
    @endcan
</div>

<form method="GET" action="{{ route('guardia.famesa.accesos.index') }}" class="mb-3">
    <div class="row">
        <div class="col-md-3">
            <input type="date" name="fecha_dia" class="form-control" value="{{ request('fecha_dia') }}">
        </div>
        <div class="col-md-3">
            <input type="month" name="fecha_mes" class="form-control" value="{{ request('fecha_mes') }}">
        </div>
        <div class="col-md-3 d-flex">
            <button class="btn btn-primary me-2">
                <i class="fas fa-search"></i> Buscar
            </button>
            <a href="{{ route('guardia.famesa.accesos.index') }}" class="btn btn-secondary">Limpiar</a>
        </div>
    </div>
</form>

<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Fecha Ingreso</th>
            <th>Hora Ingreso</th>
            <th>Fecha Salida</th>
            <th>Hora Salida</th>
            <th>Nombre</th>
            <th>RUT</th>
            <th>Patente</th>
            <th>Guía Libre Tránsito</th>
            <th>Autorización Comprar</th>
            <th>Guía Despacho</th>
            <th>Manipulador</th>
            <th>Autorizado</th>
            <th>Salida</th>
        </tr>
    </thead>
    <tbody>
        @forelse($accesos as $acceso)
            <tr>
                <td>{{ \Carbon\Carbon::parse($acceso->fecha_ingreso)->format('d/m/Y') }}</td>
                <td>{{ \Carbon\Carbon::parse($acceso->hora_ingreso)->format('H:i') }}</td>

                @if($acceso->fecha_salida !== '0000-00-00')
                    <td class="fecha_salida">{{ \Carbon\Carbon::parse($acceso->fecha_salida)->format('d/m/Y') }}</td>
                    <td>{{ \Carbon\Carbon::parse($acceso->hora_salida)->format('H:i') }}</td>
                @else
                    <td class="fecha_salida">0000-00-00</td>
                    <td></td>
                @endif

                <td>{{ $acceso->nombre }}</td>
                <td>{{ $acceso->rut }}</td>
                <td>{{ $acceso->patente }}</td>
                <td>{{ $acceso->guia_libre_transito }}</td>
                <td>{{ $acceso->autorizacion_comprar }}</td>
                <td>{{ $acceso->guia_despacho }}</td>
                <td>{{ $acceso->manipulador_explosivo }}</td>
                <td>{{ $acceso->autorizado }}</td>

                <td>
                    <form method="POST" action="{{ route('guardia.famesa.accesos.update_salida', $acceso) }}">
                        @csrf
                        <input type="hidden" name="id_comercio" value="{{ $acceso->id_comercio }}">
                        <input type="hidden" name="id_sucursal" value="{{ $acceso->id_sucursal }}">
                        <input type="hidden" name="id_usuario" value="{{ $acceso->id_usuario }}">

                        <button
                            type="button"
                            class="btn btn-success btnMarcarSalida"
                            data-guia-despacho="{{ $acceso->guia_despacho ?? '' }}"
                            data-autorizacion-comprar="{{ $acceso->autorizacion_comprar ?? '' }}"
                            data-guia-libre="{{ $acceso->guia_libre_transito ?? '' }}"
                        >
                            Marcar Salida
                        </button>
                    </form>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="13" class="text-center text-muted">No hay accesos registrados.</td>
            </tr>
        @endforelse
    </tbody>
</table>

{{ $accesos->links() }}

@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.btnMarcarSalida').forEach(function (btn) {
        const fila = btn.closest('tr');
        const fechaSalida = fila.querySelector('.fecha_salida')?.textContent.trim();

        if (fechaSalida !== '0000-00-00') {
            btn.disabled = true;
            return;
        }

        btn.addEventListener('click', function (e) {
            e.preventDefault();
            const boton = this;

            Swal.fire({
                title: '¿Confirmar salida?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí, marcar salida',
                cancelButtonText: 'Cancelar',
                html: `<div id="swalCampos" class="text-start"></div>`,
                didOpen: () => {
                    const c = document.getElementById('swalCampos');

                    const despacho = (boton.getAttribute('data-guia-despacho') || '').trim();
                    const autoComp = (boton.getAttribute('data-autorizacion-comprar') || '').trim();
                    const libre    = (boton.getAttribute('data-guia-libre') || '').trim();

                    c.innerHTML = `
                        <label class="w-100">Guía de Despacho</label>
                        <input id="swal_guia_despacho" class="swal2-input" placeholder="Ej: 123456">

                        <label class="w-100 mt-2">Autorización para Comprar</label>
                        <input id="swal_autorizacion_comprar" class="swal2-input" placeholder="Ej: 123456">

                        <label class="w-100 mt-2">Guía Libre Tránsito</label>
                        <input id="swal_guia_libre_transito" class="swal2-input" inputmode="numeric" placeholder="Ej: 98765">
                    `;

                    document.getElementById('swal_guia_despacho').value = despacho;
                    document.getElementById('swal_autorizacion_comprar').value = autoComp;
                    document.getElementById('swal_guia_libre_transito').value = libre;
                },
                preConfirm: () => {
                    const gd  = document.getElementById('swal_guia_despacho').value.trim();
                    const ac  = document.getElementById('swal_autorizacion_comprar').value.trim();
                    const glt = document.getElementById('swal_guia_libre_transito').value.trim();

                    if (!gd) {
                        Swal.showValidationMessage('La guía de despacho es obligatoria');
                        return false;
                    }

                    if (glt && !/^\d+$/.test(glt)) {
                        Swal.showValidationMessage('Guía libre tránsito debe ser numérica');
                        return false;
                    }

                    return { gd, ac, glt };
                }
            }).then((result) => {
                if (!result.isConfirmed) return;

                const form = boton.closest('form');

                const setHidden = (name, val) => {
                    let input = form.querySelector(`input[name="${name}"]`);
                    if (!input) {
                        input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = name;
                        form.appendChild(input);
                    }
                    input.value = val ?? '';
                };

                setHidden('guia_despacho', result.value.gd);
                setHidden('autorizacion_comprar', result.value.ac);
                setHidden('guia_libre_transito', result.value.glt);

                form.submit();
            });
        });
    });
});
</script>
@endsection