<template>
    <div
        :id="item.id"
        class="mb-2"
    >
        <div class="overflow-hidden bg-white hover:bg-gray-100 px-4 py-3 shadow">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 items-center">
                <div class="col-span-2">
                    <div class="flex items-center flex-wrap gap-1">
                        <span class="text-sm font-bold text-gray-800">
                            {{ item.attributes.date | calendarDate }}
                        </span>
                        <span class="mx-1 text-gray-300">|</span>
                        <span
                            :class="[
                                'text-xs font-bold',
                                item.attributes.type === 'unavailable' ? 'text-red-500' : 'text-orange-500',
                            ]"
                        >
                            {{ item.attributes.type | ucwords }}
                        </span>
                    </div>
                    <div v-if="item.attributes.message" class="mt-1">
                        <span class="text-sm text-gray-500">{{ item.attributes.message | truncate(50, '...') }}</span>
                    </div>
                </div>
                <div class="col-span-1 text-right md:text-left lg:text-right">
                    <button
                        @click.prevent="editItem(item)"
                        title="Edit Restriction"
                        class="p-1 text-gray-400 rounded-full hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:shadow-outline focus:text-gray-500"
                    >
                        <svg fill="currentColor" viewBox="0 0 20 20" class="h-5 w-5">
                            <path
                                d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
                            ></path>
                        </svg>
                    </button>
                    <button
                        @click.prevent="deleteItem(item)"
                        title="Delete Restriction"
                        class="p-1 text-red-400 rounded-full hover:bg-red-100 hover:text-red-500 focus:outline-none focus:shadow-outline focus:text-red-500"
                    >
                        <svg fill="currentColor" viewBox="0 0 20 20" class="h-5 w-5">
                            <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"></path>
                            <path
                                d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"
                                clip-rule="evenodd" fill-rule="evenodd"
                            ></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    name : "CalendarRestrictionItem",
    props : {
        item : {type : Object, required : true},
    },
    filters : {
        calendarDate(val) {
            if (!val) return '';
            let date = window.moment(val, ['DD/MM/YYYY', 'YYYY-MM-DD']);
            return date.isValid() ? date.format('dddd Do MMMM YYYY') : val;
        },
    },
    methods : {
        editItem(item) {
            window.EventBus.$emit('calendarRestriction:editItem', {
                item : item,
            });
        },
        deleteItem(item) {
            window.swal.fire({
                title : 'Are you sure?',
                text : 'Please click confirm to delete this item',
                showCancelButton : true,
                confirmButtonColor : '#D9534F',
                confirmButtonText : 'Yes, delete it!',
            }).then((result) => {
                if (result.isConfirmed) {
                    window.EventBus.$emit('calendarRestriction:deleteItem', {
                        item : item,
                    });
                }
            });
        },
    }
}
</script>
