@extends("estudiante.layout.layout")
@section("styles")
    @php
        $titulo = "Contactos del estudiante";
        $modulo = "Estudiante";
        $vista="Contactos";
    @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("estudiante.perfil.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("estudiante::contacto.insertar", $estudiante->id)}}" method="post">
                            @csrf
                            <div class="row mb-4">
                                <div class="row mt-4">
                                    <h4>Contacto de emergencia</h4>
                                    <div class="col-md-8">
                                        <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="col-md-4">
                                        <label for="celular" class="form-label required">Celular</label>
                                        <input type="text" minlength="8" class="form-control form-control-lg input-telefono" name="celular" id="celular" value="{{ old('celular') }}" required/>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center my-10">
                                <button type="submit" id="bnt_submit" class="btn btn-primary">
                                    <span class="indicator-label">Agregar contacto</span>
                                    <span class="indicator-progress">Por favor espera...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                                </button>
                            </div>
                        </form>
                        <table class="table table-striped table-condensed">
                            <thead>
                            <tr>
                                <th><b>Nombre completo</b></th>
                                <th><b>Celular</b></th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($contactos as $contacto)
                                <tr>
                                    <td>{{$contacto->nombre_completo}}</td>
                                    <td>{{$contacto->celular}}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection