<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-1 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.name }}</span>
                        <span class="mx-1 text-gray-300">|</span>
                        <span
                            :class="[
                                'text-xs font-bold',
                                item.attributes.type === 'firm' ? 'text-blue-600' : 'text-orange-500',
                            ]"
                        >
                            {{ item.attributes.type | ucwords }}
                        </span>
                        <span class="mx-1 text-gray-300">|</span>
                        <span
                            :class="[
                                'text-xs font-bold',
                                statusTextClass(item),
                            ]"
                        >
                            {{ item.attributes.status | ucwords }}
                        </span>
                    </div>
                    <div class="mt-1">
                        <span class="text-sm text-gray-500">{{ item.attributes.date | calendarDate }}</span>
                        <span class="mx-1 text-gray-300">|</span>
                        <a :href="'mailto:' + item.attributes.email" class="text-sm text-gray-400 hover:text-gray-600 hover:underline">{{ item.attributes.email }}</a>
                    </div>
                </div>
                <div class="col-span-1 text-right md:text-left lg:text-right">
                    <button
                        @click.prevent="editItem(item)"
                        title="Edit Appointment"
                        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 Appointment"
                        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>
                    <button
                        v-if="isReserved(item)"
                        @click.prevent="approveItem(item)"
                        title="Approve Appointment"
                        class="p-1 text-green-400 rounded-full hover:bg-green-100 hover:text-green-500 focus:outline-none focus:shadow-outline focus:text-green-500"
                    >
                        <svg fill="none" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" class="h-5 w-5" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z"></path>
                        </svg>
                    </button>
                    <button
                        v-if="isReserved(item)"
                        @click.prevent="rejectItem(item)"
                        title="Reject Appointment"
                        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="none" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" class="h-5 w-5" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M7.498 15.25H4.372c-1.026 0-1.945-.694-2.054-1.715a12.137 12.137 0 0 1-.068-1.285c0-2.848.992-5.464 2.649-7.521C5.287 4.247 5.886 4 6.504 4h4.016a4.5 4.5 0 0 1 1.423.23l3.114 1.04a4.5 4.5 0 0 0 1.423.23h1.294M7.498 15.25c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.75 2.25 2.25 0 0 0 9.75 22a.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384m-10.253 1.5H9.7m8.075-9.75c.01.05.027.1.05.148.593 1.2.925 2.55.925 3.977 0 1.487-.36 2.89-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398-.306.774-1.086 1.227-1.918 1.227h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    name : "CalendarAppointmentItem",
    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 : {
        isReserved(item) {
            return item.attributes.status === 'reserved';
        },
        statusTextClass(item) {
            switch (item.attributes.status) {
                case 'approved':
                    return 'text-green-600';
                case 'rejected':
                    return 'text-red-500';
                case 'reserved':
                default:
                    return 'text-yellow-600';
            }
        },

        editItem(item) {
            window.EventBus.$emit('calendarAppointment: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('calendarAppointment:deleteItem', {
                        item : item,
                    });
                }
            });
        },
        approveItem(item) {
            window.EventBus.$emit('calendarAppointment:approveItem', {
                item : item,
            });
        },
        rejectItem(item) {
            window.EventBus.$emit('calendarAppointment:rejectItem', {
                item : item,
            });
        },
    }
}
</script>
