<script lang="ts">
    import { onMount } from "svelte";
    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import type { ContratoDto } from "../types";
    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
    import {urlG} from "../stores/urlStore";
    import { navigate } from "svelte-routing";
    
    let token: string = sessionStorage.getItem("token")|| "";
    let alquileres:ContratoDto[]| null = $state(null);
    let modaldata:string = $state("");

    onMount(()=>{
        obtenerContratosAdmin();
    });
    async function obtenerContratosAdmin() {
        try{
            const responce = await fetch($urlG+"/api/contratos/controlPagos", {
                method: "GET",
                headers: {
                    "Auth": String(token),
                },
            });
            if (responce.ok){
                let data = await responce.json();
                alquileres = data;
                return;
            }

            let data = await responce.json();
            modaldata = data.message;

        }catch{
            modaldata = "fallo al intentar hacer la request";
        }
    }
</script>

<NavBarAutocompletable/>

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

<div class="container-fluid mt-2">
    <BarraHorizontalConTexto text="Control de Pagos" />
    <div class="text-center">
        Lista de contratos que tienen canones atrasados
    </div>
    <hr>
    <div class="row g-3">
        {#if alquileres == null}
        <div class="d-flex justify-content-center">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </div>
        {:else}
        {#if alquileres.length == 0}
        <h1 class=" d-flex justify-content-center">
            No hay Alquileres que deban meses
        </h1>
        {/if}
        {#each alquileres as alquiler}
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0 text-center">{alquiler.tipoPropiedad}</h5>
                </div>
                <div class="card-body">
                    <h6 class="card-subtitle mb-2 text-muted">{alquiler.ubicacion}</h6>
                    <p class="card-text">
                        <strong>Fecha de inicio:</strong> {new Date(alquiler.fechainicio).toLocaleDateString()}<br />
                        <strong>Inquilino:</strong> {alquiler.inquilino}<br />
                        <strong>Propietario:</strong> {alquiler.propietario}<br>
                        <strong>Id Propiedad: </strong>{alquiler.id}
                    </p>
                    <div class="d-flex justify-content-center">
                        <button class="btn btn-primary" onclick={()=>navigate("/admin/contratos?id="+alquiler.id)}>
                            Ver
                        </button>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <strong>Estado:</strong> {alquiler.estado}
                </div>
            </div>
        </div>
        {/each}
        {/if}
    </div>
</div>