@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Encargados del estudiante";
        $modulo = "Estudiante";
        $vista="Encargados";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
@endsection

@section("contenido")
    <div id="kt_app_content_container" class="app-container container-fluid">
        @include("estudiante.perfil.components.header")
        @include("admin.estudiante.components.links")
        <div class="row g-5 g-xxl-12">
            <div class="col-xl-12">
                <div class="card mb-5 mb-xxl-12">
                    <div class="card-body pb-0">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <h4>El registro tiene los siguientes errores.</h4>
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <strong>{{ session('success') }}</strong>
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif
                        <form class="form" action="{{route("admin::encargado.insertar", $estudiante->id)}}" method="post">
                            @csrf
                            <div class="row mb-4">
                                <div class="col-md-2">
                                    <label class="form-label required" for="tipo_identificación_id">Tipo de identificación</label>
                                    <select name="tipo_identificacion_id" id="tipo_identificacion_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true" required>
                                        @foreach($tiposIdentificaciones as $tipoIdentificacion)
                                            <option value="{{$tipoIdentificacion->id}}">{{$tipoIdentificacion->tipo_identificacion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="identificacion" class="form-label  required">Numero de identificación</label>
                                    <input type="text" class="form-control form-control-lg input-cedula" name="identificacion" id="identificacion" value="{{ old('identificacion') }}" required />
                                </div>
                                <div class="col-md-4">
                                    <label for="parentesco" class="form-label  required">Parentesco</label> <small class="description text-info">Por ejemplo madre, padre, abuela materna.-</small>
                                    <input type="text" class="form-control form-control-lg" name="parentesco" id="parentesco" value="{{ old('parentesco') }}" required/>
                                </div>
                            </div>
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    <label for="nombre_completo" class="form-label  required">Nombre completo</label>
                                    <input type="text" class="form-control form-control-lg" name="nombre_completo" id="nombre_completo"  value="{{ old('nombre_completo') }}" required/>
                                </div>
                                <div class="row mt-4">
                                    <div class="col-md-4">
                                        <label class="form-label required" for="tipo_nacionalidad_id">Nacionalidad</label>
                                        <select name="tipo_nacionalidad_id" id="tipo_nacionalidad_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true" required>
                                            <option value=""></option>
                                            @foreach($tiposNacionalidades as $tipoNacionalidad)
                                                <option value="{{ $tipoNacionalidad->id }}" @if(old('tipo_nacionalidad_id') == $tipoNacionalidad->id) selected @endif>
                                                    {{ $tipoNacionalidad->tipo_nacionalidad }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="ocupacion" class="form-label required">Ocupación</label>
                                        <input type="text" class="form-control form-control-lg" name="ocupacion" id="ocupacion" value="{{ old('ocupacion') }}" required />
                                    </div>
                                    <div class="col-md-4">
                                        <label for="lugar_trabajo" class="form-label required">Lugar de trabajo</label>
                                        <input type="text" class="form-control form-control-lg" name="lugar_trabajo" id="lugar_trabajo" value="{{ old('lugar_trabajo') }}" required/>
                                    </div>
                                </div>
                                <div class="row mt-4">
                                    <div class="col-md-4">
                                        <label for="celular" class="form-label required">Celular</label>
                                        <input type="tel" maxlength="8" class="form-control form-control-lg input-telefono" name="celular"  id="celular" value="{{old("celular")}}" required  />
                                    </div>
                                    <div class="col-md-6">
                                        <label for="correo" class="form-label required">Correo</label>
                                        <input type="text" class="form-control form-control-lg" name="correo" id="correo" value="{{ old('correo') }}" required/>
                                    </div>
                                    <div class="col-md-12">
                                        <label for="direccion" class="form-label required">Dirección</label>
                                        <input type="text" class="form-control form-control-lg" name="direccion" id="direccion" value="{{ old('direccion') }}" required/>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center my-10">
                                @can("Estudiante encargado agregar")
                                    <button type="submit" id="bnt_submit" class="btn btn-primary">
                                        <span class="indicator-label">Agregar encargado</span>
                                        <span class="indicator-progress">Por favor espera...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                                    </button>
                                @endcan
                            </div>
                        </form>
                        <table class="table table-striped table-condensed">
                            <thead>
                            <tr>
                                <th><b>Nombre completo</b></th>
                                <th><b>Identificación</b></th>
                                <th><b>Celular</b></th>
                                <th><b>Correo</b></th>
                                <th><b>Parentesco</b></th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($encargados as $encargado)
                                <tr>
                                    <td>{{$encargado->nombre_completo}}</td>
                                    <td>{{$encargado->identificacion}}</td>
                                    <td>{{$encargado->celular}}</td>
                                    <td>{{$encargado->correo}}</td>
                                    <td>{{$encargado->parentesco}}</td>
                                    @can("Estudiante encargado editar")
                                        <td><a  class="btn btn-sm btn-warning" href="{{route("admin::encargado.editar",$encargado)}}"> <i class="fas fa-pen"></i></a></td>
                                    @endcan
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("scripts")
    <script> window.url_buscar_cedula = "{{ route('admin::buscar.cedula.general',':cedula') }}";</script>

    <script>
        $(document).ready(function() {

            $("#tipo_identificacion_id").on("change", function() {
                if ($(this).val() == 1) {
                    // r.enableValidator("identificacion");
                    $("#identificacion").addClass("input-cedula");
                    $("#identificacion").val("");
                    $(identificacion).attr("maxlength", 9);
                    $(identificacion).attr("minlength", 9);
                } else {
                    //r.disableValidator("identificacion");
                    $("#identificacion").removeClass("input-cedula");
                    $(identificacion).attr("maxlength", "");
                    $(identificacion).attr("minlength", "");

                }
            })
        });
    </script>

    @vite(['resources/js/global/validaciones.js'])
    @vite(['resources/js/encargado/buscarCedula.js'])

@endsection