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

@section('content')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            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);
                });
            });
        });
    </script>

    <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 {{ session('active_tab', 'tab1') == 'tab1' ? 'active' : '' }}" id="tab1-tab" data-bs-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">PDT</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>PERMISO DE TRABAJO</h4>
                                </div>
                            </div>

                            <div class="row">
                                <div class="text-center">
                                    <a href="{{ route('instalaciones.show',$instalacion->partida_adicional_id ) }}" >Regresar</a>
                            </div>

                            <br>
                            <div class="row">
                                Los campos marcados con (*) son mandatorios.
                            </div>


                            <form action="{{route('avance.updatePDT',$regDiario->id)}}" method="POST" id="form1" enctype="multipart/form-data" >
                                @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-2 text-start">
                                        <div class="form-group">
                                            <label for="pdt_folio" style="all: unset;"><strong>*Folio:</strong></label>
                                            <input type="text" id="pdt_folio" name="pdt_folio" value="{{ old('pdt_folio',$regDiario->pdt_folio) }}" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="pdt_fecha" style="all: unset;"><strong>*Fecha:</strong></label>
                                            <input type="date" id="pdt_fecha" name="pdt_fecha" value="{{old('pdt_fecha',$regDiario->pdt_fecha)}}" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="odm" style="all: unset;"><strong>ODM:</strong></label>
                                            <input type="text" id="odm" name="odm" value="{{ $odm->odm }}" class="form-control" disabled>
                                        </div>
                                    </div>


                                <div class="row">
                                    <div class="col-md-4 text-start">
                                        <div class="form-group">
                                            <label for="instalacion" style="all: unset;"><strong>Instalación:</strong></label>
                                            <input type="text" id="instalacion" name="instalacion" value="{{old('instalacion',$instalacion->instalacion)}}" class="form-control" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-start">
                                        <div class="form-group">
                                            <label for="localizacion" style="all: unset;"><strong>Localización:</strong></label>
                                            <input type="text" id="localizacion" name="localizacion" value="{{old('instalacion',$instalacion->localizacion)}}" class="form-control" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="partidaAd" style="all: unset;"><strong>Partida:</strong></label>
                                            <input type="text" id="partidaAd" name="partidaAd" value="{{ $partida->partida }}" class="form-control" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-start">
                                        <div class="form-group">
                                            <label for="actividad" style="all: unset;"><strong>Actividad:</strong></label>
                                            <textarea id="actividad" rows="4" name="actividad" class="form-control" disabled>{{ $partida->actividad }}</textarea>

                                        </div>
                                    </div>
                                    <div class="col-md-4 text-start">
                                        <div class="form-group">
                                            <label for="actividad" style="all: unset;"><strong>Validar Firmas para la Ejecución de Trabajo:</strong></label><br>
                                            <input type="hidden" name="pdt_firma_especialista" value="0">
                                            <input type="checkbox" id="pdt_firma_especialista" name="pdt_firma_especialista" value="1" {{ old('pdt_firma_especialista', $regDiario->pdt_firma_especialista) == 1 ? 'checked' : '' }}> Firma del Especialista de CENAGAS <br>

                                            <input type="hidden" name="pdt_firma_supervisor" value="0">
                                            <input type="checkbox" id="pdt_firma_supervisor" name="pdt_firma_supervisor" value="1" {{ old('pdt_firma_supervisor', $regDiario->pdt_firma_supervisor) == 1 ? 'checked' : '' }}> Firma del Supervisor de Seguridad <br>

                                            <input type="hidden" name="pdt_firma_operacion" value="0">
                                            <input type="checkbox" id="pdt_firma_operacion" name="pdt_firma_operacion" value="1" {{ old('pdt_firma_operacion', $regDiario->pdt_firma_operacion) == 1 ? 'checked' : '' }}> Firma de Operación <br>

                                            <input type="hidden" name="pdt_firma_seguridad" value="0">
                                            <input type="checkbox" id="pdt_firma_seguridad" name="pdt_firma_seguridad" value="1" {{ old('pdt_firma_seguridad', $regDiario->pdt_firma_seguridad) == 1 ? 'checked' : '' }}> Firma de Seguridad <br>

                                            <input type="hidden" name="pdt_firma_residente" value="0">
                                            <input type="checkbox" id="pdt_firma_residente" name="pdt_firma_residente" value="1" {{ old('pdt_firma_residente', $regDiario->pdt_firma_residente) == 1 ? 'checked' : '' }}> Firma del Residente <br>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-start">
                                        <div class="form-group">
                                            <label for="actividad" style="all: unset;"><strong>Firmas de Cierre de Trabajo:</strong></label><br>
                                            <input type="hidden" name="pdt_firma_especialista_cierre" value="0">
                                            <input type="checkbox" id="pdt_firma_especialista_cierre" name="pdt_firma_especialista_cierre" value="1" {{ old('pdt_firma_especialista_cierre', $regDiario->pdt_firma_especialista_cierre) == 1 ? 'checked' : '' }}> Firma del Especialista <br>

                                            <input type="hidden" name="pdt_firma_supervisor_cenagas_cierre" value="0">
                                            <input type="checkbox" id="pdt_firma_supervisor_cenagas_cierre" name="pdt_firma_supervisor_cenagas_cierre" value="1" {{ old('pdt_firma_supervisor_cenagas_cierre', $regDiario->pdt_firma_supervisor_cenagas_cierre) == 1 ? 'checked' : '' }}> Firma del Supervisor de Seguridad de CENAGAS <br>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">

                                </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();
        }
        });

    </script>


@endsection


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