<script setup>
    import { getDateMonthDay } from '../helpers/date_formats';
    import { getStatusLoad } from '../helpers/status';

    defineProps({
        proposal: {
            type: Object,
            required: true,
        }
    })
</script>

<template>
    <div class="card-fixed card-load mt-4">
        <br>
        <div class="box-proposal">
            <div class="">
                <p v-if="proposal.vehicle"><span>Código:</span> {{proposal.vehicle.vehicle_code}}</p>
                <p v-if="proposal.vehicle"><span>Segmento:</span> {{proposal._categories}}</p>
                <p v-if="proposal.vehicle"><span>Tipo de transporte:</span> {{proposal.vehicle.truck_type}}</p>
                <p v-if="proposal.vehicle"><span>Fecha de publicación:</span> {{ getDateMonthDay(proposal.vehicle.published_date) }}</p>
                <p v-if="proposal.vehicle"><span>Fecha dispobible:</span> {{ getDateMonthDay(proposal.vehicle.available_date) }}</p>
                <p v-if="proposal.vehicle"><span>Disponible en:</span> {{proposal.vehicle.city}}<span v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</span></p>
                <p v-if="proposal.vehicle"><span>Destino:</span> {{proposal.vehicle.destino}}</p>
                <p v-if="proposal.vehicle"><span>Placas remolque 1:</span> {{proposal.vehicle.trailer_plate_1}}</p>
                <p v-if="proposal.vehicle"><span>Placas remolque 2:</span> {{proposal.vehicle.trailer_plate_2}}</p>
                <p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load).color}"><span>Status de la carga:</span> {{ getStatusLoad(proposal.load).status }}</p>
            </div>
            
            <div class="">
                <p v-if="proposal.load"> Código de carga: 
                    <span 
                        class="code-enruta"
                    >{{proposal.load.shipment_code}}</span></p>
                <p v-if="proposal._driver">Operator: {{proposal._driver}}</p>
            </div>
        </div>
        <div class="btn-row">
            <button
                class="btn-primary-sm"
                data-toggle="modal" data-target="#editcompanymodal"
            ><i class="fa-solid fa-ban"></i> Retirar</button>
            <button
                class="btn-primary-sm"
                data-toggle="modal" data-target="#editcompanymodal"
            ><i class="fa-solid fa-pen-to-square"></i> Editar</button>
            <button
                class="btn-primary-sm"
                data-toggle="modal" data-target="#editcompanymodal"
            > Cancelar</button>
        </div>
    </div>
</template>

<style  scoped>
    .card-load {
        flex-direction: column;
        width: 100% !important;
    }

    .box-proposal {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .tracking-icon {
        cursor: pointer;
        color: #f2a23f;
    }

    .tracking-icon svg{
    height: 30px;
    }
    .tracking-icon:hover {
        color: #ddb380;;
        height: 150px;
    }

    .tracking-icon svg:hover{
        height: 33px;
    }

    p {
        font-size: 1rem;
        font-weight: 400;
        color: #323032;
    }
    
    p span {
        color: #323032;
        font-weight: 700;
    }

    .btn-row {
        margin-top: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: end;
        gap: 1rem;
    }

    .box-note {
        padding: 8px 16px;
        background-color: aqua;
        border-radius: 13px;
    }
    
    @media (max-width: 768px) {
        .box-proposal {
            flex-direction: column-reverse;
        }
        .btn-row {
            gap: 0.2rem;
        }
    }
</style>