<script>
    import Modal from "../../components/Modal.svelte";
    import { getTipoCargo, createTipoCargo, updateTipoCargo, deleteTipoCargo,  getTipoCargoId } from "$/services/tipo_cargo";
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher();

    export let cargo = {};
    export let escritura = false;
    let form = {}
    let loading = false;

    $: begin(cargo.id_cargo)

    async function begin(id) {
        try {
            if (!id) return;
            form = await getTipoCargoId(id) || {}
        } catch (error) {
            globalThis.toast.success(error.detail || error)
        }
    }

    async function onSave() {
        try {
           
            loading = true;
            if (cargo.id_cargo) {
                form = await updateTipoCargo(form)
            } else {
                form = await createTipoCargo(form)
            }
            globalThis.toast.success('Se ha guardado el Tipo de Cargo')
            dispatch('refresh')
            dispatch('close')
        } catch (error) {
            if (error.detail) {
                globalThis.toast.success(error.detail)
            } else {
                globalThis.toast.success(JSON.stringify(error))
            }
        } finally {
            loading = false;
        }
    }

    async function onDelete() {
        try {
            if (!confirm('Eliminará el registro?')) return;
            loading = true;
            await deleteTipoCargo(form.id_cargo)
            globalThis.toast.success('Se ha eliminado el Tipo de Cargo')
            dispatch('refresh')
            dispatch('close')
        } catch (error) {
            globalThis.toast.error(error.detail || error)
        } finally {
            loading = false;
        }
    }
</script>

<form action="" on:submit|preventDefault={onSave}>
    <Modal title={'Tipo de Cargo #' + (cargo.id_cargo || 'Nuevo')}
        size="lg"
        on:close={() => dispatch('close')}>
        <div class={"form" + (escritura ? '' : ' disabled')}>
            <div class="row mb-3">
                <div class="col-md-3">ID</div>
                <div class="col-md">
                   
                        <input type="number" value={form.id_cargo} disabled class="form-control">
                   
                </div>
            </div>           
            <div class="mb-3">
                <div class="col-md-3">Descripcion</div>
                <div class="col-md">
                    <input type="text" bind:value={form.descripcion}   class="form-control">
                </div>
            </div> 
               
        </div>
        <svelte:fragment slot="buttons">
            {#if escritura}
                <button class="btn btn-primary"type="submit" disabled={loading}>Guardar</button>
                <button class="btn btn-danger" on:click|preventDefault={onDelete} disabled={loading}>Eliminar</button>
            {/if}
        </svelte:fragment>
    </Modal>
</form>

<style>
    .disabled { pointer-events: none !important; }
</style>