<script lang="ts">
    import { onMount } from "svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import type { VentasDto } from "../types";
    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
    import { urlG } from "../stores/urlStore";

    let modaldata:string = $state("");
    let token:string = sessionStorage.getItem("token")||"";
    let file: File| null =$state(null);

    let venta: VentasDto|any = $state({divisa:""});
    let ventaid:string = $state("");
    let escomprador:boolean = $state(true);
    let necesitaRecibo:boolean = $state(false);
    let checkAceptaRecibo:boolean = $state(false);

    onMount(()=>{
        setQueryparam();
        obtenerVenta();
    });

    async function obtenerVenta() {
        try{
            const r = await fetch($urlG+"/api/venta?idventa="+ventaid, {
                method: "GET",
                headers: {
                    "Auth": token
                }
            });
            let d = await r.json();
            if (r.ok) {
                venta = d.data;
                escomprador = d.iscomprador;
                necesitaRecibo = d.necesitaRecibo;
                return;
            }
            modaldata = d.message;
        } catch {
            modaldata = "Fallo al hacer la request";
        }
    }

    function setQueryparam() {
        const qs = window.location.search;
        const par = new URLSearchParams(qs);
        ventaid = par.get("idventa")||"";
    }

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

    async function handleSubirComprobante(e:Event) {
        e.preventDefault();
        if(file == null) {
            modaldata = "No se seleciono un pdf";
            return;
        }
        let formdata = new FormData();
        formdata.append("file", file);
        try {
            const r = await fetch($urlG+"/api/ventas/subirReciboPago?idventa="+ventaid, {
                method: "POST",
                headers: {
                    "Auth": token
                },
                body: formdata,
            });
            let data = await r.json();
            if (r.ok) {
                obtenerVenta();
            }
            modaldata = data.message;
        } catch {
            modaldata = "Fallo al hacer la request";
        }
    }

    async function verComprobante() {
        try {
            const responce = await fetch($urlG+"/api/ventas/verRecibo?idventa="+ventaid, {
                method: "GET",
                headers: {
                    "Auth": String(token),
                }
            });
            if (!responce.ok) {
                modaldata="Error al obtener el archivo";
                return;
            }

            let blob = await responce.blob();
            const blobUrl = URL.createObjectURL(blob);    
            window.open(blobUrl, '_blank');
            setTimeout(() => URL.revokeObjectURL(blobUrl), 100000);
        } catch {
            modaldata = "Fallo al intentar conectarse al servidor";
        }
    }

    async function aceptarRecibo() {
        try {
            const r = await fetch($urlG+"/api/ventas/propietarioverifica?idventa="+ventaid, {
                method: "POST",
                headers: {
                    "Auth": token
                },
            });
            let data = await r.json();
            if (r.ok) {
                obtenerVenta();
            }
            modaldata = data.message;
        } catch {
            modaldata = "Fallo al hacer la request";
        }
    }
</script>

<NavBarAutocompletable/>

{#if modaldata}
    <ModalEstatico payload={modaldata} close={()=>!!(modaldata ="")} />
{/if}

<div class="container-fluid mt-4 d-flex">
    <div class="col-md-4 me-4">
        <div class="card">
            <div class="card-header">
                Datos Venta
            </div>
            <div class="card-body">
                <b>Monto: </b> {venta.divisa} {venta.monto}<br>
                <b>Ubicación: </b> {venta.ubicacion}<br>
                <b>Vendedor: </b> {venta.nombreVendedor} <br>
                <b>Comprador: </b> {venta.nombreComprador} <br>
                <b>Estado: </b> {venta.estado} <br>
            </div>
            <div class="card-footer">
                VentaID: {venta.id}
            </div>
        </div>
    </div>
    <div class="col">
        <div class="accordion" id="accordion">
            {#if escomprador}
            <div class="accordion-item">
                <h2 class="accordion-header" id="h1">
                    <button class="btn accordion-button" 
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#c1"
                    aria-expanded="true"
                    aria-controls="c1">
                        Subir Comprobante de Pago
                    </button>
                </h2>
                <div class="accordion-collapse collapse show"
                data-bs-parent="#accordion" id="c1"
                >
                    <div class="accordion-body">
                        <div class="card">
                            <div class="card-header">
                                Suba su Comprobante de pago
                            </div>
                            <div class="card-body">
                                <form>
                                    <label for="comprobante" class="form-label">El comprobante debe estar en formato pdf</label>
                                    <input disabled={!necesitaRecibo} class="form-control" type="file" name="comprobante" id="comprobante"
                                    onchange={handleComprobateFile}>
                                    <div class="d-flex justify-content-between">
                                        <button disabled={!necesitaRecibo} class="btn btn-primary mt-2" type="submit" onclick={(e)=>handleSubirComprobante(e)}>Subir</button>
                                    </div>
                                </form>
                                <button disabled={necesitaRecibo} class="btn btn-primary mt-2" type="submit" onclick={verComprobante}>Ver</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {:else}
            <div class="accordion-item">
                <h2 class="accordion-header" id="h2">
                    <button class="btn accordion-button" 
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#c2"
                    aria-expanded="true"
                    aria-controls="c2">
                        Ver Comprobante de Pago
                    </button>
                </h2>
                <div class="accordion-collapse collapse show"
                data-bs-parent="#accordion" id="c2"
                >
                    <div class="accordion-body">
                        <div class="card">
                            <div class="card-header">
                                Vea el comprobante de pago
                            </div>
                            <div class="card-body">
                                {#if necesitaRecibo}
                                <p>El boton estará habilitado cuando el comprador suba el recibo</p>
                                {/if}
                                <button disabled={necesitaRecibo} class="btn btn-primary mt-1" type="submit" onclick={verComprobante}>Ver</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {#if !necesitaRecibo && venta.estado !="Vendido"}
                
            <div class="accordion-item">
                <h2 class="accordion-header" id="h3">
                    <button class="btn accordion-button" 
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#c3"
                    aria-expanded="true"
                    aria-controls="c3">
                        Aceptar comprobante de pago
                    </button>
                </h2>
                <div class="accordion-collapse collapse"
                data-bs-parent="#accordion" id="c3"
                >
                <div class="accordion-body">
                        <div class="card">
                            <div class="card-body">
                                <button disabled={necesitaRecibo} class="btn btn-primary mt-1" type="submit" onclick={verComprobante}>
                                    Ver comprobante
                                </button>
                                <hr>
                                <input disabled={checkAceptaRecibo} type="checkbox" class="form-check-input" name="check" id="check" bind:checked={checkAceptaRecibo}>
                                <label for="check">Acepto el comprobante</label>
                                {#if checkAceptaRecibo}
                                <hr>
                                <div class="row align-items-center">
                                    <div class="col-3">
                                        <button class="btn btn-primary" onclick={aceptarRecibo}>
                                            Aceptar
                                        </button>
                                    </div>
                                    <div class="col">
                                        <p class="text-muted mb-0">Al darle al botón se va a iniciar el proceso de traspaso de la propiedad</p>
                                    </div>
                                </div>
                                
                                {/if}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/if}
            {/if}
        </div>
    </div>
</div>