<script setup>
    import { onMounted, ref } from 'vue';
    import { useCompanyStore } from '../stores/company';
    import Spiner from './ui/Spiner.vue';

    const props = defineProps({
        driver: {
            type: Object
        }
    });

    defineEmits(['reset-vehicle']);

    const companyStore = useCompanyStore();

    const driverSelected = ref(null);
    const drivers = ref([]);

    onMounted(() => {   
        drivers.value = companyStore.users?.filter((u) => u.job_role == 'driver');
        if(props.driver) {
            const index = drivers.value.findIndex((d) => d._id === props.driver?._id);
            driverSelected.value = drivers.value[index];
        }
    });


</script>

<template>
    <div class="modal fade" id="editDriverVehicle" tabindex="-1" role="dialog" aria-labelledby="editDriverVehicle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="title mt-2 mb-3">Cambiar conductor</h2>
                    <button 
                        id="btnCloseeditDriverVehicle" 
                        type="button" 
                        class="close bg-white" 
                        data-dismiss="modal" 
                        aria-label="Close"
                        @click="$emit('reset-vehicle')"
                    >
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body view-proposals">
                    <div class="custom-selected-field">
                        <label class="custom-label my-2" for="driver">Conductor asignado:</label>
                        <select 
                            class="custom-input-light"
                            name="driver" 
                            id="driver" 
                            v-model="driverSelected"
                        >
                            <option disabled value="">-- Seleccionar conductor --</option>
                            <option v-for="driver in drivers" :value="driver">{{driver.name}}</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button 
                        type="button" 
                        class="btn btn-dark radius-sm" 
                        data-dismiss="modal"
                        @click="$emit('reset-vehicle')"
                    >Cancelar</button>
                    <button 
                        class="btn-primary-sm radius-sm"
                    >
                        <span class="clear-xsm">Guardar</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .custom-selected-field {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
    }
</style>