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

@section('content')

    <style>
        table {
            width: 100%; /* Ocupa el 100% del ancho del contenedor */
            border-collapse: collapse; /* Opcional: para eliminar el espacio entre bordes de celdas */
        }
        .img-custom-size {
            width: 444px;
            height: 300px;
            border: 3px solid black; border-radius: 15px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        }
        .table td {
            text-align: left;
        }

    </style>

    <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 {{ old('active_tab',session('active_tab', 'tab2')) == 'tab2' ? 'active' : '' }}" id="tab2-tab" data-bs-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="true">Nuevo Registro</a>
                    </li>

                </ul>
            </div>

            <div class="card-header">
                <div class="tab-content" id="myTabContent">

                    <div class="tab-pane fade {{ old('active_tab',session('active_tab', 'tab2')) == 'tab2' ? 'show active' : '' }}" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
                        <div class="container">
                            <div class="row">

                            </div>
                            <div class="row">
                                <div class="text-center">
                                    <h5>TABLERO DE CONTROL</h5><br>
                                </div>
                            </div>
                            <div class="row">
                                Los campos marcados con (*) son mandatorios.
                            </div>


                            <form action="{{ route('tablero.store') }}" method="POST" id="formCaptura">
                                @csrf

                                <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="cliente" style="all: unset;"><strong>Cliente:</strong></label>
                                            <input type="text" id="cliente" name="cliente" value="{{ old('cliente') }}" class="form-control" maxlength="10">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="bl" style="all: unset;"><strong>BL:</strong></label>
                                            <input type="text" id="bl" name="bl" value="{{ old('bl') }}" class="form-control" maxlength="20">
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="contenedor" style="all: unset;"><strong>Contenedor:</strong></label>
                                            <input type="text" id="contenedor" name="contenedor" value="{{ old('contenedor') }}" class="form-control" maxlength="15">
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="aduana" style="all: unset;"><strong>*Aduana:</strong></label>
                                            <input type="text" id="aduana" name="aduana" value="{{ old('aduana') }}" class="form-control" maxlength="5" required>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="eta" style="all: unset;"><strong>*ETA:</strong></label>
                                            <input type="date" id="eta" name="eta" value="{{ old('eta', date('Y-m-d')) }}" class="form-control" required>
                                        </div>
                                    </div>

                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="recinto" style="all: unset;"><strong>Recinto:</strong></label>
                                            <select id="recinto" name="recinto" class="form-select">
                                                <option value="" {{ old('recinto') == '' ? 'selected' : '' }}>-</option>
                                                <option value="APM" {{ old('recinto') == 'APM' ? 'selected' : '' }}>APM</option>
                                                <option value="LCT" {{ old('recinto') == 'LCT' ? 'selected' : '' }}>LCT</option>
                                                <option value="Contecon" {{ old('recinto') == 'Contecon' ? 'selected' : '' }}>Contecon</option>
                                                <option value="Timsa" {{ old('recinto') == 'Timsa' ? 'selected' : '' }}>Timsa</option>
                                                <option value="SSA" {{ old('recinto') == 'SSA' ? 'selected' : '' }}>SSA</option>
                                            </select>
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 text-start">
                                        <div class="form-group">
                                            <label for="mercancia" style="all: unset;"><strong>Mercancía:</strong></label>
                                            <input type="text" id="mercancia" name="mercancia" value="{{ old('mercancia') }}" class="form-control" maxlength="200">
                                        </div>
                                    </div>

                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="tipo_de_mercancias" style="all: unset;"><strong>Tipo de Mercancias:</strong></label>
                                            <select id="tipo_de_mercancias" name="tipo_de_mercancias" class="form-select">
                                                <option value="Generico" {{ old('tipo_de_mercancias') == 'Generico' ? 'selected' : '' }}>Generico</option>
                                                <option value="Marca" {{ old('tipo_de_mercancias') == 'Marca' ? 'selected' : '' }}>Marca</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="patente" style="all: unset;"><strong>Patente:</strong></label>
                                            <input type="text" id="patente" name="patente" value="{{ old('patente') }}" class="form-control" maxlength="10">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">                                 
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="naviera_gastos_local" style="all: unset;"><strong>Naviera Gastos Local:</strong></label>
                                            <input type="text"id="naviera_gastos_local" name="naviera_gastos_local" value="{{ old('naviera_gastos_local') }}" class="form-control" maxlength="10">
                                        </div>
                                    </div>
                                
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="naviera_garantia" style="all: unset;"><strong>Naviera Garantía:</strong></label>
                                            <input type="text" id="naviera_garantia" name="naviera_garantia" value="{{ old('naviera_garantia') }}" class="form-control" maxlength="10">
                                        </div>
                                    </div>

                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="revalidacion" style="all: unset;"><strong>Revalidación:</strong></label>
                                            <input type="date" id="revalidacion" name="revalidacion" value="{{ old('revalidacion') }}" class="form-control">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="maniobra_almacenaje" style="all: unset;"><strong>Maniobra Almacenaje:</strong></label>
                                            <input type="text" id="maniobra_almacenaje" name="maniobra_almacenaje" value="{{ old('maniobra_almacenaje') }}" class="form-control" maxlength="10">
                                        </div>
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="demoras" style="all: unset;"><strong>Demoras:</strong></label>
                                            <input type="text" id="demoras" name="demoras" value="{{ old('demoras') }}" class="form-control" maxlength="10">
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="pago_pedimento" style="all: unset;"><strong>Pago Pedimento:</strong></label>
                                            <input type="date" id="pago_pedimento" name="pago_pedimento" value="{{ old('pago_pedimento') }}" class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="pedimento" style="all: unset;"><strong>Pedimento:</strong></label>
                                            <input type="text" id="pedimento" name="pedimento" value="{{ old('pedimento') }}" class="form-control" maxlength="10">
                                        </div>
                                    </div>
                                                                        
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="cita_despacho" style="all: unset;"><strong>Cita Despacho:</strong></label>
                                            <input type="datetime-local" id="cita_despacho" name="cita_despacho" value="{{ old('cita_despacho') }}" class="form-control">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="modulacion" style="all: unset;"><strong>Modulación:</strong></label>
                                            <input type="date" id="modulacion" name="modulacion" value="{{ old('modulacion') }}" class="form-control" maxlength="20">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">                            
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="semaforo" style="all: unset;"><strong>Semáforo:</strong></label>                                            /
                                            <select id="semaforo" name="semaforo" class="form-select">
                                                <option value="-" {{ old('semaforo') == '-' ? 'selected' : '' }}>-</option>
                                                <option value="Rojo" {{ old('semaforo') == 'Rojo' ? 'selected' : '' }}>Rojo</option>
                                                <option value="Amarillo" {{ old('semaforo') == 'Amarillo' ? 'selected' : '' }}>Amarillo</option>
                                                <option value="Verde" {{ old('semaforo') == 'Verde' ? 'selected' : '' }}>Verde</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="transporte" style="all: unset;"><strong>Transporte:</strong></label>
                                            <input type="text" id="transporte" name="transporte" value="{{ old('transporte') }}" class="form-control" maxlength="100">
                                        </div>
                                    </div>

                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="burreo" style="all: unset;"><strong>Burreo:</strong></label>
                                            <select id="burreo" name="burreo" class="form-select">
                                                <option value="" {{ old('burreo') == '' ? 'selected' : '' }}>-</option>
                                                <option value="Sí" {{ old('burreo') == 'Sí' ? 'selected' : '' }}>Sí</option>
                                                <option value="No" {{ old('burreo') == 'No' ? 'selected' : '' }}>No</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="custodia" style="all: unset;"><strong>Custodia:</strong></label>
                                            <input type="text" id="custodia" name="custodia" value="{{ old('custodia') }}" class="form-control" maxlength="20">
                                        </div>
                                    </div>  
                                </div>

                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="regreso_vacio" style="all: unset;"><strong>Regreso Vacío:</strong></label>
                                            <input type="date" id="regreso_vacio" name="regreso_vacio" value="{{ old('regreso_vacio') }}" class="form-control">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="eir" style="all: unset;"><strong>EIR:</strong></label>
                                            <input type="datetime-local" id="eir" name="eir" value="{{ old('eir') }}" class="form-control"  maxlength="10">
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="dev_garantia" style="all: unset;"><strong>Dev. Garantía:</strong></label>
                                            <input type="date" id="dev_garantia" name="dev_garantia" value="{{ old('dev_garantia') }}" class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="atendido" style="all: unset;"><strong>Atendido:</strong></label>
                                            <select id="atendido" name="atendido" class="form-select">
                                                <option value="0" {{ old('atendido', '0') == '0' ? 'selected' : '' }}>No</option>
                                                <option value="1" {{ old('atendido') == '1' ? 'selected' : '' }}>Sí</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                        <input type="hidden" name="active_tab" id="active_tab" value="{{ old('active_tab',session('active_tab', 'tab2')) }}">
                                        <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
                                </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) {
                // Guardar el id de la pestaña activa en el input oculto
                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();
        }
        });

    </script>


@endsection


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