<script setup>
    import Swal from 'sweetalert2';
    import { useCompanyStore } from '../stores/company';

    const props = defineProps({
        location: {
            type: Object,
            required: true
        }
    })

    defineEmits(['set-location'])
    
    const companyStore = useCompanyStore();

    const handleDeleteLocation = async() => {
        Swal.fire({
            title: 'Eliminar Locación!',
            text: '¿Estás seguro de eliminar este locación?',
            icon: 'warning',
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonText: 'Eliminar',
            cancelButtonText: 'Cancelar',
        }).then(async(result) => {
            if(result.isConfirmed) {
                Swal.fire({
                    title: 'Por favor espere!',
                    html: 'Eliminando locación...',// add html attribute if you want or remove
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    },
                });

                const resp = await companyStore.deleteLocationCompany(props.location._id)

                Swal.close();
                
                if(resp != null) {
                    Swal.fire({
                        title: "Locación eliminado!",
                        text: "Tu locación ha sido eliminado exitosamente.",
                        icon: "success"
                    });
                } else {
                    Swal.fire({
                        title: "No eliminado!",
                        text: "Tu locación no se pudo eliminar, intente más tarde.",
                        icon: "error"
                    });
                }
            }

        });

    }
</script>

<template>
    <div class="card-fixed card-location">
        <div>
            <p><span>Nombre de la locación de carga:</span> {{location.branch_name}}</p>
            <p><span>Dirección:</span> <template v-if="location.address">{{location.address}}, </template><template v-if="location.city">{{location.city}}, </template><template v-if="location.state">{{location.state}}</template></p>
            <p><span>Teléfono:</span> {{location.phone}}</p>
            <p><span>Tipos de camiones que se necesitan:</span> {{location.truck_type?.map((e) => e).join(', ')}}</p>
            <p><span>Segmento:</span> {{location.categories.map((e) => e.name).join(', ')}}</p>
            <p v-if="location.description"><span>Información adicional de la locación de carga:</span></p>
            <div v-if="location.description" class="box-note mb-4">
                {{ location.description }}
            </div>
        </div>
        <div class="card-footer">
            <button 
                class="btn btn-dark radius-sm"
                @click="handleDeleteLocation"
            >
                <i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
            </button>
            <button 
                class="btn-primary-sm radius-sm"
                @click="$emit('set-location')"
                data-toggle="modal" data-target="#locationFormModal"
            >
                <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">Editar</span>
            </button>
        </div>
    </div>
</template>

<style scoped>
    .card-location {
        flex-direction: column;
    }

    .card-footer {
        display: flex;
        justify-content: end;
        gap: 1rem;
    }

    .box-note {
        padding: 12px 16px;
        background-color: aqua;
        border-radius: 13px;
    }

    p {
        font-size: 1rem;
        font-weight: normal;
    }

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