<template>
<div class="sale box-shadow">
    <p><span>{{ sale.sale_name }}</span> ({{ sale.status }})</p>
    <p>{{ sale.address }}</p>
    <p>Units: {{ sale.num_units }}</p>
    <p>Original List: {{ formatUSD(sale.original_listing_price) }}</p>
    <p>List: {{ formatUSD(sale.listing_price) }}</p>
    <p>Sold: {{ formatUSD(sale.sale_price) }}</p>
    <p>Asking Price/Unit: {{ formatUSD(sale.asking_price_unit) }}</p>

    <Link v-if="!detailed" :href="route('sale.show', { sale: sale.id })">Details</Link>

    <template v-else>
        <hr />
        <div class="row">
            <div class="col">
                <p><span>SalesForce ID:</span> {{ sale.sale_id }}</p>
                <p><span>Type:</span> {{ sale.record_type }}</p>
                <p><span>Property Type:</span> {{ sale.property_sub_type }}</p>
                <p><span>Comp Source:</span> {{ sale.comp_source }}</p>
                <p><span>Date Last Verified:</span> {{ sale.date_last_verified }}</p>
                <p><span>County:</span> {{ sale.property_county }}</p>
                <p><span>Size:</span> {{ sale.building_size_sf }} sq ft</p>
                <p><span>Built:</span> {{ sale.year_built }}</p>
            </div>

            <div class="col">
                <p><span>Terms:</span> {{ sale.sales_terms }}</p>
                <p><span>Loan Amount:</span> {{ formatUSD(sale.loan_amount) }}</p>
                <p><span>Percent Down:</span> {{ sale.percent_down_payment }}%</p>
            </div>

            <div class="col">
                <p><span>Market:</span> {{ sale.market.name }}</p>
                <p><span>Sub Market:</span> {{ sale.sub_market.name }}</p>
                <p>&nbsp;</p>
                <p><span>Sold Date:</span> {{ sale.sale_date }}</p>
                <p><span>Escrow Length:</span> {{ sale.length_of_escrow }}</p>
                <p><span>Sold Unit Price:</span> {{ formatUSD(sale.sold_price_unit) }}</p>

            </div>
        </div>
        {{ sale }}
    </template>
</div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3';
import { formatUSD } from '@/lib/helpers.js';

const props = defineProps({
    sale: {
        type: Object,
        default: {},
    },
    detailed: {
        type: Boolean,
        default: false,
    },
});
</script>

<style lang="scss" scoped>
@import "../../scss/variables.scss";

.sale {
    padding: 1rem;
    border: 1px solid $c-offWhite;
    border-radius: 5px;
}

p {
    margin: 0;
}

span {
    font-weight: bold;
}
</style>
