@extends('layouts.main')

@section('content')

<style>

    body{
        background:#f4f7fb;
    }

    .booking-card{
        border:none;
        border-radius:24px;
        overflow:hidden;
        box-shadow:0 15px 40px rgba(0,0,0,0.08);
        background:#fff;
    }

    .booking-header{
        background:linear-gradient(135deg,#0d6efd,#2563eb);
        padding:35px 20px;
        text-align:center;
        color:#fff;
    }

    .booking-header h4{
        font-weight:700;
        margin-bottom:6px;
    }

    .booking-header p{
        margin:0;
        opacity:0.85;
        font-size:14px;
    }

    .form-label{
        font-size:13px;
        font-weight:700;
        color:#64748b;
        text-transform:uppercase;
        margin-bottom:8px;
    }

    .form-control,
    .form-select{
        height:56px;
        border-radius:16px;
        border:1px solid #e2e8f0;
        box-shadow:none !important;
        transition:0.3s;
    }

    textarea.form-control{
        height:auto;
    }

    .form-control:focus,
    .form-select:focus{
        border-color:#0d6efd;
        box-shadow:0 0 0 4px rgba(13,110,253,0.10) !important;
    }

    .readonly-select{
        background:#f8fafc !important;
        font-weight:600;
        cursor:not-allowed;
    }

    .price-box{
        background:linear-gradient(135deg,#eff6ff,#dbeafe);
        border:1px solid #bfdbfe;
        border-radius:20px;
        padding:20px;
    }

    .price-title{
        font-size:14px;
        font-weight:700;
        color:#1d4ed8;
    }

    .price-amount{
        font-size:34px;
        font-weight:800;
        color:#2563eb;
        border:none;
        background:transparent;
        text-align:end;
        width:180px;
    }

    .custom-btn{
        width:100%;
        height:58px;
        border:none;
        border-radius:18px;
        background:linear-gradient(135deg,#0d6efd,#2563eb);
        color:#fff;
        font-size:16px;
        font-weight:700;
        transition:0.3s;
        box-shadow:0 12px 28px rgba(37,99,235,0.25);
    }

    .custom-btn:hover{
        transform:translateY(-2px);
        box-shadow:0 18px 35px rgba(37,99,235,0.35);
    }

    .slot-loading{
        font-size:13px;
        color:#64748b;
        margin-top:8px;
    }

</style>

<div>

    <div class="row justify-content-center">

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

            <div class="card booking-card">

                <!-- HEADER -->
                <div class="booking-header">

                    <h4>
                        Book Appointment
                    </h4>

                    <p>
                        Fill details to schedule your counselling session
                    </p>

                </div>

                <!-- BODY -->
                <div class="card-body p-4 p-md-5">

                    @if(session('error'))

                        <div class="alert alert-danger rounded-4 shadow-sm">

                            {{ session('error') }}

                        </div>

                    @endif

                    <form action="{{ route('user.booking.store') }}" method="POST">

                        @csrf

                        <!-- COUNSELLOR -->
                        <div class="mb-4">

                            <label class="form-label">
                                Choose Counsellor
                            </label>

                            <select
                                class="form-select readonly-select"
                                disabled>

                                @foreach($counsellors as $counsellor)

                                    <option
                                        value="{{ $counsellor->id }}"
                                        @if(isset($selectedCounsellorId) && $selectedCounsellorId == $counsellor->id) selected @endif>

                                        {{ $counsellor->name }}

                                    </option>

                                @endforeach

                            </select>

                            <input
                                type="hidden"
                                name="counsellor_id"
                                value="{{ $selectedCounsellorId }}">

                        </div>

                        <!-- DATE -->
                        <div class="mb-4">

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

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

                        </div>

                        <!-- SESSION -->
                        <div class="row">

                            <div class="col-md-7 mb-4">

                                <label class="form-label">
                                    Session Type
                                </label>

                                <select
                                    name="session_type"
                                    id="session_type"
                                    class="form-select"
                                    required>

                                    <option value="">
                                        Select Type
                                    </option>

                                    @foreach($sessionTypes as $type)

                                        <option
                                            value="{{ $type->id }}"
                                            data-time="{{ $type->time_slot }}"
                                            data-fees="{{ $type->fees }}">

                                            {{ ucfirst($type->name) }}

                                        </option>

                                    @endforeach

                                </select>

                            </div>

                            <div class="col-md-5 mb-4">

                                <label class="form-label">
                                    Duration
                                </label>

                                <input
                                    type="text"
                                    id="time_slot"
                                    class="form-control bg-light fw-bold text-center"
                                    readonly
                                    placeholder="-- mins">

                            </div>

                        </div>

                        <!-- TIME SLOT -->
                        <div class="mb-4">

                            <label class="form-label">
                                Available Time Slots
                            </label>

                            <select
                                name="time_slot"
                                id="start_time"
                                class="form-select"
                                required>

                                <option value="">
                                    Select Date First
                                </option>

                            </select>

                            <div class="slot-loading" id="slotMessage"></div>

                        </div>

                        <!-- PACKAGE -->
                        <div class="mb-4">

                            <label class="form-label">
                                Package / Sessions
                            </label>

                            <select
                                id="sessions"
                                name="sessions"
                                class="form-select"
                                required>

                                <option value="">
                                    Select Sessions
                                </option>

                                <option value="1">1 Sessions</option>
                                <option value="3">3 Sessions</option>
                                <option value="6">6 Sessions</option>
                            </select>

                        </div>

                        <!-- FEES -->
                        <div class="price-box mb-4">

                            <div class="d-flex justify-content-between align-items-center">

                                <span class="price-title">
                                    Total Payable Amount
                                </span>

                                <input
                                    type="text"
                                    id="total_fees"
                                    class="price-amount"
                                    readonly
                                    value="₹0">

                            </div>

                        </div>

                        <input type="hidden" name="fees" id="fees_input">

                        <!-- NOTE -->
                        <div class="mb-4">

                            <label class="form-label">
                                Additional Note
                            </label>

                            <textarea
                                name="note"
                                rows="3"
                                class="form-control"
                                placeholder="Any specific requirements?"></textarea>

                        </div>

                        <!-- BUTTON -->
                        <button type="submit" class="custom-btn">

                            Confirm & Book Now

                        </button>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

document.addEventListener('DOMContentLoaded', function () {

    const sessionType = document.getElementById('session_type');

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

    const appointmentDate =
        document.getElementById('appointment_date');

    const slotDropdown =
        document.getElementById('start_time');

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

    const counsellorId =
        document.querySelector(
            'input[name="counsellor_id"]'
        ).value;

    // ========================
    // EVENTS
    // ========================

    sessionType.addEventListener('change', function () {

        calculateFees();

        loadSlots();

    });

    sessions.addEventListener('change', calculateFees);

    appointmentDate.addEventListener('change', loadSlots);

    // ========================
    // FEES CALCULATE
    // ========================

    function calculateFees() {

        let selected =
            sessionType.options[
                sessionType.selectedIndex
            ];

        if (!selected || selected.disabled) return;

        let time =
            selected.getAttribute('data-time') || '';

        let fee =
            parseFloat(
                selected.getAttribute('data-fees')
            ) || 0;

        let totalSessions =
            parseInt(sessions.value) || 0;

        document.getElementById('time_slot').value =
            time + ' Minutes';

        if (fee > 0 && totalSessions > 0) {

            let total = fee * totalSessions;

            document.getElementById('total_fees').value =
                '₹' + total.toLocaleString();

            document.getElementById('fees_input').value =
                total;

        } else {

            document.getElementById('total_fees').value =
                '₹0';

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

        }

    }

    // ========================
    // LOAD SLOTS
    // ========================

    function loadSlots() {

        let date = appointmentDate.value;

        if (!date) return;

        slotDropdown.innerHTML =
            `<option value="">Loading Slots...</option>`;

        slotMessage.innerHTML =
            'Fetching available slots...';

        const slotsUrl = "{{ url('user/get-slots/'.$selectedCounsellorId) }}";

        fetch(`${slotsUrl}?date=${encodeURIComponent(date)}`)
            .then(response => response.json())
            .then(data => {

            if (data?.error) {
                slotDropdown.innerHTML =
                    `<option value="">No Slots Available</option>`;
                slotMessage.innerHTML =
                    data.message || 'No available slots for selected date';
                return;
            }

            slotDropdown.innerHTML =
                `<option value="">Select Time Slot</option>`;

            const availableSlots = data.filter(slot => !slot.is_booked);

            if (availableSlots.length > 0) {

                slotMessage.innerHTML =
                    `${availableSlots.length} Slots Available`;

                availableSlots.forEach(slot => {

                    slotDropdown.innerHTML += `
                        <option value="${slot.raw_start} - ${slot.raw_end}">
                            ${slot.start_time} - ${slot.end_time}
                        </option>
                    `;

                });

            } else {

                slotDropdown.innerHTML =
                    `<option value="">No Slots Available</option>`;

                slotMessage.innerHTML =
                    'No available slots for selected date';

            }

        })

        .catch(error => {

            console.log(error);

            slotDropdown.innerHTML =
                `<option value="">Error Loading Slots</option>`;

            slotMessage.innerHTML =
                'Something went wrong';

        });

    }

});

</script>

@endsection