{{-- @extends('front.include.app')
@section('content')
    <section class="booking">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <form class="booking-form">
                        <h2 class="mainHead">Booking</h2>
                        <div class="row">
                            <div class="col-12">
                                <select>
                                    <option>Service</option>
                                    <option>Service</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <input type="text" placeholder="Date & time">
                            </div>
                            <div class="col-12">
                                <select>
                                    <option>Number of people</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <textarea rows="3" placeholder="Special requests (optional)"></textarea>
                            </div>
                            <div class="col-12">
                                <h3>Contact info</h3>
                            </div>
                            <div class="col-md-6">
                                <input type="text" placeholder="Name">
                            </div>
                            <div class="col-md-6">
                                <input type="text" placeholder="Email">
                            </div>
                            <div class="col-12">
                                <input type="tel" placeholder="Phone">
                            </div>
                            <div class="col-12">
                                <h3>Payment</h3>
                                <h5>Payment Method</h5>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex align-items-center">
                                    <input type="radio" name="payment" class="sscscefca" checked>
                                    <label for="">Credit/Debit Card</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex align-items-center">
                                    <input type="radio" class="sscscefca" name="payment">
                                    <label for="">Bank Transfer</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex align-items-center">
                                    <input type="radio" class="sscscefca" name="payment">
                                    <label for=""> PayPal</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <input type="tel" placeholder="Card number">
                            </div>
                            <div class="col-md-4">
                                <input type="text" placeholder="Expiry Date">
                            </div>
                            <div class="col-md-4">
                                <input type="text" placeholder="CVV">
                            </div>
                            <div class="col-md-4">
                                <input type="text" placeholder="Cardholder name">
                            </div>

                            <div class="col-12">
                                <button class=" sdcfsdsda">Book Now</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section class="insta-sec">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-5">
                    <div class="insta-content" data-aos="fade-up" data-duration="4000">
                        <a href="">follow on instagram<i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection --}}
@extends('front.include.app')
@section('content')
<style>
    .d-none-important {
        display: none !important;
    }
    .light-color{
        opacity: 0.5 !important;
    }
</style>
    <section class="booking">
        <div class="container">
            <div class="col-md-12">
                <form id="booking-form" class="booking-form" method="POST">
                    @csrf
                    <h2 class="mainHead">Booking</h2>

                    <div class="row">
                        <input type="hidden" name="studio_id" value="{{ $studio->id }}">
                        <input type="hidden" name="subscription_id" value="{{ $subscriptionId ?? '' }}">
                        <input type="hidden" name="booking_type" value="{{ $studio->booking_type ?? 'per_hour' }}">
                        <input type="hidden" name="total_amount" value="{{ $price }}">

                            @if($studio->booking_type === 'per_day')
                            <input type="hidden" name="start_time"
                                value="{{ \Carbon\Carbon::parse($date . ' ' . $from)->format('m-d-Y h:i A') }}">
                            <input type="hidden" name="end_time"
                                value="{{ \Carbon\Carbon::parse($date . ' ' . $to)->format('m-d-Y h:i A') }}">

                        @elseif($studio->booking_type === 'per_week')
                            <input type="hidden" name="start_time"
                                value="{{ \Carbon\Carbon::parse($date)->startOfDay()->format('Y-m-d H:i:s') }}">
                            <input type="hidden" name="end_time"
                                value="{{ \Carbon\Carbon::parse($date)->addWeek()->endOfDay()->format('Y-m-d H:i:s') }}">

                        @elseif($studio->booking_type === 'per_month')
                            <input type="hidden" name="start_time"
                                value="{{ \Carbon\Carbon::parse($date)->startOfDay()->format('Y-m-d H:i:s') }}">
                            <input type="hidden" name="end_time"
                                value="{{ \Carbon\Carbon::parse($date)->addMonth()->endOfDay()->format('Y-m-d H:i:s') }}">

                        @else
                            <input type="hidden" name="start_time"
                                value="{{ \Carbon\Carbon::parse($date . ' ' . $from)->format('Y-m-d H:i:s') }}">
                            <input type="hidden" name="end_time"
                                value="{{ \Carbon\Carbon::parse($date . ' ' . $to)->format('Y-m-d H:i:s') }}">
                        @endif


                            @if($clientSecret)
                            <input type="hidden" name="payment_intent_id" value="{{ $paymentIntentId }}">
                        @endif

                        <div class="col-12">
                            <h3 class="subHead">Booking Details</h3>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Studio Name</label>
                            <input type="text" class="" value="{{ $studio->name }}" readonly>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Booking Type</label>
                            <input type="text" class=""
                                    value="@if($studio->booking_type === 'per_hour') Per Hour
                                        @elseif($studio->booking_type === 'per_day') Per Day
                                        @elseif($studio->booking_type === 'per_week') Per Week
                                        @elseif($studio->booking_type === 'per_month') Per Month
                                        @else Custom @endif" readonly>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Total Price</label>
                            <input type="text" class="" value="${{ $price }}" readonly>
                        </div>

                        {{-- <div class="col-12" style="display: flex"> --}}
                        @if($studio->booking_type === 'per_day')
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Start Time</label>
                                <input type="text"
                                    value="{{ \Carbon\Carbon::parse($date . ' ' . $from)->format('m-d-Y h:i A') }}"
                                    readonly>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">End Time</label>
                                <input type="text"
                                    value="{{ \Carbon\Carbon::parse($date . ' ' . $to)->format('m-d-Y h:i A') }}"
                                    readonly>
                            </div>

                            <div class="col-12">
                                    <input type="text"
                                        value="{{ \Carbon\Carbon::parse($date)->format('m-d-Y') }}"
                                        readonly>
                            </div>
                        @elseif($studio->booking_type === 'per_week')
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Start Date</label>
                                        <input type="text"
                                        value="{{ \Carbon\Carbon::parse($date)->format('m-d-Y') }}"
                                        readonly>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">End Date</label>
                                <input type="text"
                                        value="{{ \Carbon\Carbon::parse($date)->addWeek()->format('m-d-Y') }}"
                                        readonly>
                            </div>
                        @elseif($studio->booking_type === 'per_month')
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Start Date</label>
                                        <input type="text"
                                        value="{{ \Carbon\Carbon::parse($date)->format('m-d-Y') }}"
                                        readonly>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">End Date</label>
                                <input type="text"
                                        value="{{ \Carbon\Carbon::parse($date)->addMonth()->format('m-d-Y') }}"
                                        readonly>
                            </div>
                        @else
                            <div class="col-12">
                                <input type="text"
                                    value="{{ \Carbon\Carbon::parse($date)->format('m-d-Y') }} {{ $from }} to {{ $to }}"
                                    readonly>
                            </div>
                        @endif


                        {{-- </div> --}}

                        <div class="col-12">
                            <select name="guests" required>
                                <option value="">Number of people</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3+">3+</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <textarea name="special_requests" rows="3" placeholder="Special requests (optional)"></textarea>
                        </div>
                        <div class="col-12">
                            <h3>Contact info</h3>
                        </div>
                        <div class="col-md-6">
                            <input type="text" name="name" placeholder="Name" required>
                        </div>
                        <div class="col-md-6">
                            <input type="email" name="email" placeholder="Email" required>
                        </div>
                        <div class="col-md-6">
                            <input type="tel" name="phone" placeholder="Phone" id="phone" value="" required>
                            <div id="phone-error" style="color: red; display: none;"></div>
                        </div>
                        @if ($subscriptionId)
                            <div id="subscription-success" class="alert alert-success d-flex align-items-center gap-2 ml-4" style="font-size: 15px;">
                                <i class="fas fa-check-circle text-success mr-2"></i>
                                <span>
                                    You have an active subscription. |
                                    Booking Duration: <strong id="booking-duration"></strong> |
                                    Available Hours: <strong id="available-hours">{{ $subscriptionHours }}</strong>
                                </span>
                            </div>
                            <div id="subscription-error" class="alert alert-danger ml-3" style="display:none; font-size: 14px;"></div>
                        @else
                            <div class="col-12">
                                <h3>Payment</h3>
                            </div>
                            <div class="col-12" id="card-element-container">
                                <div id="card-element" class="form-control"></div>
                                <div id="card-errors" role="alert" class="text-danger mt-2"></div>
                            </div>
                        @endif

                        <div class="col-12">
                            <button type="submit" class="sdcfsdsda" id="submit-button">Book Now</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        </div>
    </section>

    @if(!$subscriptionId)
        <script src="https://js.stripe.com/v3/"></script>
        <script>
            const stripe = Stripe('{{ $stripeKey }}');
            const elements = stripe.elements();
            const cardElement = elements.create('card');
            cardElement.mount('#card-element');
        </script>
    @endif

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const form = document.getElementById('booking-form');
            const submitButton = document.getElementById('submit-button');
            const subscriptionId = "{{ $subscriptionId }}";
            const from = "{{ $from ?? '' }}";
            const to = "{{ $to ?? '' }}";
            const dateStr = "{{ $date ?? '' }}";
            const availableHours = parseFloat("{{ $subscriptionHours ?? 0 }}");
            const bookingDurationEl = document.getElementById("booking-duration");
            const availableHoursEl = document.getElementById("available-hours");
            const errorDivSub = document.getElementById("subscription-error");
            const submitBtn = document.getElementById("submit-button");

            form.addEventListener('submit', async (event) => {
                event.preventDefault();
                submitButton.disabled = true;
                submitButton.innerHTML = 'Processing...';

                try {
                    if (subscriptionId) {
                        const formData = new FormData(form);

                        const completeRes = await fetch("{{ route('booking.complete') }}", {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}",
                                'Accept': 'application/json'
                            },
                            body: formData
                        });

                        const completeData = await completeRes.json();

                        if (completeData.success) {
                            window.location.href = completeData.redirect_url;
                        } else {
                            alert(completeData.message || "Error completing booking.");
                            submitButton.disabled = false;
                            submitButton.innerHTML = 'Book Now';
                        }
                        return;
                    }

                    const formData = new FormData(form);
                    const res = await fetch("{{ route('booking.process') }}", {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}",
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(Object.fromEntries(formData))
                    });
                    const data = await res.json();

                    if (!data.success) {
                        alert(data.message || "Error creating payment intent.");
                        submitButton.disabled = false;
                        submitButton.innerHTML = 'Book Now';
                        return;
                    }

                    const { error, paymentIntent } = await stripe.confirmCardPayment(
                        data.client_secret,
                        {
                            payment_method: {
                                card: cardElement,
                                billing_details: {
                                    name: form.querySelector('[name="name"]').value,
                                    email: form.querySelector('[name="email"]').value,
                                    phone: form.querySelector('[name="phone"]').value
                                }
                            }
                        }
                    );

                    if (error) {
                        document.getElementById('card-errors').textContent = error.message;
                        submitButton.disabled = false;
                        submitButton.innerHTML = 'Book Now';
                        return;
                    }

                    const completeForm = new FormData(form);
                    completeForm.append("payment_intent_id", data.payment_intent_id);

                    const completeRes = await fetch("{{ route('booking.complete') }}", {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                        body: completeForm
                    });

                    const completeData = await completeRes.json();

                    if (completeData.success) {
                        window.location.href = completeData.redirect_url;
                    } else {
                        Swal.fire("Error", completeData.message, "error");
                    }

                } catch (err) {
                    console.error(err);
                    alert("Unexpected error occurred.");
                    submitButton.disabled = false;
                    submitButton.innerHTML = 'Book Now';
                }
            });

            document.addEventListener("DOMContentLoaded", function() {
                const input = document.getElementById("phone");
                const errorDiv = document.getElementById("phone-error");
                const submitBtn = document.getElementById("submit-button");

                input.addEventListener("input", function() {
                    this.value = this.value.replace(/\D/g, '');

                    if (this.value.length < 10) {
                        errorDiv.textContent = "Phone number must be at least 10 digits.";
                        errorDiv.style.display = "block";
                        input.style.borderColor = "red";
                        submitBtn.disabled = true;
                    } else {
                        errorDiv.style.display = "none";
                        input.style.borderColor = "green";
                        submitBtn.disabled = false;
                    }
                });

                input.addEventListener("blur", function() {
                    if (this.value.length > 10) {
                        this.value = this.value.slice(0, 10);
                    }
                });
            });

            if (from && to) {
                console.log("Debug Date (raw):", dateStr);
                console.log("Debug From (raw):", from);
                console.log("Debug To (raw):", to);

                function convertTo24Hour(timeStr) {
                    const [time, modifier] = timeStr.split(" ");
                    let [hours, minutes] = time.split(":");
                    hours = parseInt(hours, 10);

                    if (modifier === "PM" && hours < 12) {
                        hours += 12;
                    }
                    if (modifier === "AM" && hours === 12) {
                        hours = 0;
                    }

                    return `${hours.toString().padStart(2, "0")}:${minutes}`;
                }

                const from24 = convertTo24Hour(from);
                const to24 = convertTo24Hour(to);

                console.log("Converted From (24h):", from24);
                console.log("Converted To (24h):", to24);

                const isoDate = new Date(dateStr).toISOString().split("T")[0];

                const fromDate = new Date(`${isoDate}T${from24}:00`);
                const toDate = new Date(`${isoDate}T${to24}:00`);

                console.log("Parsed From Date:", fromDate);
                console.log("Parsed To Date:", toDate);

                let diffMinutes = Math.abs((toDate - fromDate) / (1000 * 60));
                console.log("Diff Minutes:", diffMinutes);

                const hours = Math.floor(diffMinutes / 60);
                const minutes = diffMinutes % 60;
                console.log("Hours:", hours, "Minutes:", minutes);

                let durationText = "";
                let totalHours = diffMinutes / 60;

                if (hours > 0 && minutes > 0) {
                    durationText = `${hours} hours ${minutes} minutes`;
                } else if (hours > 0) {
                    durationText = `${hours} hours`;
                } else {
                    durationText = `${minutes} minutes`;
                }

                console.log("Final Duration Text:", durationText);

                document.getElementById("booking-duration").textContent = durationText;

                if (totalHours > availableHours) {
                    errorDivSub.style.display = "block";
                    errorDivSub.textContent = `Your booking duration (${durationText}) exceeds your available subscription hours (${availableHours} hours).`;
                    document.getElementById("subscription-success").classList.add('d-none-important');
                    submitBtn.disabled = true;
                    submitBtn.classList.add('light-color');
                } else {
                    errorDivSub.style.display = "none";
                    document.getElementById("subscription-success").classList.remove('d-none-important');
                    submitBtn.disabled = false;
                    submitBtn.classList.remove('light-color');
                }
            } else {
                console.log("From/To not available!", { from, to, dateStr });
            }

        });
    </script>
@endsection