<script lang="ts">
    import type { PropiedadAdmin } from "../types";
    import {urlG} from "../stores/urlStore";

    let { prop, modal }: { prop: PropiedadAdmin, modal: (a:string) => void } = $props();

    const token = sessionStorage.getItem("token");

    async function cambioEstado() {
        try {
            const response = await fetch($urlG+"/api/admin/propiedad?id="+prop.id, {
                method: "DELETE",
                headers: {
                    "Auth": String(token)
                }
            });
            
            if (response.ok) {
                prop.estado = prop.estado=="Baja" ? "Disponible": "Baja";
            }

            let data = await response.json();
            modal(String(data.message));
            
            
        } catch {
            modal("Fallo al intentar enviar la peticion para dar de baja");
        }
    }
</script>

<div class="card text-center border shadow-sm">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0">{prop.tipo}</h5>
    </div>
    <div class="card-body">
        <div class="card-img-top mb-3">
            <i class="bi bi-building" style="font-size: 3rem;"></i>
        </div>
        <h6 class="card-title">{prop.ubicacion}</h6>
        <p class="card-text">
            <strong>Habitaciones:</strong> {prop.canthabitaciones}<br>
            <strong>Piso:</strong> {prop.piso || "N/A"}<br>
            <strong>Letra:</strong> {prop.letra || "N/A"}<br>
            <strong>Servicios:</strong> {prop.servicios || "Sin servicios especificados"}<br>
            <strong>Monto:</strong> ${prop.monto}<br>
            <strong>Estado:</strong> {prop.estado}<br>
        </p>
        {#if prop.estado == "Disponible"}
        <button class="btn btn-success" onclick={cambioEstado}>Baja</button>
        {:else}
        <button class="btn btn-danger" onclick={cambioEstado}>Alta</button>
        {/if}
    </div>
    <div class="card-footer text-muted">
        ID Propiedad: {prop.id}
    </div>
</div>
  