@extends('../layouts/partials/header')

@section('content')

    <div class="container mt-3">
        <br>
        <div class="card text-center">
            <div class="card-header">
                <!-- Nav Tabs -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ session('active_tab', 'tab1') == 'tab1' ? 'active' : '' }}" id="tab1-tab" data-bs-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Datos BKG</a>
                    </li>
                </ul>
            </div>

            <div class="card-header">
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade {{ session('active_tab', 'tab1') == 'tab1' ? 'show active' : '' }}" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
                        <div class="container">
                            <div class="row">
                                <div class="text-center">
                                    <strong>EDITAR SALIDAS BKG</strong><br><br>
                                </div>
                            </div>
                            <div class="row">
                                Los campos marcados con (*) son mandatorios.
                            </div>

                            <form action="{{ route('salidas_bkg.update', $registro->id) }}" method="POST" id="formCaptura">
                                @csrf
                                @method('PUT')

                                <br>
                                <div class="row">
                                    @if(session('success'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        <strong>OK! :</strong>{{ session('success') }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                    @endif

                                    @if ($errors->any())
                                        <div class="alert alert-danger">
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                </div>

                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="bkg" style="all: unset;"><strong>*BKG:</strong></label>
                                            <input type="text" id="bkg" name="bkg" value="{{ old('bkg', $registro->bkg) }}" class="form-control" maxlength="20" required autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="salidas_permitidas" style="all: unset;"><strong>*Salidas Permitidas:</strong></label>
                                            <input type="number" id="salidas_permitidas" name="salidas_permitidas" value="{{ old('salidas_permitidas', $registro->salidas_permitidas) }}" class="form-control" min="0" max="99" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-2">
                                    <div class="col-md-6" id="bkg-alert-container"></div>
                                </div>

                                <div class="row mt-3">
                                    <input type="hidden" name="active_tab" id="active_tab" value="{{ old('active_tab', session('active_tab', 'tab1')) }}">
                                    <div class="d-flex gap-2">
                                        <button type="submit" class="btn btn-primary btn-sm" id="btn-guardar">Guardar</button>
                                        <a href="{{ route('salidas_bkg.index') }}" class="btn btn-secondary btn-sm">Volver al listado</a>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Capturar el cambio de pestaña
            const tabs = document.querySelectorAll('a[data-bs-toggle="tab"]');
            tabs.forEach(tab => {
                tab.addEventListener('shown.bs.tab', function (e) {
                    document.getElementById('active_tab').value = e.target.getAttribute('href').substring(1);
                });
            });

            // Activar la pestaña correcta al cargar la página
            const activeTab = '{{ old('active_tab', session('active_tab', 'tab1')) }}';
            const tabElement = document.querySelector(`a[href="#${activeTab}"]`);
            if (tabElement) {
                const tabInstance = new bootstrap.Tab(tabElement);
                tabInstance.show();
            }

            // Verificar BKG duplicado en tiempo real (excluyendo el registro actual)
            const bkgInput = document.getElementById('bkg');
            const alertContainer = document.getElementById('bkg-alert-container');
            const btnGuardar = document.getElementById('btn-guardar');
            const registroId = {{ $registro->id }};
            const bkgOriginal = '{{ $registro->bkg }}';

            bkgInput.addEventListener('blur', function () {
                const bkg = this.value.trim().toUpperCase();
                if (!bkg || bkg === bkgOriginal) {
                    alertContainer.innerHTML = '';
                    btnGuardar.disabled = false;
                    return;
                }

                fetch(`{{ route('salidas_bkg.check_bkg') }}?bkg=${encodeURIComponent(bkg)}&exclude_id=${registroId}`)
                    .then(r => r.json())
                    .then(data => {
                        if (data.exists) {
                            alertContainer.innerHTML =
                                `<div class="alert alert-warning alert-dismissible fade show py-2" role="alert">
                                    <strong><i class="fas fa-exclamation-triangle"></i> BKG duplicado:</strong>
                                    Este BKG ya está registrado con <strong>${data.salidas_permitidas}</strong> salidas permitidas.
                                    No es posible guardarlo nuevamente.
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>`;
                            btnGuardar.disabled = true;
                        } else {
                            alertContainer.innerHTML = '';
                            btnGuardar.disabled = false;
                        }
                    })
                    .catch(() => {
                        alertContainer.innerHTML = '';
                        btnGuardar.disabled = false;
                    });
            });

            // Re-habilitar el botón si el usuario limpia el campo
            bkgInput.addEventListener('input', function () {
                const bkg = this.value.trim().toUpperCase();
                if (!bkg || bkg === bkgOriginal) {
                    alertContainer.innerHTML = '';
                    btnGuardar.disabled = false;
                }
            });
        });
    </script>

@endsection

@extends('../layouts/partials/footer')