@extends('layouts1.app')

@section('title', 'Dashboard')

@section('content') <!-- Inicio de la sección 'content' -->

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .custom-container {
        background-color: #ffffff; /* Fondo blanco para el contenedor */
        padding: 30px;
        border-radius: 25px; /* Bordes redondeados */
        box-shadow: 0 4px 8px rgba(0, 0, 1, 1); /* Sombra para el contenedor */
    }
    .custom-input {
        border: 0;
        border-bottom: 2px solid #ccc;
        border-radius: 0;
        padding-left: 0;
    }
    .custom-input:focus {
        border-bottom: 2px solid #007bff;
        box-shadow: none;
    }
    .custom-header {
        background-color: #ffffff;
        color: #000000;
        border-bottom: 2px solid #ccc;
    }
</style>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10">
            <div class="custom-container">
                <div class="card custom-card">
                    <div class="card-header custom-header">
                        <h2 class="card-title mb-0">Registro de Unidades Educativas de la Provincia</h2>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('unidad_educativa_provincia.store') }}" method="POST">
                            @csrf

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Nombre</label>
                                    <input type="text" name="nombre" class="form-control custom-input form-control-sm" required>
                                </div>
                                
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">SIE</label>
                                    <input type="number" name="CIE" class="form-control custom-input form-control-sm" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Cantidad de Familias</label>
                                    <input type="number" name="cant_familia" class="form-control custom-input form-control-sm" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Cantidad de Estudiantes Masculinos</label>
                                    <input type="number" id="cant_estudiantes_m" name="cant_estudiantes_m" class="form-control custom-input form-control-sm" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Cantidad de Estudiantes Femeninos</label>
                                    <input type="number" id="cant_estudiantes_f" name="cant_estudiantes_f" class="form-control custom-input form-control-sm" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Total de Estudiantes</label>
                                    <input type="number" id="total_estudiantes" name="total" class="form-control custom-input form-control-sm" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Provincia</label>
                                    <select class="form-select form-control-sm" id="provincia_id" name="provincia_id" required>
                                        @foreach($provincia as $provincia)
                                            <option value="{{ $provincia->id }}">{{ $provincia->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Profesor y Personal -->
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">Profesor</label>
                                            <select id="pid_profe_p" name="profesor_id[]" class="form-control custom-input form-control-sm" style="width: 100%">
                                                <option value="" selected>Sin profesor</option>
                                                @foreach($profesor as $profe)
                                                    <option value="{{ $profe->id }}">{{ $profe->nombre }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label">Personal</label>
                                            <select id="pid_perso_p" name="personal_id[]" class="form-control custom-input form-control-sm" style="width: 100%">
                                                <option value="" selected>Sin personal</option>
                                                @foreach($personal as $personal)
                                                    <option value="{{ $personal->id }}">{{ $personal->nombre }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="text-end mt-3">
                                        <button type="button" id="bt_agregar" class="btn btn-primary btn-sm">Agregar</button>
                                    </div>

                                    <div class="table-responsive mt-3">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Acciones</th>
                                                    <th>Profesor</th>
                                                    <th>Personal</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tabla_body">
                                                <!-- Filas dinámicas -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center mt-4">
                                <a class="btn btn-secondary btn-sm" href="{{ route('unidad_educativa_provincia.index') }}" role="button">
                                    <i class="fa fa-list mr-2"></i>Lista de Unidades
                                </a>
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fa fa-save mr-2"></i>Guardar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function () {
        $('#pid_profe_p, #pid_perso_p').select2();

        // Calcular total de estudiantes
        $('#cant_estudiantes_m, #cant_estudiantes_f').on('input', function () {
            const cantM = parseInt($('#cant_estudiantes_m').val()) || 0;
            const cantF = parseInt($('#cant_estudiantes_f').val()) || 0;
            $('#total_estudiantes').val(cantM + cantF);
        });

        // Agregar filas dinámicas
        let cont = 0;
        $('#bt_agregar').click(function () {
            const profesor_id = $("#pid_profe_p").val();
            const personal_id = $("#pid_perso_p").val();

            const profesor_nombre = profesor_id ? $("#pid_profe_p option:selected").text() : "Sin profesor";
            const personal_nombre = personal_id ? $("#pid_perso_p option:selected").text() : "Sin personal";

            const fila = `<tr id="fila${cont}">
                <td><button type="button" class="btn btn-danger btn-sm" onclick="eliminar(${cont})">X</button></td>
                <td><input type="hidden" name="profesor_id[]" value="${profesor_id || ''}">${profesor_nombre}</td>
                <td><input type="hidden" name="personal_id[]" value="${personal_id || ''}">${personal_nombre}</td>
            </tr>`;
            $('#tabla_body').append(fila);
            cont++;
        });
    });

    function eliminar(index) {
        $(`#fila${index}`).remove();
    }
</script>
@endsection