<script lang="ts">
    // This is a placeholder for any script you might want to add
    // For example, you could handle form submission here
    import { onMount } from "svelte";
    import { supabase } from "$lib/supabaseClient";
    import { writable } from "svelte/store";
    import { on } from "svelte/events";

    type villa = {
        id: string;
        name: string;
    };

    const villas = writable<villa[]>([]);

    onMount(async () => {
        const { data, error } = await supabase
            .from("villas")
            .select("id, name");

        if (error) {
            console.error("Error fetching villas:", error);
        } else {
            villas.set(data || []);
        }
    });

    type dinning = {
        id: string;
        villa_id: string;
        guest_name: string;
        guest_email: string;
        date_time_to_serve: string;
        total_guests: number;
        be_pasih_klungkung: number;
        seafood_bbq_jimbaran: number;
        ayam_betutu_gilimanuk: number;
        babi_guling_gianyar: number;
        indonesian_set_menu: number;
        gado_gado: number;
        spring_rolls: number;
        perkedel_jagung: number;
        soto_ayam: number;
        satay: number;
        rendang: number;
        babi_rica_rica: number;
        bbq_pork_ribs: number;
        cap_cay: number;
        nasi_goreng_chicken: number;
        nasi_goreng_seafood: number;
        nasi_goreng_vegetarian: number;
        nasi_goreng_pork: number;
        mie_goreng_chicken: number;
        mie_goreng_seafood: number;
        mie_goreng_vegetarian: number;
        mie_goreng_pork: number;
        french_fries: number;
        fried_calamari: number;
        bbq_chicken_wings: number;
        balinese_chicken_curry: number;
        steamed_rice: number;
        won_tons: number;
        spaghetti_bolognese: number;
        spaghetti_carbonara: number;
        spaghetti_napolitana: number;
        french_fries_kids_meals: number;
        bbq_chicken_wings_kids_meals: number;
        club_sandwich_kids_meals: number;
        pisang_goreng_desserts: number;
        bubur_injin_desserts: number;
        fresh_fruit_desserts: number;
        cape_discovery_shiraz_drinks: number;
        cape_discovery_sauvignon_drinks: number;
        bintang_beer_bottle_330ml_drinks: number;
        bintang_beer_case_330ml_24bottle_drinks: number;
        bintang_beer_can_330ml_drinks: number;
        bintang_beer_case_330ml_24can_drinks: number;
        bintang_radler_lemon_beer_bottle_330ml_drinks: number;
        bintang_radler_lemon_beer_case_330ml_24bottle_drinks: number;
        san_miguel_beer_bottle_330ml_drinks: number;
        san_miguel_beer_case_330ml_24bottle_drinks: number;
        orange_juice_drinks: number;
        coke_can_drinks: number;
        coke_case_drinks: number;
        diet_coke_can_drinks: number;
        diet_coke_case_drinks: number;
        sprite_can_drinks: number;
        sprite_case_drinks: number;
        fanta_can_drinks: number;
        fanta_case_drinks: number;
        soda_can_drinks: number;
        soda_case_drinks: number;
        tonic_water_can_drinks: number;
        tonic_water_case_drinks: number;
        comment: string;
    };

    type dinningInsert = {
        villa_id: string;
        guest_name: string;
        guest_email: string;
        date_time_to_serve: string;
        total_guests: number;
        be_pasih_klungkung: number;
        seafood_bbq_jimbaran: number;
        ayam_betutu_gilimanuk: number;
        babi_guling_gianyar: number;
        indonesian_set_menu: number;
        gado_gado: number;
        spring_rolls: number;
        perkedel_jagung: number;
        soto_ayam: number;
        satay: number;
        rendang: number;
        babi_rica_rica: number;
        bbq_pork_ribs: number;
        cap_cay: number;
        nasi_goreng_chicken: number;
        nasi_goreng_seafood: number;
        nasi_goreng_vegetarian: number;
        nasi_goreng_pork: number;
        mie_goreng_chicken: number;
        mie_goreng_seafood: number;
        mie_goreng_vegetarian: number;
        mie_goreng_pork: number;
        french_fries: number;
        fried_calamari: number;
        bbq_chicken_wings: number;
        balinese_chicken_curry: number;
        steamed_rice: number;
        won_tons: number;
        spaghetti_bolognese: number;
        spaghetti_carbonara: number;
        spaghetti_napolitana: number;
        french_fries_kids_meals: number;
        bbq_chicken_wings_kids_meals: number;
        club_sandwich_kids_meals: number;
        pisang_goreng_desserts: number;
        bubur_injin_desserts: number;
        fresh_fruit_desserts: number;
        cape_discovery_shiraz_drinks: number;
        cape_discovery_sauvignon_drinks: number;
        bintang_beer_bottle_330ml_drinks?: number;
        bintang_beer_case_330ml_24bottle_drinks?: number;
        bintang_beer_can_330ml_drinks?: number;
        bintang_beer_case_330ml_24can_drinks?: number;
        bintang_radler_lemon_beer_bottle_330ml_drinks?: number;
        bintang_radler_lemon_beer_case_330ml_24bottle_drinks?: number;
        san_miguel_beer_bottle_330ml_drinks?: number;
        san_miguel_beer_case_330ml_24bottle_drinks?: number;
        orange_juice_drinks?: number;
        coke_can_drinks?: number;
        coke_case_drinks?: number;
        diet_coke_can_drinks?: number;
        diet_coke_case_drinks?: number;
        sprite_can_drinks?: number;
        sprite_case_drinks?: number;
        fanta_can_drinks?: number;
        fanta_case_drinks?: number;
        soda_can_drinks?: number;
        soda_case_drinks?: number;
        tonic_water_can_drinks?: number;
        tonic_water_case_drinks?: number;
        comment: string;
    };

    async function handleSubmit(event: Event): Promise<void> {
        event.preventDefault();

        const formData = new FormData(event.target as HTMLFormElement);

        // Validate form data
        if (!validateForm(formData)) {
            console.error("Form validation failed");
            return;
        }
        const dinningData: dinningInsert = {
            villa_id: formData.get("villa_id") as string,
            guest_name: formData.get("guest_name") as string,
            guest_email: formData.get("guest_email") as string,
            date_time_to_serve: formData.get("date_time_to_serve") as string,
            total_guests: parseInt(formData.get("total_guests") as string, 10),
            be_pasih_klungkung: parseInt(
                formData.get("be_pasih_klungkung") as string,
                0,
            ),
            seafood_bbq_jimbaran: parseInt(
                formData.get("seafood_bbq_jimbaran") as string,
                0,
            ),
            ayam_betutu_gilimanuk: parseInt(
                formData.get("ayam_betutu_gilimanuk") as string,
                0,
            ),
            babi_guling_gianyar: parseInt(
                formData.get("babi_guling_gianyar") as string,
                0,
            ),
            indonesian_set_menu: parseInt(
                formData.get("indonesian_set_menu") as string,
                0,
            ),
            gado_gado: parseInt(formData.get("gado_gado") as string, 10),
            spring_rolls: parseInt(formData.get("spring_rolls") as string, 10),
            perkedel_jagung: parseInt(
                formData.get("perkedel_jagung") as string,
                0,
            ),
            soto_ayam: parseInt(formData.get("soto_ayam") as string, 10),
            satay: parseInt(formData.get("satay") as string, 10),
            rendang: parseInt(formData.get("rendang") as string, 10),
            babi_rica_rica: parseInt(
                formData.get("babi_rica_rica") as string,
                0,
            ),
            bbq_pork_ribs: parseInt(formData.get("bbq_pork_ribs") as string, 0),
            cap_cay: parseInt(formData.get("cap_cay") as string, 10),
            nasi_goreng_chicken: parseInt(
                formData.get("nasi_goreng_chicken") as string,
                0,
            ),
            nasi_goreng_seafood: parseInt(
                formData.get("nasi_goreng_seafood") as string,
                0,
            ),
            nasi_goreng_vegetarian: parseInt(
                formData.get("nasi_goreng_vegetarian") as string,
                0,
            ),
            nasi_goreng_pork: parseInt(
                formData.get("nasi_goreng_pork") as string,
                0,
            ),
            mie_goreng_chicken: parseInt(
                formData.get("mie_goreng_chicken") as string,
                0,
            ),
            mie_goreng_seafood: parseInt(
                formData.get("mie_goreng_seafood") as string,
                0,
            ),
            mie_goreng_vegetarian: parseInt(
                formData.get("mie_goreng_vegetarian") as string,
                0,
            ),
            mie_goreng_pork: parseInt(
                formData.get("mie_goreng_pork") as string,
                0,
            ),
            french_fries: parseInt(formData.get("french_fries") as string, 10),
            fried_calamari: parseInt(
                formData.get("fried_calamari") as string,
                0,
            ),
            bbq_chicken_wings: parseInt(
                formData.get("bbq_chicken_wings") as string,
                0,
            ),
            balinese_chicken_curry: parseInt(
                formData.get("balinese_chicken_curry") as string,
                0,
            ),
            steamed_rice: parseInt(formData.get("steamed_rice") as string, 10),
            won_tons: parseInt(formData.get("won_tons") as string, 10),
            spaghetti_bolognese: parseInt(
                formData.get("spaghetti_bolognese") as string,
                0,
            ),
            spaghetti_carbonara: parseInt(
                formData.get("spaghetti_carbonara") as string,
                0,
            ),
            spaghetti_napolitana: parseInt(
                formData.get("spaghetti_napolitana") as string,
                0,
            ),
            french_fries_kids_meals: parseInt(
                formData.get("french_fries_kids_meals") as string,
                0,
            ),
            bbq_chicken_wings_kids_meals: parseInt(
                formData.get("bbq_chicken_wings_kids_meals") as string,
                0,
            ),
            club_sandwich_kids_meals: parseInt(
                formData.get("club_sandwich_kids_meals") as string,
                0,
            ),
            pisang_goreng_desserts: parseInt(
                formData.get("pisang_goreng_desserts") as string,
                0,
            ),
            bubur_injin_desserts: parseInt(
                formData.get("bubur_injin_desserts") as string,
                0,
            ),
            fresh_fruit_desserts: parseInt(
                formData.get("fresh_fruit_desserts") as string,
                0,
            ),
            cape_discovery_shiraz_drinks: parseInt(
                formData.get("cape_discovery_shiraz_drinks") as string,
                0,
            ),
            cape_discovery_sauvignon_drinks: parseInt(
                formData.get("cape_discovery_sauvignon_drinks") as string,
                0,
            ),
            bintang_beer_bottle_330ml_drinks: parseInt(
                formData.get("bintang_beer_bottle_330ml_drinks") as string,
                0,
            ),
            bintang_beer_case_330ml_24bottle_drinks: parseInt(
                formData.get(
                    "bintang_beer_case_330ml_24bottle_drinks",
                ) as string,
                0,
            ),
            bintang_beer_can_330ml_drinks: parseInt(
                formData.get("bintang_beer_can_330ml_drinks") as string,
                0,
            ),
            bintang_beer_case_330ml_24can_drinks: parseInt(
                formData.get("bintang_beer_case_330ml_24can_drinks") as string,
                0,
            ),
            bintang_radler_lemon_beer_bottle_330ml_drinks: parseInt(
                formData.get(
                    "bintang_radler_lemon_beer_bottle_330ml_drinks",
                ) as string,
                0,
            ),
            bintang_radler_lemon_beer_case_330ml_24bottle_drinks: parseInt(
                formData.get(
                    "bintang_radler_lemon_beer_case_330ml_24bottle_drinks",
                ) as string,
                0,
            ),
            san_miguel_beer_bottle_330ml_drinks: parseInt(
                formData.get("san_miguel_beer_bottle_330ml_drinks") as string,
                0,
            ),
            san_miguel_beer_case_330ml_24bottle_drinks: parseInt(
                formData.get(
                    "san_miguel_beer_case_330ml_24bottle_drinks",
                ) as string,
                0,
            ),
            orange_juice_drinks: parseInt(
                formData.get("orange_juice_drinks") as string,
                0,
            ),
            coke_can_drinks: parseInt(
                formData.get("coke_can_drinks") as string,
                0,
            ),
            coke_case_drinks: parseInt(
                formData.get("coke_case_drinks") as string,
                0,
            ),
            diet_coke_can_drinks: parseInt(
                formData.get("diet_coke_can_drinks") as string,
                0,
            ),
            diet_coke_case_drinks: parseInt(
                formData.get("diet_coke_case_drinks") as string,
                0,
            ),
            sprite_can_drinks: parseInt(
                formData.get("sprite_can_drinks") as string,
                0,
            ),
            sprite_case_drinks: parseInt(
                formData.get("sprite_case_drinks") as string,
                0,
            ),
            fanta_can_drinks: parseInt(
                formData.get("fanta_can_drinks") as string,
                0,
            ),
            fanta_case_drinks: parseInt(
                formData.get("fanta_case_drinks") as string,
                0,
            ),
            soda_can_drinks: parseInt(
                formData.get("soda_can_drinks") as string,
                0,
            ),
            soda_case_drinks: parseInt(
                formData.get("soda_case_drinks") as string,
                0,
            ),
            tonic_water_can_drinks: parseInt(
                formData.get("tonic_water_can_drinks") as string,
                0,
            ),
            tonic_water_case_drinks: parseInt(
                formData.get("tonic_water_case_drinks") as string,
                0,
            ),
            comment: formData.get("comment") as string,
        };

        const { data, error } = await supabase
            .from("vb_dinning")
            .insert([dinningData]);

        if (error) {
            console.error("Error submitting transport:", error);
        } else {
            console.log("Transport submitted successfully:", data);
            alert("Transport submitted successfully!");
        }
    }

    export let formErrors = writable<{ [key: string]: string }>({});

    function validateForm(formData: FormData): boolean {
        const errors: { [key: string]: string } = {};
        const requiredFields = [
            "villa_id",
            "guest_name",
            "guest_email",
            "date_time_to_serve",
            "total_guests",
        ];

        requiredFields.forEach((field) => {
            if (!formData.get(field) || formData.get(field) === "") {
                errors[field] = `${field.replace(/_/g, " ")} is required.`;
            }
        });

        formErrors.set(errors);
        return Object.keys(errors).length === 0;
    }

    function errorClass(field: string): string {
        return $formErrors[field] ? "border-red-500" : "border";
    }
</script>

<div>
    <form
        class="max-w-6xl mx-auto bg-white p-8 rounded-2xl shadow-xl space-y-8 text-gray-800"
        on:submit|preventDefault={handleSubmit}
    >
        <!-- logo -->
        <div class="text-center mb-6">
            <img
                src="/src/lib/images/logo.webp"
                alt="Logo"
                class="mx-auto"
                loading="lazy"
                width="250"
            />
        </div>
        <!-- Title -->
        <h2 class="text-2xl font-semibold text-center">Dinning Request</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Villa -->
            <div>
                <label class="block text-sm font-medium mb-1">Villa</label>
                <select
                    name="villa_id"
                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
                        'villa_id',
                    )}"
                >
                    <option value="" disabled selected>Select Villa</option>
                    {#each $villas as villa}
                        <option value={villa.id}>{villa.name}</option>
                    {/each}
                </select>
                {#if $formErrors.villa_id}
                    <p class="text-red-500 text-xs mt-1">
                        {$formErrors.villa_id}
                    </p>
                {/if}
            </div>
            <!-- Guest Name -->
            <div>
                <label class="block text-sm font-medium mb-1">Guest Name</label>
                <input
                    type="text"
                    name="guest_name"
                    placeholder="Guest Name"
                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
                        'guest_name',
                    )}"
                />
                {#if $formErrors.guest_name}
                    <p class="text-red-500 text-xs mt-1">
                        {$formErrors.guest_name}
                    </p>
                {/if}
            </div>
            <!-- Guest Email -->
            <div>
                <label class="block text-sm font-medium mb-1">Guest Email</label
                >
                <input
                    type="email"
                    name="guest_email"
                    placeholder="Guest Email"
                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
                        'guest_email',
                    )}"
                />
                {#if $formErrors.guest_email}
                    <p class="text-red-500 text-xs mt-1">
                        {$formErrors.guest_email}
                    </p>
                {/if}
            </div>
            <!-- Date & Time to Serve -->
            <div>
                <label class="block text-sm font-medium mb-1"
                    >Date & Time to Serve</label
                >
                <input
                    type="datetime-local"
                    name="date_time_to_serve"
                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
                        'date_time_to_serve',
                    )}"
                />
                {#if $formErrors.date_time_to_serve}
                    <p class="text-red-500 text-xs mt-1">
                        {$formErrors.date_time_to_serve}
                    </p>
                {/if}
            </div>
            <!-- Total Guests -->
            <div>
                <label class="block text-sm font-medium mb-1"
                    >Total Guests</label
                >
                <input
                    type="number"
                    name="total_guests"
                    min="1"
                    placeholder="Total Guests"
                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
                        'total_guests',
                    )}"
                />
                {#if $formErrors.total_guests}
                    <p class="text-red-500 text-xs mt-1">
                        {$formErrors.total_guests}
                    </p>
                {/if}
            </div>
        </div>

        <!-- Info Section -->
        <div
            class="bg-purple-50 border-l-4 border-purple-400 p-4 my-8 rounded-xl text-sm text-gray-700"
        >
            <p>
                Please select your choice of meals – for more information and
                pictures, please check here at:
                <a
                    href="https://villabugis.com/in-villa-dining-seminyak"
                    target="_blank"
                    class="text-purple-700 underline"
                    >https://villabugis.com/in-villa-dining-seminyak</a
                >
                <br />
                Indicate total number of guests for each main meal – and number of
                Ala Carte dishes, desserts and drinks.<br />
                <span class="font-semibold"
                    >Special Main Dish prices are per person, Ala Carte items
                    are per dish.</span
                ><br />
                <span class="italic"
                    >All prices are in Indonesian Rupiah, and are subject to 10%
                    service charge – guests will be issued an invoice for
                    payment by cash or credit card same or next day.</span
                ><br />
                All services are subject to availability, especially during periods
                of high demand – so please order early, to avoid disappointment!
            </p>
        </div>

        <!-- Main Dishes -->
        <div class="mt-8">
            <h3 class="text-lg font-semibold mb-2 text-purple-700">
                Taste of Bali – Special Main Dishes
            </h3>
            <p class="mb-4 text-sm text-gray-600">
                (Special Dishes - Min 2 people, Babi Guling Min 5 people)
            </p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Be Pasih Klungkung</label
                    >
                    <input
                        type="number"
                        name="be_pasih_klungkung"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Seafood BBQ Jimbaran</label
                    >
                    <input
                        type="number"
                        name="seafood_bbq_jimbaran"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Ayam Betutu Gilimanuk</label
                    >
                    <input
                        type="number"
                        name="ayam_betutu_gilimanuk"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Babi Guling Gianyar</label
                    >
                    <input
                        type="number"
                        name="babi_guling_gianyar"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Indonesian Set Menu</label
                    >
                    <input
                        type="number"
                        name="indonesian_set_menu"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
            </div>
        </div>

        <!-- Ala Carte -->
        <div class="mt-8">
            <h3 class="text-lg font-semibold mb-2 text-purple-700">
                Ala Carte
            </h3>
            <p class="mb-4 text-sm text-gray-600">
                (Select any additional items)
            </p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Gado Gado</label
                    >
                    <input
                        type="number"
                        name="gado_gado"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Spring Rolls</label
                    >
                    <input
                        type="number"
                        name="spring_rolls"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Perkedel Jagung</label
                    >
                    <input
                        type="number"
                        name="perkedel_jagung"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Soto Ayam</label
                    >
                    <input
                        type="number"
                        name="soto_ayam"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Satay</label>
                    <input
                        type="number"
                        name="satay"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Rendang</label
                    >
                    <input
                        type="number"
                        name="rendang"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Babi Rica Rica</label
                    >
                    <input
                        type="number"
                        name="babi_rica_rica"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >BBQ Pork Ribs</label
                    >
                    <input
                        type="number"
                        name="bbq_pork_ribs"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Cap Cay</label
                    >
                    <input
                        type="number"
                        name="cap_cay"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Nasi Goreng Chicken</label
                    >
                    <input
                        type="number"
                        name="nasi_goreng_chicken"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Nasi Goreng Seafood</label
                    >
                    <input
                        type="number"
                        name="nasi_goreng_seafood"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Nasi Goreng Vegetarian</label
                    >
                    <input
                        type="number"
                        name="nasi_goreng_vegetarian"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Nasi Goreng Pork</label
                    >
                    <input
                        type="number"
                        name="nasi_goreng_pork"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Mie Goreng Chicken</label
                    >
                    <input
                        type="number"
                        name="mie_goreng_chicken"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Mie Goreng Seafood</label
                    >
                    <input
                        type="number"
                        name="mie_goreng_seafood"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Mie Goreng Vegetarian</label
                    >
                    <input
                        type="number"
                        name="mie_goreng_vegetarian"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Mie Goreng Pork</label
                    >
                    <input
                        type="number"
                        name="mie_goreng_pork"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >French Fries</label
                    >
                    <input
                        type="number"
                        name="french_fries"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Fried Calamari</label
                    >
                    <input
                        type="number"
                        name="fried_calamari"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >BBQ Chicken Wings</label
                    >
                    <input
                        type="number"
                        name="bbq_chicken_wings"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Balinese Chicken Curry</label
                    >
                    <input
                        type="number"
                        name="balinese_chicken_curry"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Steamed Rice</label
                    >
                    <input
                        type="number"
                        name="steamed_rice"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Won Tons</label
                    >
                    <input
                        type="number"
                        name="won_tons"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
            </div>
        </div>

        <!-- Kids Meals -->
        <div class="mt-8">
            <h3 class="text-lg font-semibold mb-2 text-purple-700">
                Kids Meals
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Spaghetti Bolognese</label
                    >
                    <input
                        type="number"
                        name="spaghetti_bolognese"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Spaghetti Carbonara</label
                    >
                    <input
                        type="number"
                        name="spaghetti_carbonara"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Spaghetti Napolitana</label
                    >
                    <input
                        type="number"
                        name="spaghetti_napolitana"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >French Fries (Kids Meals)</label
                    >
                    <input
                        type="number"
                        name="french_fries_kids_meals"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >BBQ Chicken Wings (Kids Meals)</label
                    >
                    <input
                        type="number"
                        name="bbq_chicken_wings_kids_meals"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Club Sandwich (Kids Meals)</label
                    >
                    <input
                        type="number"
                        name="club_sandwich_kids_meals"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
            </div>
        </div>

        <!-- Desserts -->
        <div class="mt-8">
            <h3 class="text-lg font-semibold mb-2 text-purple-700">Desserts</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Pisang Goreng (Desserts)</label
                    >
                    <input
                        type="number"
                        name="pisang_goreng_desserts"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Bubur Injin (Desserts)</label
                    >
                    <input
                        type="number"
                        name="bubur_injin_desserts"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Fresh Fruit (Desserts)</label
                    >
                    <input
                        type="number"
                        name="fresh_fruit_desserts"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
            </div>
        </div>

        <!-- Drinks -->
        <div class="mt-8">
            <h3 class="text-lg font-semibold mb-2 text-purple-700">Drinks</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Cape Discovery Shiraz (Drinks)</label
                    >
                    <input
                        type="number"
                        name="cape_discovery_shiraz_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Cape Discovery Sauvignon (Drinks)</label
                    >
                    <input
                        type="number"
                        name="cape_discovery_sauvignon_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Bintang Beer Bottle 330ml (Drinks)</label
                    >
                    <input
                        type="number"
                        name="bintang_beer_bottle_330ml_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Bintang Beer Case 330ml 24bottle (Drinks)</label
                    >
                    <input
                        type="number"
                        name="bintang_beer_case_330ml_24bottle_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Bintang Beer Can 330ml (Drinks)</label
                    >
                    <input
                        type="number"
                        name="bintang_beer_can_330ml_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Bintang Beer Case 330ml 24can (Drinks)</label
                    >
                    <input
                        type="number"
                        name="bintang_beer_case_330ml_24can_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Bintang Radler Lemon Beer Bottle 330ml (Drinks)</label
                    >
                    <input
                        type="number"
                        name="bintang_radler_lemon_beer_bottle_330ml_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Bintang Radler Lemon Beer Case 330ml 24bottle (Drinks)</label
                    >
                    <input
                        type="number"
                        name="bintang_radler_lemon_beer_case_330ml_24bottle_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Lemon Beer Bottle 330ml (Drinks)</label
                    >
                    <input
                        type="number"
                        name="lemon_beer_bottle_330ml_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Lemon Beer Case 330ml 24bottle (Drinks)</label
                    >
                    <input
                        type="number"
                        name="lemon_beer_case_330ml_24bottle_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Coke Can Drinks</label
                    >
                    <input
                        type="number"
                        name="coke_can_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Coke Case Drinks</label
                    >
                    <input
                        type="number"
                        name="coke_case_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Diet Coke Can Drinks</label
                    >
                    <input
                        type="number"
                        name="diet_coke_can_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Diet Coke Case Drinks</label
                    >
                    <input
                        type="number"
                        name="diet_coke_case_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Fanta Can Drinks</label
                    >
                    <input
                        type="number"
                        name="fanta_can_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Fanta Case Drinks</label
                    >
                    <input
                        type="number"
                        name="fanta_case_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Sprite Can Drinks</label
                    >
                    <input
                        type="number"
                        name="sprite_can_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Sprite Case Drinks</label
                    >
                    <input
                        type="number"
                        name="sprite_case_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Soda Can Drinks</label
                    >
                    <input
                        type="number"
                        name="soda_can_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Soda Case Drinks</label
                    >
                    <input
                        type="number"
                        name="soda_case_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <!-- tonic water -->
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Tonic Water Can Drinks</label
                    >
                    <input
                        type="number"
                        name="tonic_water_can_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1"
                        >Tonic Water Case Drinks</label
                    >
                    <input
                        type="number"
                        name="tonic_water_case_drinks"
                        min="0"
                        value="0"
                        class="w-full border rounded-xl px-4 py-2"
                    />
                </div>
            </div>

            <div>
                <!-- Comment -->
                <div class="mt-8 py-2">
                    <label class="block text-sm font-medium mb-1"
                        >Comment / Special Requirements</label
                    >
                    <textarea
                        name="comment"
                        placeholder="Please advise any special food requirements, allergies, or comments here..."
                        class="w-full border rounded-xl px-4 py-2 min-h-[80px]"
                    ></textarea>
                </div>

                <div
                    class="bg-yellow-50 border-l-4 border-yellow-400 p-4 my-8 rounded-xl text-sm text-gray-700"
                >
                    <p>
                        Our staff will prepare the meal in the villa about 30
                        minutes in advance of the time to be served - please
                        ensure the staff have access to the villa at that time
                        else it may not be able to be served. Please listen for
                        the doorbell!
                    </p>
                </div>

                <!-- Submit Button -->
                <div class="text-center pt-4">
                    <button
                        type="submit"
                        class="bg-purple-600 text-white px-8 py-3 rounded-xl hover:bg-purple-700 transition-all font-medium shadow-md"
                    >
                        Submit Order
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
