Untitled

<svelte:head>
    <title>Afspraak maken</title>
</svelte:head>

<!-- Script -->
<script lang="ts">

    // Imports
    import {onMount} from "svelte";
    import {page} from "$app/stores";
    import axios from "axios";
    import Popup from "$lib/components/Popup.svelte";
    import {
        CREATE_APPOINTMENT_ENDPOINT,
        GET_TIME_SLOTS_ENDPOINT, GET_TREATMENTS_AND_DRESSERS_ENDPOINT,
    } from "$lib/Endpoints";

    // QueryParam
    let salonGuid = $page.params.salonGuid;

    // Types
    type Treatment = {
        treatmentGuid: string;
        name: string;
        duration: string;
        accountGuids: string[];
    };

    type Hairdresser = {
        accountGuid: string;
        firstName: string;
    };

    type Appointment = {
        treatment?: Treatment;
        hairdresser?: Hairdresser;
        date?: string;
        timeSlot?: string;
    };

    type ContactInfo = {
        firstName?: string;
        lastName?: string;
        email?: string;
        phoneNumber?: string;
    };

    // Fetched data
    let treatments: Treatment[] = [];
    let hairdressers: Hairdresser[] = [];
    let availableTimeSlots: string[] = [];
    let filteredHairdressers: Hairdresser[] = [];

    // Fetching methods
    function fetchData() {

        axios.get(GET_TREATMENTS_AND_DRESSERS_ENDPOINT, {
            params: {
                salonGuid: salonGuid,
            }
        }).then(function (response) {
            treatments = response.data.treatments;
            hairdressers = response.data.dressers;
        }).catch(function (error) {
            console.error(error);
        });

    }

    function fetchTimeSlots(date: string, treatment?: Treatment, dresser?: Hairdresser) {

        if (treatment && dresser) {

            availableTimeSlots = [];

            axios.get(GET_TIME_SLOTS_ENDPOINT, {
                params: {
                    date: date,
                    salonGuid: salonGuid,
                    treatmentGuid: treatment.treatmentGuid,
                    accountGuid: dresser.accountGuid
                }
            })
            .then(function (response) {
                console.info(response);
                availableTimeSlots = response.data;
            })
            .catch(function (error) {
                console.error(error);
            });

        } else {
            console.error(`Treatment and/or dresser not found.`);
        }

    }

    // Selected info
    let selectedAppointment: Appointment = {};
    let contactInfo: ContactInfo = {};
    let showPopup = false;

    // Logic
    function handleDateChange(event: Event): void {
        if(selectedAppointment.date) {
            fetchTimeSlots(selectedAppointment.date, selectedAppointment.treatment, selectedAppointment.hairdresser);
        }
    }

    function handleTreatmentChange(event: Event): void {
        if (selectedAppointment.treatment) {
            filteredHairdressers = hairdressers.filter(hairdresser =>
                (selectedAppointment.treatment as Treatment).accountGuids.includes(hairdresser.accountGuid)
            );
        }

        selectedAppointment.hairdresser = undefined;
    }

    async function submitAppointment(): Promise<void> {

        if (selectedAppointment.date && selectedAppointment.treatment && selectedAppointment.hairdresser && selectedAppointment.timeSlot
            && contactInfo.firstName && contactInfo.lastName && contactInfo.email && contactInfo.phoneNumber) {

            axios.post(CREATE_APPOINTMENT_ENDPOINT, {
                salonGuid: salonGuid,
                treatmentGuid: selectedAppointment.treatment.treatmentGuid,
                accountGuid: selectedAppointment.hairdresser.accountGuid,
                date: selectedAppointment.date,
                startTime: selectedAppointment.timeSlot,
                contactInfo: contactInfo
            })
            .then(function (response) {
                console.info(response);
                selectedAppointment = {};
                showPopup = true;
            })
            .catch(function (error) {
                console.error(error)
            });

        }

    }

    // On mount
    onMount(() => {
        fetchData();
    });

</script>

<!-- Page -->
<Popup isOpen={showPopup} message="Afspraak gemaakt"/>

<div class="appointment-form">
    <h1>Maak een afspraak</h1>

    <!-- Select Treatment -->
    <label for="treatment">Select Treatment:</label>
    <select id="treatment" bind:value={selectedAppointment.treatment} on:change={handleTreatmentChange}>
        <option value={undefined}>-- Select a Treatment --</option>
        {#each treatments as treatment (treatment.treatmentGuid)}
            <option value={treatment}>{treatment.name}</option>
        {/each}
    </select>

    <!-- Select Hairdresser -->
    {#if selectedAppointment.treatment}
        <label for="hairdresser">Select Hairdresser:</label>
        <select id="hairdresser" bind:value={selectedAppointment.hairdresser}>
            <option value={undefined}>-- Select a Hairdresser --</option>
            {#each filteredHairdressers as hairdresser (hairdresser.accountGuid)}
                <option value={hairdresser}>{hairdresser.firstName}</option>
            {/each}
        </select>
    {/if}

    <!-- Select Date -->
    {#if selectedAppointment.hairdresser}
        <label for="date">Select Date:</label>
        <input id="date" type="date" bind:value={selectedAppointment.date} on:change={handleDateChange} />
    {/if}

    <!-- Select Time Slot -->
    {#if selectedAppointment.treatment && selectedAppointment.hairdresser && selectedAppointment.date}

        <label for="timeslot">Select Time Slot:</label>
        <select id="timeslot" bind:value={selectedAppointment.timeSlot}>
            <option value={undefined}>-- Select a Time Slot --</option>
            {#each availableTimeSlots as slot}
                <option value={slot}>{slot}</option>
            {/each}
        </select>

    {/if}

    <br>

    <!-- Contact Information -->
    {#if selectedAppointment.treatment && selectedAppointment.hairdresser && selectedAppointment.date && selectedAppointment.timeSlot}
        <h2>Contact Information:</h2>

        <form on:submit|preventDefault={submitAppointment} class="contact-form">
            <label for="firstName">First Name:</label>
            <input id="firstName" type="text" bind:value={contactInfo.firstName} required />

            <label for="lastName">Last Name:</label>
            <input id="lastName" type="text" bind:value={contactInfo.lastName} required />

            <label for="email">Email:</label>
            <input id="email" type="email" bind:value={contactInfo.email} required />

            <label for="phoneNumber">Phone Number:</label>
            <input id="phoneNumber" type="tel" bind:value={contactInfo.phoneNumber} required />

            <button type="submit" disabled={!contactInfo.firstName || !contactInfo.lastName || !contactInfo.email || !contactInfo.phoneNumber}>
                Submit Appointment
            </button>
        </form>
    {/if}

</div>


<!-- Styling -->
<style>

    .contact-form {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .appointment-form {
        display: flex;
        flex-direction: column;
        max-width: 400px;
        margin: auto;
    }

    label {
        margin-top: 10px;
    }

    select, input, button {
        margin-top: 5px;
        padding: 8px;
        font-size: 1rem;
    }

    button {
        margin-top: 20px;
        background-color: var(--color-theme-1);
        color: white;
        border: none;
        cursor: pointer;
    }

    button:disabled {
        background-color: lightgray;
        cursor: not-allowed;
    }
</style>