<script lang="ts">
    import type { GaranteDto } from "../types";

    let { onClose, onSubmit, maxGarantes }: {
        onClose: () => void,
        onSubmit: (garantes: GaranteDto[]) => void,
        maxGarantes: number
    } = $props();

    let cantGarantes: number = $state(0); 
    let garantes: GaranteDto[] = $state([]); 
    let showAddForm: boolean = $state(false); 

    // Nuevo garante temporal para el formulario.
    let newGarante: GaranteDto = $state({
        Dni: 0,
        Nombre: "",
        Apellido: "",
        Domicilio: "",
        Celular: "",
        Domiciliolaboral: ""
    });

    function handleSubmit(e: Event) {
        e.preventDefault();
        onSubmit(garantes);
        onClose();
    }

    function addGarante() {
        if (cantGarantes < maxGarantes) {
            garantes = [...garantes, { ...newGarante }];
            cantGarantes = garantes.length;
            resetNewGarante();
            showAddForm = false;
        }
    }

    function resetNewGarante() {
        newGarante = {
            Dni: 0,
            Nombre: "",
            Apellido: "",
            Domicilio: "",
            Celular: "",
            Domiciliolaboral: ""
        };
    }
</script>

<div class="modal fade show" tabindex="-1" role="dialog" style="display: block; background-color: rgba(0, 0, 0, 0.5);">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nuevo Alquiler - Garantes</h5>
                <button class="btn-close" onclick={onClose} aria-label="Close"></button>
            </div>
            <form onsubmit={handleSubmit}>
                <div class="modal-body">
                    <div class="mb-3">
                        <p>Garantes añadidos: {cantGarantes}/{maxGarantes}</p>
                        <button
                            class="btn btn-success"
                            type="button"
                            onclick={() => (showAddForm = true)}
                            disabled={cantGarantes >= maxGarantes}
                        >
                            Añadir Garante
                        </button>
                    </div>

                    <!-- Formulario para añadir un garante -->
                    {#if showAddForm}
                    <div class="form-group mt-3">
                        <h6>Añadir Garante</h6>
                        <div class="mb-2">
                            <label>DNI</label>
                            <input type="number" class="form-control" bind:value={newGarante.Dni} required />
                        </div>
                        <div class="mb-2">
                            <label>Nombre</label>
                            <input type="text" class="form-control" bind:value={newGarante.Nombre} required />
                        </div>
                        <div class="mb-2">
                            <label>Apellido</label>
                            <input type="text" class="form-control" bind:value={newGarante.Apellido} required />
                        </div>
                        <div class="mb-2">
                            <label>Domicilio</label>
                            <input type="text" class="form-control" bind:value={newGarante.Domicilio} required />
                        </div>
                        <div class="mb-2">
                            <label>Celular</label>
                            <input type="text" class="form-control" bind:value={newGarante.Celular} required />
                        </div>
                        <div class="mb-2">
                            <label>Domicilio Laboral</label>
                            <input type="text" class="form-control" bind:value={newGarante.Domiciliolaboral} required />
                        </div>
                        <div class="d-flex justify-content-between">
                            <button
                                class="btn btn-secondary"
                                type="button"
                                onclick={() => (showAddForm = false)}
                            >
                                Cancelar
                            </button>
                            <button class="btn btn-primary" type="button" onclick={addGarante}>
                                Confirmar
                            </button>
                        </div>
                    </div>
                    {/if}

                    <!-- Tabla de garantes -->
                    {#if cantGarantes > 0}
                    <div class="form-group mt-3">
                        <label>Lista de Garantes</label>
                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>DNI</th>
                                    <th>Nombre</th>
                                    <th>Apellido</th>
                                    <th>Domicilio</th>
                                    <th>Celular</th>
                                    <th>Domicilio Laboral</th>
                                </tr>
                            </thead>
                            <tbody>
                                {#each garantes as garante, index}
                                <tr>
                                    <td>
                                        <input type="number" class="form-control" bind:value={garantes[index].Dni} required />
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" bind:value={garantes[index].Nombre} required />
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" bind:value={garantes[index].Apellido} required />
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" bind:value={garantes[index].Domicilio} required />
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" bind:value={garantes[index].Celular} required />
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" bind:value={garantes[index].Domiciliolaboral} required />
                                    </td>
                                </tr>
                                {/each}
                            </tbody>
                        </table>
                    </div>
                    {/if}
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-secondary" onclick={onClose}>Cancelar</button>
                    <button type="submit" class="btn btn-primary">Confirmar</button>
                </div>
            </form>
        </div>
    </div>
</div>
