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

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            const fechaIni = document.getElementById('fecha_ini');
            const fechaFin = document.getElementById('fecha_fin');

            const vigenciaF1 = document.getElementById('vigencia_f1');
            const vigenciaF2 = document.getElementById('vigencia_f2');
            const auto_responsable1_fecha = document.getElementById('auto_responsable1_fecha');
            const auto_responsable2_fecha = document.getElementById('auto_responsable2_fecha');
            const auto_responsable3_fecha = document.getElementById('auto_responsable3_fecha');

            // termino_responsable1_fecha
            const termino_responsable1_fecha = document.getElementById('termino_responsable1_fecha');
            const termino_responsable2_fecha = document.getElementById('termino_responsable2_fecha');


            fechaIni.addEventListener('change', function () {
                vigenciaF1.value = fechaIni.value;
                auto_responsable1_fecha.value = fechaIni.value;
                auto_responsable2_fecha.value = fechaIni.value;
                auto_responsable3_fecha.value = fechaIni.value;
            });
            fechaFin.addEventListener('change', function () {
                vigenciaF2.value = fechaFin.value;
                termino_responsable1_fecha.value = fechaFin.value;
                termino_responsable2_fecha.value = fechaFin.value;
            });

        });
    </script>

    <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">ODM</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>
                            <div class="row">
                                <div class="text-center">
                                    <h4>NUEVA ODM</h4>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-8 text-left">
                                    * Los campos marcados con (*) son mandatorios.<br>
                                    * Para agregar mas partidas, debe guardar primero la ODM con la partida principal.
                                </div>
                            </div>


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

                                <input type="hidden" name="partida_id" value="{{$partida->id}}">

                                <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(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" aria-label="Close"></button>
                                    </div>
                                    @endif

                                    {{--
                                    @error('residencia')
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        <strong>Error! :</strong> {{ $message }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                    @enderror --}}

                                    @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-2 text-start">
                                        <label for="partida" style="all: unset;"><strong>Partida (Principal):</strong></label>
                                        <input type="text" id="partida" name="partida" value="{{ $partida->partida }}" class="form-control" disabled>
                                    </div>
                                    <div class="col-md-6 text-start">
                                        <label for="actividad" style="all: unset;"><strong>Partida:</strong></label>
                                        <input type="text" id="actividad" name="actividad" value="{{ $partida->actividad }}" class="form-control" disabled>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="fecha_ini" style="all: unset;"><strong>*Fecha_ini:</strong></label>
                                            <input type="date" id="fecha_ini" name="fecha_ini" value="{{old('fecha_ini')}}" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="fecha_fin" style="all: unset;"><strong>*Fecha_fin:</strong></label>
                                            <input type="date" id="fecha_fin" name="fecha_fin" value="{{old('fecha_fin')}}" class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="residente" style="all: unset;"><strong>*Residente:</strong></label>
                                            <input type="text" id="residente" name="residente" value="Ing. Arturo Alemán Soto" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="sup_seguridad" style="all: unset;"><strong>*Supervisor de Seguridad:</strong></label>
                                            <input type="text" id="sup_seguridad" name="sup_seguridad" value="Ing. Magda Yolanda Castro Cruz" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="tipo_programacion" style="all: unset;"><strong>*Tipo de programación:</strong></label>
                                            <select name="tipo_programacion" id="tipo_programacion" class="form-control" required>
                                                <option value="">-</option>
                                                <option value="P" {{ old('tipo_programacion') == 'P' ? 'selected' : '' }}>PROGRAMADA</option>
                                                <option value="F" {{ old('tipo_programacion') == 'F' ? 'selected' : '' }}>FUERA DE PROGRAMA</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="contratista_id" style="all: unset;"><strong>*Asignado a contratista:</strong></label>
                                            {{-- <input type="text" id="contratista_id" name="contratista_id" value="{{old('contratista_id')}}" class="form-control" required> --}}
                                            <select name="contratista_id" id="contratista_id" class="form-control" required>
                                                <option value="">-</option>
                                                @foreach ($contratistas as $contratista)
                                                    <option value="{{$contratista->id}}" {{ old('contratista_id') == $contratista->id ? 'selected' : '' }}>{{$contratista->rs}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">

                                            <label for="status" style="all: unset;"><strong>*Status:</strong></label>
                                            <select name="status" id="status" class="form-control" required>
                                                <option value="EN PROCESO" {{ old('status') =='EN PROCESO' ? 'selected' : '' }}>EN PROCESO</option>
                                                {{-- <option value="REALIZADO" {{ old('status') =='REALIZADO' ? 'selected' : '' }}>REALIZADO</option>
                                                <option value="NO-REALIZADO" {{ old('status') =='NO-REALIZADO' ? 'selected' : '' }}>NO-REALIZADO</option>
                                                <option value="CANCELADO" {{ old('status') =='CANCELADO' ? 'selected' : '' }}>CANCELADO</option>
                                                <option value="REALIZADO-PARCIAL" {{ old('status') =='REALIZADO-PARCIAL' ? 'selected' : '' }}>REALIZADO-PARCIAL</option>
                                                <option value="">-</option> --}}
                                            </select>
                                        </div>
                                    </div>

                                </div>
                                <br><br>
                                <div class="row">
                                    <h4>Datos del Solicitante</h4>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="table-responsive">
                                        <table class="table table-primary">
                                            <thead>
                                                <tr>
                                                    <th width="50%">*Responsable de Ejecución del Trabajo</th>
                                                    <th width="50%">*Responsable Ejecutor</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <input type="text" id="solicitante1" name="solicitante1" class="form-control" value="{{old('solicitante1')}}" placeholder="Nombre" required><br>
                                                        <input type="text" id="solicitante1_cargo" name="solicitante1_cargo" class="form-control" value="{{old('solicitante1_cargo')}}" placeholder="Cargo" required><br>
                                                        <input type="text" id="solicitante1_compania" name="solicitante1_compania" class="form-control" value="CENAGAS"><br>
                                                        <input type="text" id="solicitante1_contrato" name="solicitante1_contrato" class="form-control" value="CENAGAS/OBRA/096/2023-P"><br>
                                                    </td>
                                                    <td>
                                                        <input type="text" id="solicitante2" name="solicitante2" class="form-control" value="{{old('solicitante2')}}" placeholder="Nombre"><br>
                                                        <input type="text" id="solicitante2_cargo" name="solicitante2_cargo" class="form-control" value="{{old('solicitante2_cargo')}}" placeholder="Cargo" required><br>
                                                        <input type="text" id="solicitante2_compania" name="solicitante2_compania" class="form-control" value="Impacto, Ingeniería & Construcción S.A. de C.V. y otras" required><br>
                                                        <input type="text" id="solicitante2_contrato" name="solicitante2_contrato" class="form-control" value="CENAGAS/OBRA/096/2023-P" required><br>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="button" class="btn btn-primary" value="Copiar texto" onclick="copiar_texto()">
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                </div>

                                <div class="row">
                                    <h4>Descripción del Trabajo</h4>
                                </div>
                                <div class="row">
                                    <label for="descripcion_instalaciones" style="all: unset;"><strong>*Descripción del Trabajo:</strong></label>
                                    <textarea class="form-control" name="descripcion_trabajo" required>{{ $partida->partida }} {{ $partida->actividad }}</textarea>
                                </div>
                                <div class="row">
                                    <label for="descripcion_instalaciones" style="all: unset;"><strong>*Descripción de las Instalaciones donde se efecturá el trabajo:</strong></label>
                                    <textarea class="form-control" name="descripcion_instalaciones" required>{{old('descripcion_instalaciones')}}</textarea>
                                </div>
                                <div class="row">
                                    <label for="justificacion_ejecucion" style="all: unset;"><strong>*Antecedentes/Justificación de la ejecución de los trabajos:</strong></label>
                                    <textarea class="form-control" name="justificacion_ejecucion" required>CENAGAS/OBRA/096/2023-P</textarea>
                                </div>
                                <div class="row">
                                    <h4>Autorización para la Orden de Trabajo</h4>
                                </div>
                                <div class="row">
                                    <div class="col-md-5 text-start">
                                        <div class="form-group">
                                            <label for="residente" style="all: unset;"><strong>*¿Se autoriza la ejecución del trabajo solicitado?:</strong></label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <select name="ot_auto_ejecucion" id="ot_auto_ejecucion" class="form-control" required>
                                            <option value="">-</option>
                                            <option value="S" {{ old('ot_auto_ejecucion') == 'S' ? 'selected' : '' }}>SI</option>
                                            <option value="N" {{ old('ot_auto_ejecucion') == 'N' ? 'selected' : '' }}>NO</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-5 text-start">
                                        <div class="form-group">
                                            <label for="residente" style="all: unset;"><strong>*¿Se requiere elaborar el formato de "Permiso de Trabajo"?:</strong></label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <select name="ot_formato_permiso" id="ot_formato_permiso" class="form-control" required>
                                            <option value="">-</option>
                                            <option value="S" {{ old('ot_formato_permiso') == 'S' ? 'selected' : '' }}>SI</option>
                                            <option value="N" {{ old('ot_formato_permiso') == 'N' ? 'selected' : '' }}>NO</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-5 text-start">
                                        <div class="form-group">
                                            <label for="residente" style="all: unset;"><strong>*¿Se requiere utilizar el equipo de Protección Personal Especial?:</strong></label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <select name="ot_equipo_proteccion" id="ot_equipo_proteccion" class="form-control" required>
                                            <option value="">-</option>
                                            <option value="S" {{ old('ot_equipo_proteccion') == 'S' ? 'selected' : '' }}>SI</option>
                                            <option value="N" {{ old('ot_equipo_proteccion') == 'N' ? 'selected' : '' }}>NO</option>
                                        </select>
                                    </div>
                                </div>

                                <br><br>

                                <div class="row">
                                    <h4>Análisis y Autorización para el inicio del trabajo</h4>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="residente" style="all: unset;"><strong>*Responsable de la Ejecución del Trabajo:</strong></label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" id="auto_responsable1" name="auto_responsable1" class="form-control" value="{{old('auto_responsable1')}}" placeholder="Nombre" required><br>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="date" id="auto_responsable1_fecha" name="auto_responsable1_fecha" value="{{old('auto_responsable1_fecha')}}" class="form-control" required>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="time" id="auto_responsable1_hora" name="auto_responsable1_hora" value="{{old('auto_responsable1_hora')}}" class="form-control" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="residente" style="all: unset;"><strong>*Operación:</strong></label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" id="auto_responsable2" name="auto_responsable2" class="form-control" value="{{old('auto_responsable2')}}" placeholder="Nombre" required><br>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="date" id="auto_responsable2_fecha" name="auto_responsable2_fecha" value="{{old('auto_responsable2_fecha')}}" class="form-control" required>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="time" id="auto_responsable2_hora" name="auto_responsable2_hora" value="{{old('auto_responsable2_hora')}}" class="form-control" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="residente" style="all: unset;"><strong>*Responsable Ejecutor del Trabajo:</strong></label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" id="auto_responsable3" name="auto_responsable3" class="form-control" value="{{old('auto_responsable3')}}" placeholder="Nombre" required><br>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="date" id="auto_responsable3_fecha" name="auto_responsable3_fecha" value="{{old('auto_responsable3_fecha')}}" class="form-control" required>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="time" id="auto_responsable3_hora" name="auto_responsable3_hora" value="{{old('auto_responsable3_hora')}}" class="form-control" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="residente" style="all: unset;"><strong>*Vigencia:</strong></label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="date" id="vigencia_f1" name="vigencia_f1" value="{{old('vigencia_f1')}}" class="form-control" required>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="time" id="vigencia_h1" name="vigencia_h1" value="{{old('vigencia_h1')}}" class="form-control" required>
                                    </div>
                                    <div class="col-md-1">
                                        A
                                    </div>
                                    <div class="col-md-2">
                                        <input type="date" id="vigencia_f2" name="vigencia_f2" value="{{old('vigencia_f2')}}" class="form-control" required>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="time" id="vigencia_h2" name="vigencia_h2" value="{{old('vigencia_h2')}}" class="form-control" required>
                                    </div>

                                </div>

                                <br><br>
                                <div class="row">
                                    <h4>Terminación de Trabajo</h4>
                                </div>
                                <br>

                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="" style="all: unset;"><strong>*Responsable de la Ejecución del Trabajo:</strong></label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" id="termino_responsable1" name="termino_responsable1" class="form-control" value="{{old('termino_responsable1')}}" placeholder="Nombre" required><br>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="date" id="termino_responsable1_fecha" name="termino_responsable1_fecha" value="{{old('termino_responsable1_fecha')}}" class="form-control" required>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="time" id="termino_responsable1_hora" name="termino_responsable1_hora" value="{{old('termino_responsable1_hora')}}" class="form-control" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 text-start">
                                        <div class="form-group">
                                            <label for="" style="all: unset;"><strong>*Responsable Ejecutor del Trabajo:</strong></label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" id="termino_responsable2" name="termino_responsable2" class="form-control" value="{{old('termino_responsable2')}}" placeholder="Nombre" required><br>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="date" id="termino_responsable2_fecha" name="termino_responsable2_fecha" value="{{old('termino_responsable2_fecha')}}" class="form-control" required>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="time" id="termino_responsable2_hora" name="termino_responsable2_hora" value="{{old('termino_responsable2_hora')}}" class="form-control" required>
                                    </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">
                                        <i class="bi bi-save-fill"></i> Guardar cambios
                                    </button>
                                </div>
                            </form>
                            <br><br>
                        </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();
        }
        });

        function copiar_texto() {
            // Responsable de Ejecución del Trabajo
            const sol1 = document.getElementById('solicitante1').value;
            // Asignar el valor al input con id="auto_responsable1"
            document.getElementById('auto_responsable1').value = sol1;
            document.getElementById('termino_responsable1').value = sol1;

            // Responsable Ejecutor
            const sol2 = document.getElementById('solicitante2').value;
            // Asignar el valor al input con id="auto_responsable2"
            document.getElementById('auto_responsable3').value = sol2;
            document.getElementById('termino_responsable2').value = sol2;

            alert('Los textos como Responsable de Ejecución del Trabajo y Responsable Ejecutor, ya fueron copiados mas abajo de la hoja en sección: Análisis y Autorización para el inicio del trabajo y Terminación de Trabajo.');



        }

    </script>


@endsection


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