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

    let {men, garantes , onCancel, onConfirm, onClose
        } : {
            men: MensajeDto, 
            garantes: GaranteDto[],
            onCancel:()=>void, 
            onClose:()=>void,
            onConfirm:(file:File, idcontrato:string)=>void } = $props();
    
    let file:File | null = $state(null);
    let confirmaGarantes: boolean = $state(false);
    let clickeado: boolean = $state(false);

    function handleFile(e:Event):void {
        const input = e.target as HTMLInputElement;
        if (input.files && input.files.length > 0 ) {
            file = input.files[0];
        }
    }

    function submit() {
        if (file == null) return;
        clickeado = true;
        onConfirm(file, men.mensaje.split(" ").reverse()[0]);
        onClose();
    }
</script>

<div class="modal show d-block" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" style="background-color: rgba(0,0,0,0.5);">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticModalLabel">Lista de Garantes y subir Contrato</h5>
                <button type="button" class="btn-close" aria-label="Close" onclick={onClose}></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <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>{index + 1}</td>
                                <td>{garante.dni}</td>
                                <td>{garante.nombre}</td>
                                <td>{garante.apellido}</td>
                                <td>{garante.domicilio}</td>
                                <td>{garante.celular}</td>
                                <td>{garante.domiciliolaboral}</td>
                            </tr>
                            {/each}
                            </tbody>
                    </table>

                    <div class="d-flex flex-column align-items-center mt-3">
                        <div class="form-check">
                            <input 
                                id="checkestabien" 
                                type="checkbox" 
                                class="form-check-input" 
                                bind:checked={confirmaGarantes} 
                                disabled={confirmaGarantes}
                            >
                            <label for="checkestabien" class="form-check-label ms-2">
                                ¿Están bien estos datos?
                            </label>
                        </div>
                    </div>
                    {#if confirmaGarantes}
                    <hr>
                    <div class="d-flex flex-column align-items-center mt-3">
                        <div class="mb-3">
                            <label for="formFile" class="form-label">Suba contrato en pdf</label>
                            <input class="form-control" type="file" id="formFile" 
                            onchange={handleFile}>
                        </div>          
                    </div>
                    {/if}
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-between">        
                <button class="btn btn-primary" disabled={!(confirmaGarantes && file != null && clickeado == false)} onclick={submit} >
                    {#if clickeado == false}
                    Subir
                    {:else}
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    {/if}
                </button>
                <button type="button" class="btn btn-danger" onclick={onCancel}>Cancelar Contrato</button>
            </div>
        </div>
    </div>
</div>
