@extends('adminlte::page')

@section('content_header')
    <h1><b>Creación de un nuevo estudiante</b></h1>
    <hr>
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-warning">
                <div class="card-header">
                    <h3 class="card-title">Llene los datos del padre de familia en el formulario</h3>
                    <div class="card-tools">
                        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#ModalCreate"><i
                                class="fas fa-search"></i>Buscar padre de familia</button>
                        <!-- Modal -->
                        <div class="modal fade" id="ModalCreate" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-xl modal-xxl">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Padres de familia</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <table id="example1" class="table table-bordered table-striped table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Nro</th>
                                                    <th style="text-align: center">Apellidos y nombres</th>
                                                    <th style="text-align: center">Carnet de identidad</th>
                                                    <th style="text-align: center">Fecha de nacimiento</th>
                                                    <th style="text-align: center">Teléfono</th>
                                                    <th style="text-align: center">Parentesco</th>
                                                    <th style="text-align: center">Ocupación</th>
                                                    <th style="text-align: center">Dirección</th>
                                                    <th style="text-align: center">Correo Electrónico</th>
                                                    <th>Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($ppffs as $ppff)
                                                    <tr>
                                                        <td style="text-align:center"> {{ $loop->iteration }}</td>
                                                        <td>{{ $ppff->apellidos }} {{ $ppff->nombres }}</td>
                                                        <td>{{ $ppff->ci }}</td>
                                                        <td>{{ $ppff->fecha_nacimiento }}</td>
                                                        <td>{{ $ppff->telefono }}</td>
                                                        <td>{{ $ppff->parentesco }}</td>
                                                        <td>{{ $ppff->ocupacion }}</td>
                                                        <td>{{ $ppff->direccion }}</td>
                                                        <td>{{ $ppff->email }}</td>
                                                        <td style="text-align: center">
                                                            <button class="btn btn-info btn-seleccionar"
                                                                data-id="{{ $ppff->id }}"
                                                                data-nombres="{{ $ppff->nombres }}"
                                                                data-apellidos="{{ $ppff->apellidos }}"
                                                                data-ci="{{ $ppff->ci }}"
                                                                data-fecha_nacimiento="{{ $ppff->fecha_nacimiento }}"
                                                                data-telefono="{{ $ppff->telefono }}"
                                                                data-parentesco="{{ $ppff->parentesco }}"
                                                                data-ocupacion="{{ $ppff->ocupacion }}"
                                                                data-direccion="{{ $ppff->direccion }}"
                                                                data-email="{{ $ppff->email }}">Seleccionar</button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-dismiss="modal">Cerrar</button>
                                        <button class="btn btn-primary" data-toggle="modal"
                                            data-target="#ModalCreatePpff">Crear padre de familia</button>
                                        <!-- Modal -->
                                        <div class="modal fade" id="ModalCreatePpff" tabindex="-1"
                                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-header"
                                                        style="background-color: #007bff; color:rgb(252, 252, 250);">
                                                        <h5 class="modal-title" id="exampleModalLabel">Registro de un nuevo
                                                            padre de familia</h5>
                                                        <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form action="{{ url('/admin/estudiantes/ppff/create') }}"
                                                            method="POST">
                                                            @csrf
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <label for="">Nombres</label><b> (*)</b>
                                                                    <div class="input-group mb-3">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="fas fa-user"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="text" class="form-control"
                                                                            name="nombres" id="nombres"
                                                                            value="{{ old('nombres') }}"
                                                                            placeholder="Escriba aquí.." required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label for="">Apellidos</label><b> (*)</b>
                                                                    <div class="input-group mb-3">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="fas fa-user"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="text" class="form-control"
                                                                            name="apellidos" id="apellidos"
                                                                            value="{{ old('apellidos') }}"
                                                                            placeholder="Escriba aquí.." required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label for="">Cédula de identidad</label><b>
                                                                        (*)</b>
                                                                    <div class="input-group mb-3">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="fas fa-id-card"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="text" class="form-control"
                                                                            name="ci" id="ci"
                                                                            value="{{ old('ci') }}"
                                                                            placeholder="Escriba aquí.." required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label for="">Fecha de nacimiento</label><b>
                                                                        (*)</b>
                                                                    <div class="input-group mb-3">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="fas fa-calendar-alt"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="date" class="form-control"
                                                                            name="fecha_nacimiento" id="fecha_nacimiento"
                                                                            value="{{ old('fecha_nacimiento') }}"
                                                                            placeholder="Escriba aquí.." required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label for="">Teléfono</label><b> (*)</b>
                                                                    <div class="input-group mb-3">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="fas fa-phone"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="text" class="form-control"
                                                                            name="telefono" id="telefono"
                                                                            value="{{ old('telefono') }}"
                                                                            placeholder="Ingresa el número telefónico.."
                                                                            required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label for="">Parentesco</label><b> (*)</b>
                                                                    <div class="input-group mb-3">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="fas fa-user-friends"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="text" class="form-control"
                                                                            name="parentesco" id="parentesco"
                                                                            value="{{ old('parentesco') }}"
                                                                            placeholder="Ingresa el parentesco.." required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label for="">Ocupación</label><b> (*)</b>
                                                                    <div class="input-group mb-3">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="fas fa-briefcase"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="text" class="form-control"
                                                                            name="ocupacion" id="ocupacion"
                                                                            value="{{ old('ocupacion') }}"
                                                                            placeholder="Ingresa la Ocupación.." required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label for="">Correo electrónico</label><b>
                                                                        (*)</b>
                                                                    <div class="input-group mb-3">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="fas fa-envelope"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="email" class="form-control"
                                                                            name="email" id="email"
                                                                            value="{{ old('email') }}"
                                                                            placeholder="Ingresa la dirección.." required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-12">
                                                                    <label for="">Dirección</label><b> (*)</b>
                                                                    <div class="input-group mb-3">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="fas fa-map-marker-alt"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="text" class="form-control"
                                                                            name="direccion" id="direccion"
                                                                            value="{{ old('direccion') }}"
                                                                            placeholder="Ingresa la dirección.." required>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <hr>
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <div class="form-group">
                                                                        <button type="button" class="btn btn-secondary"
                                                                            data-dismiss="modal">Cancelar</button>
                                                                        <button type="submit"
                                                                            class="btn btn-primary">Registrar</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-body" id="datos_ppff" style="display: none">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="">Nombres</label>
                                <p id="ppff_nombres">a</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="">Apellidos</label>
                                <p id="ppff_apellidos">a</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="">Carnet de identidad</label>
                                <p id="ppff_ci">a</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="">Fecha de nacimiento</label>
                                <p id="ppff_fecha_nacimiento">a</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="">Teléfono</label>
                                <p id="ppff_telefono">a</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="">Parentesco</label>
                                <p id="ppff_parentesco">a</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="">Ocupación</label>
                                <p id="ppff_ocupacion">a</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="">Dirección</label>
                                <p id="ppff_direccion">a</p>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="">Correo Electrónico</label>
                                        <p id="ppff_email">a</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card -->
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Llene los datos del estudiante en el formulario</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <form action="{{ url('/admin/estudiantes/create') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="text" name="ppff_id" id="ppff_id" hidden>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="">Fotografía</label><b> (*)</b>
                                    <input type="file" class="form-control" name="foto"
                                        placeholder="Escriba aquí.." onchange="mostrarImagen(event)" accept="image/*"
                                        required>
                                    <br>
                                    <center>
                                        <img id="preview" src="" style="max-width: 300px; margin-top: 10px;">
                                    </center>
                                    @error('foto')
                                        <small style="color: red;">{{ $message }}</small>
                                    @enderror
                                </div>
                                <script>
                                    const mostrarImagen = e =>
                                        document.getElementById('preview').src = URL.createObjectURL(e.target.files[0]);
                                </script>
                            </div>
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="">Nombre del rol</label><b> (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"><i
                                                            class="fas fa-user-check"></i></span>
                                                </div>
                                                <select name="rol" id="" class="form-control">
                                                    <option value="">Seleccione un rol...
                                                    </option>
                                                    @foreach ($roles as $rol)
                                                        @if ($rol->name == 'ESTUDIANTE')
                                                            <option
                                                                value="{{ $rol->name }}"{{ $rol->name == 'ESTUDIANTE' ? 'selected' : '' }}>
                                                                {{ $rol->name }}</option>
                                                        @else
                                                        @endif
                                                    @endforeach
                                                    <option value="">No existe el rol estudiante</option>
                                                </select>
                                            </div>
                                            @error('rol')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="">Nombres</label><b> (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-user"></i>
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control" name="nombres" id="nombres"
                                                    value="{{ old('nombres') }}" placeholder="Escriba aquí.." required>
                                            </div>
                                            @error('nombres')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="">Apellidos</label><b> (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-user-friends"></i>
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control" name="apellidos"
                                                    id="apellidos" value="{{ old('apellidos') }}"
                                                    placeholder="Escriba aquí.." required>
                                            </div>
                                            @error('apellidos')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="">Carnet de identidad </label><b>
                                                (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-id-card"></i>
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control" name="ci" id="ci"
                                                    value="{{ old('ci') }}" placeholder="Escriba aquí.." required>
                                            </div>
                                            @error('ci')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="">Fecha de nacimiento </label><b>
                                                (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-calendar-alt"></i>
                                                    </span>
                                                </div>
                                                <input type="date" class="form-control" name="fecha_nacimiento"
                                                    id="fecha_nacimiento" value="{{ old('fecha_nacimiento') }}"
                                                    placeholder="Escriba aquí.." required>
                                            </div>
                                            @error('fecha_nacimiento')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="">Teléfono</label><b> (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-phone"></i>
                                                    </span>
                                                </div>
                                                <input type="number" class="form-control" name="telefono"
                                                    id="telefono" value="{{ old('telefono') }}"
                                                    placeholder="Escriba aquí.." required>
                                            </div>
                                            @error('telefono')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="">Género</label><b> (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-users"></i>
                                                    </span>
                                                </div>
                                                <select name="genero" id="" class="form-control">
                                                    <option value="masculino">Masculino</option>
                                                    <option value="femenino">Femenino</option>
                                                </select>
                                            </div>
                                            @error('genero')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="">Email</label><b> (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-envelope"></i>
                                                    </span>
                                                </div>
                                                <input type="email" class="form-control" name="email" id="email"
                                                    value="{{ old('email') }}" placeholder="Escriba aquí.." required>
                                            </div>
                                            @error('email')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="form-group">
                                            <label for="">Dirección</label><b> (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-map-marker-alt"></i>
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control" name="direccion"
                                                    id="direccion" value="{{ old('direccion') }}"
                                                    placeholder="Escriba aquí.." required>
                                            </div>
                                            @error('direccion')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <!-- Botón cancelar alineado a la izquierda -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <a href="{{ url('/admin/estudiantes') }}" class="btn btn-default">
                                        <i class="fas fa-arrow-left"></i> Cancelar
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Guardar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
@stop

@section('css')
    <style>
        .modal-xxl {
            max-width: 98vw !important;
        }

        #example1_wrapper .dt-buttons {
            background-color: transparent;
            box-shadow: none;
            border: none;
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 15x;
        }

        #example1_wrapper .btn {
            color: #fff;
            border-radius: 4px;
            padding: 5px 15px;
            font-size: 14px;
        }

        .btn-danger {
            background-color: #dc3545;
            border: none;
        }

        .btn-success {
            background-color: #28a745;
            border: none;
        }

        .btn-info {
            background-color: #17a2b8;
            border: none;
        }

        .btn-warning {
            background-color: #ffc107;
            border: none;
        }

        .btn-default {
            background-color: #6e7176;
            border: none;
        }
    </style>
@stop

@section('js')
    <script>
        $(function() {

            $('.btn-seleccionar').click(function() {
                var nombres = $(this).data('nombres');
                var apellidos = $(this).data('apellidos');
                var ci = $(this).data('ci');
                var fecha_nacimiento = $(this).data('fecha_nacimiento');
                var telefono = $(this).data('telefono');
                var parentesco = $(this).data('parentesco');
                var ocupacion = $(this).data('ocupacion');
                var direccion = $(this).data('direccion');
                var email = $(this).data('email');
                var id = $(this).data('id');

                // Vista previa
                $('#ppff_nombres').html(nombres);
                $('#ppff_apellidos').html(apellidos);
                $('#ppff_ci').html(ci);
                $('#ppff_fecha_nacimiento').html(fecha_nacimiento);
                $('#ppff_telefono').html(telefono);
                $('#ppff_parentesco').html(parentesco);
                $('#ppff_ocupacion').html(ocupacion);
                $('#ppff_direccion').html(direccion);
                $('#ppff_email').html(email);
                // Campo oculto para el formulario
                $('#ppff_id').val(id);

                $('#datos_ppff').css('display', 'block');
                $('#ModalCreate').modal('hide');
            });
            $('#example1').DataTable({
                "pageLength": 5,
                "language": {
                    "emptyTable": "No hay información",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ Padres de familia",
                    "infoEmpty": "Mostrando 0 a 0 de 0 Padres de familia",
                    "infoFiltered": "(filtrado de _MAX_ total Padres de familia)",
                    "lengthMenu": "Mostrar _MENU_ Padres de familia",
                    "loadingRecords": "Cargando...",
                    "processing": "Procesando...",
                    "search": "Buscar:",
                    "zeroRecords": "No se encontraron resultados",
                    "paginate": {
                        "first": "Primero",
                        "last": "Último",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                },
                "responsive": true,
                "lengthChange": true,
                "autoWidth": false,
                buttons: [{
                        text: '<i class="fas fa-copy"></i> COPIAR',
                        extend: 'copy',
                        className: 'btn btn-default'
                    },
                    {
                        text: '<i class="fas fa-file-pdf"></i> PDF',
                        extend: 'pdf',
                        className: 'btn btn-danger',
                        customize: function(doc) {
                            doc.pageOrientation = 'landscape';
                            doc.pageSize = 'A4';
                            var colCount = doc.content[1].table.body[0].length;
                            // Ajusta el ancho de la columna de correo (por ejemplo, columna 8)
                            let widths = [];
                            for (let i = 0; i < colCount; i++) {
                                // Si es la columna de correo (ajusta el índice según tu tabla, aquí es la 8)
                                if (i === 7) {
                                    widths.push('30%');
                                } else {
                                    widths.push('*');
                                }
                            }
                            doc.content[1].table.widths = widths;
                            doc.styles.tableHeader.fontSize = 9;
                            doc.defaultStyle.fontSize = 7;
                            doc.pageMargins = [5, 5, 5, 5];
                        }
                    },
                    {
                        text: '<i class="fas fa-file-csv"></i> CSV',
                        extend: 'csv',
                        className: 'btn btn-info'
                    },
                    {
                        text: '<i class="fas fa-file-excel"></i> EXCEL',
                        extend: 'excel',
                        className: 'btn btn-success'
                    },
                    {
                        text: '<i class="fas fa-print"></i> IMPRIMIR',
                        extend: 'print',
                        className: 'btn btn-warning'
                    }
                ]
            }).buttons().container().appendTo('#example1_wrapper .row:eq(0)');
        });
    </script>
    <!-- Contenido de la vista -->
    @include('footer')
@stop