@extends('user.layouts.user')
@section('content')
<div class="row">
    <div class="col-12">
        <div class="card card-primary">
            <div class="card-header text-white pb-0" style="background-color: rgb(0, 0, 0);">
                <h1 style="font-size: 24px">Edit Booking</h1>
            </div>
            <div class="card-body">
                <form action="{{ route('user.booking.update', $booking->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="form-group">
                        <label>Studio</label>
                        <input type="text" class="form-control" value="{{ $booking->studio->name }}" readonly>
                    </div>

                    <div class="form-group">
                        <label>Booking Type</label>
                        <input type="text" class="form-control"
                            value="{{ ucfirst(str_replace('_', ' ', $booking->studio->booking_type)) }}" readonly>
                    </div>

                    <div class="form-group">
                        <label>Start Time</label>
                        <input type="datetime-local" class="form-control" name="start_time" id="start_time"
                            value="{{ \Carbon\Carbon::parse($booking->start_time)->format('Y-m-d\TH:i') }}"
                            min="{{ now()->format('Y-m-d\TH:i') }}" required>
                        @error('start_time') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>

                    <div class="form-group">
                        <label>End Time</label>
                        <input type="datetime-local" class="form-control" name="end_time" id="end_time"
                            value="{{ \Carbon\Carbon::parse($booking->end_time)->format('Y-m-d\TH:i') }}"
                            min="{{ now()->format('Y-m-d\TH:i') }}" required readonly>
                        @error('end_time') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>
                    <button type="submit" class="btn btn-success">Update Booking</button>
                    {{-- <a href="{{ route('user.booking.show', $booking->id) }}" class="btn btn-secondary">Cancel</a> --}}
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById("start_time").addEventListener("change", function() {
        let startTime = this.value;
        let endInput = document.getElementById("end_time");
        endInput.min = startTime;
    });

    document.getElementById("start_time").addEventListener("change", async function() {
        let date = this.value.split("T")[0];
        let studioId = "{{ $booking->studio_id }}";

        let response = await fetch(`/user/bookings/${studioId}/availability?date=${date}`);
        let bookings = await response.json();

        if (bookings.length > 0) {
            alert("Some slots are already booked on this date. Please check before finalizing.");
            console.log("Booked slots:", bookings);
        }
    });
</script>
<script>
    document.getElementById("start_time").addEventListener("change", function() {
        let startTime = new Date(this.value);
        let endInput = document.getElementById("end_time");
        let bookingType = "{{ $booking->studio->booking_type }}";

        if (!startTime) return;

        let endTime = new Date(startTime);

        switch (bookingType) {
            case "per_day":
                endTime.setHours(23, 59, 59, 999);
                break;
            case "per_week":
                endTime.setDate(endTime.getDate() + 7);
                break;
            case "per_month":
                endTime.setMonth(endTime.getMonth() + 1);
                break;
            case "per_hour":
                endTime.setHours(endTime.getHours() + 1);
                break;
        }

        let formattedEnd = endTime.toISOString().slice(0,16);
        endInput.value = formattedEnd;
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        let startInput = document.getElementById("start_time");
        let endInput = document.getElementById("end_time");

        let bookingType = "{{ $booking->studio->booking_type }}";

        @if($booking->studio->booking_type === 'per_day')
            let allowedDays = @json($availableDays);
            let bookedDates = @json($bookedDates);

            startInput.addEventListener("input", function() {
                let selectedDate = new Date(this.value);
                let dayName = selectedDate.toLocaleDateString('en-US', { weekday: 'long' }).toLowerCase();
                let dateStr = this.value.split("T")[0];

                if (!allowedDays.includes(dayName)) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Unavailable',
                        text: "Studio is not available for full day on " + dayName
                    });
                    this.value = "";
                    return;
                }

                if (bookedDates.includes(dateStr) && dateStr !== "{{ \Carbon\Carbon::parse($booking->start_time)->toDateString() }}") {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Already Booked',
                        text: "This date is already booked!"
                    });
                    this.value = "";
                    return;
                }

                let end = new Date(this.value);
                end.setHours(23, 59, 59, 999);
                endInput.value = end.toISOString().slice(0,16);
            });
        @endif
    });
</script>
@endsection