<script setup>
    import Swal from 'sweetalert2';
    import { getDateMonthDay } from '../helpers/date_formats';
    import { getStatusLoad } from '../helpers/status';
    import { useCompanyStore } from '../stores/company';
    import { useAuthStore } from '../stores/auth';
    import { useI18n } from 'vue-i18n';
    
    const props = defineProps({
        proposal: {
            type: Object,
            required: true,
        }
    })

    console.log(props.proposal)    

    const companyStore = useCompanyStore();
    const authStore = useAuthStore();
    const { t, locale } = useI18n();

    const handleWithdrawnProposal = async() => {

        Swal.fire({
            title: t('proposals.titleRetireModal'),
            text: t('proposals.textRetireModal'),
            icon: 'warning',
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonText: t('proposals.confirmRetire'),
            cancelButtonText: 'No',
        }).then(async(result) => {
            if(result.isConfirmed) {
                Swal.fire({
                    title: t('messages.loading'),
                    html: t('proposals.loadingRetired') + '...',// add html attribute if you want or remove
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    },
                });

                let formData = {
                    is_withdrawn : true
                }

                let localData = {
                    vehicle: props.proposal.vehicle,
                    load: props.proposal.load
                }

                const resp = await companyStore.updatePropsalLoad(props.proposal._id, formData, localData);

                Swal.close();
                
                if(resp != null) {
                    Swal.fire({
                        title: t('proposals.msgTitleRetire'),
                        text: t('proposals.msgCancel'),
                        icon: "success"
                    });
                } else {
                    Swal.fire({
                        title: "Error",
                        text: t('proposals.msgNotCancel'),
                        icon: "error"
                    });
                }
            }

        });
    }

    defineEmits(['set-proposal']);
</script>

<template>
    <div class="card-fixed card-load mt-4">
        <br>
        <div class="box-proposal">
            <div class="">
                <p v-if="proposal.vehicle"><span>{{ t('labels.codeId') }}:</span> {{proposal.vehicle.vehicle_code}}</p>
                <p v-if="proposal.vehicle"><span>{{ t('global.segment') }}:</span> {{proposal.load.categories?.map((e) => e.name).join(', ')}}</p>
                <p v-if="proposal.vehicle"><span>{{ t('directory.typeTruck') }}:</span> {{proposal.vehicle.truck_type}}</p>
                <p v-if="proposal.vehicle"><span>{{ t('labels.datePublished') }}:</span> {{ getDateMonthDay(proposal.vehicle.published_date) }}</p>
                <p v-if="proposal.vehicle"><span>{{ t('labels.dateAvailable') }}:</span> {{ getDateMonthDay(proposal.vehicle.available_date) }}</p>
                <p v-if="proposal.vehicle"><span>{{ t('vehicles.availableIn') }}:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
                <p v-if="proposal.vehicle"><span>{{ t('loads.destination') }}:</span> {{proposal.vehicle.destino}}</p>
                <p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 1:</span> {{proposal.vehicle.trailer_plate_1}}</p>
                <p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 2:</span> {{proposal.vehicle.trailer_plate_2}}</p>
                <p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load, locale).color}"><span>{{  t('loads.loadStatus') }}:</span> {{ getStatusLoad(proposal.load, locale).status}}</p>
            </div>
             
            <div class="">
                <p v-if="proposal.load"> {{ t('loads.loadCode') }}: 
                    <span 
                        class="code-enruta"
                        @click="$emit('set-proposal', {proposal: proposal, modal: 'detail'})"
                        data-toggle="modal" data-target="#loadDetailModal"
                    >{{proposal.load.shipment_code}}</span></p>
                <p v-if="proposal._driver">{{ t('labels.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> -->
            <div v-if="proposal.is_withdrawn" class="indicator-cancel">
                <i class="fa-solid fa-ban"></i>
                {{ t('proposals.retired') }}
            </div>
            <button  
                v-else
                v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
                type="button" 
                class="btn btn-danger radius-sm" 
                @click="handleWithdrawnProposal"
            >
                <i class="fa-solid fa-ban"></i>
                {{ t('proposals.withdraw') }}
            </button>
            <button
                v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
                class="btn-primary-sm radius-sm"
                @click="$emit('set-proposal', {proposal: proposal, modal: 'edit'})"
                data-toggle="modal" data-target="#makeProposalModal"
            ><i class="fa-solid fa-pen-to-square"></i> {{ t('buttons.edit') }}</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;
    }

    .code-enruta {
        cursor: pointer;
        color: rgb(107, 107, 227);
    }
    
    .code-enruta:hover{
        color: rgb(75, 75, 228);
    }

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

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

    .indicator-cancel {
        width: 120px;
        padding: 10px 12px;
        background: #FFF;
        /* border: 1px solid red; */
        border-radius: 50px;
        color: red;
    }

    .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>