@extends('layouts.welcome')

@section('content')

<section class="booking-page">

    <div class="container">

        <form action="#" method="POST">

            @csrf

            <div class="booking-card">

                <div class="row g-3">
                    <div class="col-lg-5">

                        <div class="booking-image">

                            <img 
                                src="{{ asset('assets/images/wig1.webp') }}" 
                                alt=""
                            >

                        </div>

                    </div>

                    <div class="col-lg-7">

                        <div class="booking-category">
                            BOHO BRAIDS - SDD HUMAN HAIR
                        </div>

                        <h1 class="booking-title">
                            BOHO BOB - SMEDIUM
                        </h1>

                        <div class="booking-meta">
                            4 hours 30 minutes @ CA$280.00
                        </div>

                        <ul class="booking-details">

                            <li>
                                Natural hair must be at least 4 inches long.
                            </li>

                            <li>
                                The boho is 100% SDD human hair (50g).
                            </li>

                            <li>
                                The braiding hair is done with synthetic hair.
                            </li>

                            <li>
                                The ends of the hair will be curled and dipped in hot water.
                            </li>

                            <li>
                                12 rows across the hairline.
                            </li>

                            <li>
                                Shoulder / armpit length.
                            </li>

                        </ul>

                        <div class="mb-5">

                            <h4 class="section-title">
                                Add To Appointment
                            </h4>

                            <div class="addon-box">

                                <div class="form-check">

                                    <input 
                                        class="form-check-input addon-checkbox"
                                        type="checkbox"
                                        id="addon1"
                                        data-price="60"
                                    >

                                    <label class="form-check-label" for="addon1">
                                        50g extra human hair curls + 30 minutes @ CA$60.00
                                    </label>

                                </div>

                            </div>

                            <div class="addon-box">

                                <div class="form-check">

                                    <input 
                                        class="form-check-input addon-checkbox"
                                        type="checkbox"
                                        id="addon2"
                                        data-price="40"
                                    >

                                    <label class="form-check-label" for="addon2">
                                        Flip over fulani + CA$40.00
                                    </label>

                                </div>

                            </div>

                        </div>

                        <div class="row g-3">

                            <div class="col-md-6">

                                <label class="form-label">
                                    Select Appointment Date
                                </label>

                                <input
                                    type="date"
                                    class="form-control"
                                    id="bookingDate"
                                    min="{{ date('Y-m-d') }}"
                                >

                                <div id="bookingStatus" class="booking-status text-muted">
                                    Choose a date to load available appointment times
                                </div>

                            </div>

                        </div>

                        <input 
                            type="hidden"
                            name="booking_date"
                            id="bookingDateValue"
                        >

                        <input 
                            type="hidden"
                            name="booking_time"
                            id="selectedSlot"
                        >

                        <div class="slots-wrapper">

                            <h4 class="section-title mb-3">
                                Available Appointment Times
                            </h4>

                            <div class="row g-3" id="slotsContainer">

                                <div class="col-12">

                                    <div class="text-muted">
                                        Select a date first to view available booking times.
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="booking-total-card">

                            <div class="d-flex justify-content-between mb-2">

                                <span>
                                    Service Price
                                </span>

                                <strong>
                                    CA$280.00
                                </strong>

                            </div>

                            <div 
                                class="d-flex justify-content-between mb-2 addon-price-row d-none"
                                id="addonPriceRow"
                            >

                                <span>
                                    Addon Total
                                </span>

                                <strong id="addonPriceText">
                                    CA$0.00
                                </strong>

                            </div>

                            <hr>

                            <div class="d-flex justify-content-between total-price">

                                <span>
                                    Total
                                </span>

                                <strong id="grandTotal">
                                    CA$280.00
                                </strong>

                            </div>

                        </div>

                        <div class="row g-3 mt-4">

                            <div class="col-md-6">

                                <a href="#" class="back-btn">
                                    Back
                                </a>

                            </div>

                            <div class="col-md-6">

                                <button 
                                    type="submit"
                                    class="submit-btn"
                                    id="continueBtn"
                                    disabled
                                >
                                    Continue Booking
                                </button>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </form>

    </div>

</section>

<script>

    const bookingDate = document.getElementById('bookingDate');

    const bookingStatus = document.getElementById('bookingStatus');

    const slotsContainer = document.getElementById('slotsContainer');

    const continueBtn = document.getElementById('continueBtn');

    // LOAD TIME SLOTS
    bookingDate.addEventListener('change', function(){

        const date = this.value;

        document.getElementById('bookingDateValue').value = date;

        continueBtn.disabled = true;

        document.getElementById('selectedSlot').value = '';

        slotsContainer.innerHTML = `
            <div class="col-12">

                <div class="text-center py-4">

                    <div 
                        class="spinner-border"
                        style="color:#9a8b77;"
                        role="status"
                    ></div>

                    <div class="mt-3 text-muted">
                        Checking available appointment times...
                    </div>

                </div>

            </div>
        `;

        setTimeout(() => {

            const availableSlots = [
                '09:00',
                '10:30',
                '12:00',
                '01:30',
                '03:00',
                '04:30'
            ];

            slotsContainer.innerHTML = '';

            if(availableSlots.length === 0){

                slotsContainer.innerHTML = `
                    <div class="col-12">

                        <div class="alert alert-warning border-0 rounded-4">

                            No appointment times available for this date.

                        </div>

                    </div>
                `;

                bookingStatus.innerHTML = `
                    <span class="text-danger">
                        No appointment slots available
                    </span>
                `;

                return;
            }

            availableSlots.forEach(time => {

                const slotCol = document.createElement('div');

                slotCol.className = 'col-6 col-md-4';

                const [hours, minutes] = time.split(':');

                const h = parseInt(hours);

                const ampm = h >= 12 ? 'PM' : 'AM';

                const displayHour = h % 12 || 12;

                const displayTime = `${displayHour}:${minutes} ${ampm}`;

                const slotBtn = document.createElement('button');

                slotBtn.type = 'button';

                slotBtn.className = 'slot-btn w-100';

                slotBtn.dataset.time = time;

                slotBtn.innerHTML = `
                    <div class="fw-semibold">
                        ${displayTime}
                    </div>
                `;

                slotBtn.addEventListener('click', function(){

                    document.querySelectorAll('.slot-btn').forEach(btn => {
                        btn.classList.remove('active');
                    });

                    this.classList.add('active');

                    document.getElementById('selectedSlot').value = time;

                    continueBtn.disabled = false;

                    bookingStatus.innerHTML = `
                        <span class="text-success">
                            Appointment time selected: ${displayTime}
                        </span>
                    `;

                });

                slotCol.appendChild(slotBtn);

                slotsContainer.appendChild(slotCol);

            });

            bookingStatus.innerHTML = `
                <span class="text-success">
                    ${availableSlots.length} appointment times available
                </span>
            `;

        }, 1200);

    });

    // PRICE CALCULATION
    const addonCheckboxes = document.querySelectorAll('.addon-checkbox');

    const addonPriceRow = document.getElementById('addonPriceRow');

    const addonPriceText = document.getElementById('addonPriceText');

    const grandTotal = document.getElementById('grandTotal');

    const basePrice = 280;

    function updatePricing(){

        let addonTotal = 0;

        addonCheckboxes.forEach(box => {

            if(box.checked){
                addonTotal += parseFloat(box.dataset.price);
            }

        });

        const finalTotal = basePrice + addonTotal;

        if(addonTotal > 0){

            addonPriceRow.classList.remove('d-none');

        }else{

            addonPriceRow.classList.add('d-none');

        }

        addonPriceText.innerText = `CA$${addonTotal.toFixed(2)}`;

        grandTotal.innerText = `CA$${finalTotal.toFixed(2)}`;

    }

    addonCheckboxes.forEach(box => {

        box.addEventListener('change', updatePricing);

    });

</script>

@endsection