@extends('layouts.app')

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet" >
    <link href="https://cdn.datatables.net/2.0.5/css/dataTables.bootstrap5.css" rel="stylesheet" >
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            font-size: 13px; /* Cambia este valor según tus necesidades */
        }
    </style>

    @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;
        }

        .checkbox-custom {
            width: 18px;
            height: 18px;
            border: 2px solid #0d6efd;
            display: inline-block;
            cursor: pointer;
        }

        input:checked + .checkbox-custom {
            background-color: #0d6efd;
        }

    </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 {{ session('active_tab', 'tab1') == 'tab1' ? 'active' : '' }}" id="tab1-tab" data-bs-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Solicitud de Maniobra</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>SOLICITANTE</strong><br><br>
                                </div>                            
                            </div>
                            <div class="row">
                                <p class="text-start">
                                Los campos marcados con (*) son mandatorios.<br>
                                ¿A quién debemos dirigirnos para la programación y confirmación de servicios, así como para la revisión de contenedores en mal estado o sucios, o cualquier otra aclaración que se requiera?
                                </p>
                                <br>
                            </div>

                            <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>

                            <form action="{{route('solmaniobra.storeSM')}}" method="POST" id="formSM" >
                            @csrf

                                <div class="row">
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="fecha" style="all: unset;"><strong>*Fecha a realizar el movimiento:</strong></label>
                                            <input type="date" id="fecha" name="fecha" value="{{date('Y-m-d')}}" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="res_nombre" style="all: unset;"><strong>*Contacto responsable de la operación:</strong></label><br><br>
                                            <input type="text" id="res_nombre" name="res_nombre" value="{{ old('res_nombre') }}" class="form-control" placeholder="Nombre" required>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="res_correo" style="all: unset;"><strong>*Correo electrónico del responsable:</strong></label><br><br>
                                            <input type="text" name="res_correo" id="res_correo" class="form-control"
       placeholder="email1@ejemplo.com;email2@ejemplo.com" value="{{ old('res_correo') }}" required>
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="res_telefono" style="all: unset;"><strong>*Teléfono del responsable:</strong></label><br><br>
                                            <input type="text" id="res_telefono" name="res_telefono" value="{{ old('res_telefono') }}" class="form-control" placeholder="+52 000 000 000" required>
                                        </div>
                                    </div>                                    
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col-md-4 text-start">
                                        <div class="form-group">
                                            <label for="linea_credito" style="all: unset;"><strong>Si cuenta con una LINEA DE CREDITO Autorizada, favor de marcar la casilla:</strong></label> 
                                            &nbsp;&nbsp;&nbsp;
                                            <input type="checkbox" class="checkbox-custom" id="linea_credito" name="linea_credito" value="1" {{ old('linea_credito') ? 'checked' : '' }} class="form-check-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 text-start">
                                        <br>                                    
                                        <button type="submit" class="btn btn-primary">Siguiente</button>
                                    </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) {
                // 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')