{{-- @extends('../layouts/partials/header') --}}

@extends('layouts.partials.header')

@section('content')

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    .img-custom-size {
        width: 300px;
        height: 150px;
        border: 2px 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">

        <!-- NAV TABS -->
        <div class="card-header">
            <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">
                        Solicitud Maniobra
                    </a>
                </li>

                <li class="nav-item" role="presentation">
                    <a class="nav-link {{ session('active_tab') == 'tab2' ? 'active' : '' }}"
                       id="tab2-tab" data-bs-toggle="tab" href="#tab2" role="tab">
                        Contenedores
                    </a>
                </li>

            </ul>
        </div>

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

                <!-- ========================================================= -->
                <!-- ======================= TAB 1 ============================ -->
                <!-- ========================================================= -->

                <div class="tab-pane fade {{ session('active_tab','tab1') == 'tab1' ? 'show active' : '' }}"
                     id="tab1" role="tabpanel">

                    <div class="container">

                        <div class="row">
                            <div class="text-center">
                                <strong>SOLICITUD BMW</strong><br><br>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 text-start">
                                <div class="form-group">
                                    Los campos marcados con (*) son mandatorios.<br>
                                </div>
                            </div>
                        </div>

                        <!-- MENSAJES -->
                        <div class="row">
                            @if(session('error'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <strong>ERROR:</strong> {{ session('error') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            @if(session('warning'))
                                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                    <strong>AVISO:</strong> {{ session('warning') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif
                            @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"></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>

                        <!-- CAMPOS SOLO LECTURA -->
                        <div class="row">

                            <div class="col-md-2">
                                <label class="fw-bold">*Fecha:</label>
                                <input type="date"
                                       class="form-control"
                                       value="{{ $data->fecha ? \Carbon\Carbon::parse($data->fecha)->format('Y-m-d') : '' }}"
                                       disabled>
                            </div>

                            <div class="col-md-2">
                                <label class="fw-bold">*Tecnología:</label>
                                <input type="text"
                                       class="form-control"
                                       value="{{ $data->tecnologia }}"
                                       disabled>
                            </div>

                            <div class="col-md-2">
                                <label class="fw-bold">*Operación:</label>
                                <input type="text"
                                       class="form-control"
                                       value="{{ $data->operacion }}"
                                       disabled>
                            </div>

                        </div>
                    </div>

                </div> <!-- FIN TAB1 -->



                <!-- ========================================================= -->
                <!-- ======================= TAB 2 ============================ -->
                <!-- ========================================================= -->

                <div class="tab-pane fade {{ session('active_tab') == 'tab2' ? 'show active' : '' }}"
                     id="tab2" role="tabpanel" style="padding-top:20px;">

                    <div class="container">

                        <div class="row">
                            <div class="text-center">
                                <strong>CONTENEDORES</strong><br><br>
                            </div>
                        </div>

                        <!-- FORM AGREGAR CONTENEDOR -->
                        <form action="{{ route('bmw.conteUpload',$data) }}"
                              method="POST" id="form2" enctype="multipart/form-data">
                            @csrf

                            {{-- Error de Bloqueo (BMW Cerrada) --}}
                            @if($errors->has('general'))
                                <div class="alert alert-danger">
                                    <ul>
                                        <li>{{ $errors->first('general') }}</li>
                                    </ul>
                                </div>                            
                            @endif

                            {{-- Mensaje de Exito --}}
                            @if(session('error'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <strong>ERROR:</strong> {{ session('error') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            @if(session('warning'))
                                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                    <strong>AVISO:</strong> {{ session('warning') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            @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"></button>
                                </div>
                            @endif
                            
                            {{-- Errores e Validación Normales --}}
                            @if($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="row">
                                <div class="col-md-2">
                                    <label><strong>*Contenedor:</strong></label>
                                    <input type="text" name="contenedor" class="form-control" required>
                                </div>

                                <div class="col-md-2">
                                    <label><strong>*Cita:</strong></label>
                                    <input type="time" name="cita" step="60" class="form-control" lang="es-MX" min="00:00" max="23:59" step="900" required>
                                </div>

                                <div class="col-md-2">
                                    <br>
                                    <input type="hidden" name="active_tab" value="tab2">

                                    <!-- 👇 AQUÍ ESTÁ EL BOTÓN -->
                                    @if(!$data->estaCerrada())
                                        <button type="submit" class="btn btn-warning btn-sm">
                                            Agregar contenedor
                                        </button>
                                    @else
                                        <div class="alert alert-secondary mt-2">
                                            🔒 Esta solicitud ya fue enviada por <strong>{{ auth()->user()->name }}</strong> y no puede modificarse.
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </form>

                        <!-- TABLA CONTENEDORES -->
                        <div class="row mt-2">
                            <div class="col-md-4 text-start">

                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Contenedor</th>
                                            <th>Cita</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($data->bmw_conte as $contenedor)
                                            <tr>
                                                <td>{{ $contenedor->contenedor }}</td>
                                                <td>{{ $contenedor->cita }}</td>
                                                <td>
                                                    @if (!$data->estaCerrada())
                                                        <form action="{{ route('bmw.conteDelete',$contenedor->id) }}"
                                                            method="POST"
                                                            class="d-inline form-delete-contenedor">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-danger btn-sm">
                                                                <i class="fas fa-trash-alt"></i>
                                                            </button>
                                                        </form>
                                                    @else
                                                        <span class="badge bg-secondary">🔒 Bloqueado</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                                <!-- BOTONES EN MISMO RENGLÓN -->
                                <div class="mt-3 d-flex gap-2">
                                    <a href="{{ route('bmw.index', $data->id) }}"
                                        class="btn btn-secondary btn-sm">
                                             ← Regresar
                                    </a>

                                    <form action="{{ route('bmw.notificar', $data->id) }}" method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="active_tab" value="tab2">
                                        <button type="submit"
                                                class="btn btn-success btn-sm"
                                                onclick="return confirm('⚠️ Al enviar la notificación, la solicitud BMW quedará BLOQUEADA y ya no podrá modificarse.\n\n¿Deseas continuar?');">
                                            📢 Enviar notificación y Guardar
                                        </button>
                                    </form>

                                </div>

                            </div>
                        </div>

                    </div>
                </div> <!-- FIN TAB2 -->

            </div>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {

    // Guardar pestaña activa
    const tabs = document.querySelectorAll('a[data-bs-toggle="tab"]');
    tabs.forEach(tab => {
        tab.addEventListener('shown.bs.tab', function (e) {
            document.querySelectorAll('input[name="active_tab"]').forEach(el => {
                el.value = e.target.getAttribute('href').substring(1);
            });
        });
    });

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

});
</script>

@endsection

@include('layouts.partials.footer')

{{-- @extends('../layouts/partials/footer') --}}