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


    let {onCancel, onConfirm, datos}: {onCancel:()=>void, onConfirm:(a:UpdateCliente)=>void, datos:UpdateCliente} = $props();

    let cli:UpdateCliente|any = $state({});
    onMount(()=>{
        cli.nombre = datos.nombre;
        cli.dni = datos.dni;
        cli.apellido = datos.apellido;
        cli.domicilio = datos.domicilio;
        cli.celular = datos.celular;
    })
    
    function handleConfirm(e: Event) {
        e.preventDefault();
        onConfirm(cli);
        onCancel();
    }
</script>

<div class="modal fade show d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modificar Datos Cliente</h5>
                <button type="button" class="btn-close" aria-label="Close" onclick={onCancel}></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="nombre" class="form-label">Nombre</label>
                        <input type="text" id="nombre" class="form-control" bind:value={cli.nombre} required />
                    </div>
                    <div class="mb-3">
                        <label for="apellido" class="form-label">Apellido</label>
                        <input type="text" id="apellido" class="form-control" bind:value={cli.apellido} required />
                    </div>
                    <div class="mb-3">
                        <label for="domicilio" class="form-label">Domicilio</label>
                        <input type="text" id="domicilio" class="form-control" bind:value={cli.domicilio} required />
                    </div>
                    <div class="mb-3">
                        <label for="celular" class="form-label">Celular</label>
                        <input type="tel" id="celular" class="form-control" bind:value={cli.celular} required />
                    </div>
                    <button type="submit" class="btn btn-primary" onclick={(e)=>handleConfirm(e)}>Guardar</button>
                </form>
            </div>
        </div>
    </div>
</div>