@extends($layoutView ?? 'admin.layout.app')

@section('content')
<style>
    .booking-shell {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 24px;
    }

    .booking-card {
        border: 0;
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    }

    .booking-card .card-header {
        background: linear-gradient(135deg, #eff6ff, #f8fafc);
        border-bottom: 1px solid #e2e8f0;
        padding: 20px 24px;
    }

    .calendar-shell {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 10px;
    }

    .calendar-weekday {
        text-align: center;
        color: #64748b;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .calendar-day {
        min-height: 82px;
        padding: 10px 8px;
        border-radius: 18px;
        border: 1px solid #e2e8f0;
        background: #fff;
        text-align: center;
        cursor: pointer;
        transition: 0.2s ease;
    }

    .calendar-day:hover {
        border-color: #93c5fd;
        transform: translateY(-2px);
    }

    .calendar-day.outside {
        opacity: 0.35;
    }

    .calendar-day.booked {
        background: #fee2e2;
        border-color: #fecaca;
        color: #991b1b;
        cursor: not-allowed;
    }

    .calendar-day.blocked {
        background: #fef3c7;
        border-color: #fde68a;
        color: #92400e;
        cursor: not-allowed;
    }

    .calendar-day.selected,
    .calendar-day.range {
        background: #dbeafe;
        border-color: #60a5fa;
    }

    .calendar-day.range-start,
    .calendar-day.range-end {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }

    .calendar-price {
        font-size: 0.8rem;
        color: #64748b;
    }

    .booking-list {
        display: grid;
        gap: 14px;
    }

    .booking-list-item {
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 16px;
        background: #fff;
    }

    @media (max-width: 1199px) {
        .booking-shell,
        .calendar-shell {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
    <div>
        <h2 class="mb-1">Property Bookings</h2>
        <p class="text-muted mb-0">Calendar se booking create, delete, iCal sync aur export yahin se handle karein.</p>
    </div>
    @if($selectedProperty)
        <div class="d-flex gap-2">
            <form method="POST" action="{{ route(($routePrefix ?? 'admin') . '.property-booking.sync', $selectedProperty->id) }}">
                @csrf
                <button class="btn btn-outline-primary">Sync iCal</button>
            </form>
            <a href="{{ route(($routePrefix ?? 'admin') . '.property-booking.export', $selectedProperty->id) }}" class="btn btn-primary">Export iCal</a>
        </div>
    @endif
</div>

<div class="booking-shell">
    <div class="d-grid gap-4">
        <div class="card booking-card">
            <div class="card-header">
                <h4 class="mb-1">Property Selector</h4>
                <p class="text-muted mb-0">Calendar dekhne ke liye property choose karein.</p>
            </div>
            <div class="card-body p-4">
                <form method="GET" action="{{ route(($routePrefix ?? 'admin') . '.property-booking.index') }}">
                    <div class="mb-3">
                        <label class="form-label">Property</label>
                        <select name="property_id" class="form-select" onchange="this.form.submit()">
                            @foreach($properties as $property)
                                <option value="{{ $property->id }}" @selected($selectedPropertyId == $property->id)>{{ $property->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <input type="hidden" name="month" value="{{ $monthCursor->month }}">
                    <input type="hidden" name="year" value="{{ $monthCursor->year }}">
                </form>
                @if($selectedProperty)
                    <div class="small text-muted">
                        {{ $selectedProperty->icals->count() }} iCal source(s),
                        {{ $selectedProperty->bookings->count() }} booking(s)
                    </div>
                @endif
            </div>
        </div>

        @if($selectedProperty)
            <div class="card booking-card">
                <div class="card-header">
                    <h4 class="mb-1">Create Booking</h4>
                    <p class="text-muted mb-0">Calendar se dates select karke manual booking ya block add karein.</p>
                </div>
                <div class="card-body p-4">
                    <form method="POST" action="{{ route(($routePrefix ?? 'admin') . '.property-booking.store') }}">
                        @csrf
                        <input type="hidden" name="property_id" value="{{ $selectedProperty->id }}">
                        <div class="mb-3">
                            <label class="form-label">Guest Name</label>
                            <input type="text" name="guest_name" value="{{ old('guest_name') }}" class="form-control" placeholder="Guest or source name">
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Start Date</label>
                                <input type="date" name="start_date" id="booking-start-date" value="{{ old('start_date') }}" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">End Date</label>
                                <input type="date" name="end_date" id="booking-end-date" value="{{ old('end_date') }}" class="form-control">
                            </div>
                        </div>
                        @error('start_date') <div class="text-danger small mt-2">{{ $message }}</div> @enderror
                        @error('end_date') <div class="text-danger small mt-2">{{ $message }}</div> @enderror
                        <div class="mt-3">
                            <label class="form-label">Type</label>
                            <select name="status" class="form-select">
                                <option value="booked" @selected(old('status') === 'booked')>Booked</option>
                                <option value="blocked" @selected(old('status') === 'blocked')>Blocked</option>
                            </select>
                        </div>
                        <div class="mt-3">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control" rows="3" placeholder="Optional note">{{ old('notes') }}</textarea>
                        </div>
                        <button class="btn btn-success mt-4">Save Booking</button>
                    </form>
                </div>
            </div>
        @endif
    </div>

    <div class="d-grid gap-4">
        @if($selectedProperty)
            <div class="card booking-card">
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h4 class="mb-1">{{ $selectedProperty->title }} Calendar</h4>
                        <p class="text-muted mb-0">Blue selectable hai, red/yellow booked ya blocked hai.</p>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route(($routePrefix ?? 'admin') . '.property-booking.index', ['property_id' => $selectedProperty->id, 'month' => $monthCursor->copy()->subMonth()->month, 'year' => $monthCursor->copy()->subMonth()->year]) }}" class="btn btn-light btn-sm">Prev</a>
                        <a href="{{ route(($routePrefix ?? 'admin') . '.property-booking.index', ['property_id' => $selectedProperty->id, 'month' => $monthCursor->copy()->addMonth()->month, 'year' => $monthCursor->copy()->addMonth()->year]) }}" class="btn btn-light btn-sm">Next</a>
                    </div>
                </div>
                <div class="card-body p-4">
                    <div class="calendar-shell">
                        @foreach($calendarMonths as $month)
                            <div>
                                <h4 class="text-center fw-bold mb-4">{{ $month['label'] }}</h4>
                                <div class="calendar-grid mb-3">
                                    @foreach(['S','M','T','W','T','F','S'] as $weekday)
                                        <div class="calendar-weekday">{{ $weekday }}</div>
                                    @endforeach
                                </div>
                                <div class="calendar-grid booking-calendar-grid">
                                    @foreach($month['weeks'] as $week)
                                        @foreach($week as $day)
                                            <button
                                                type="button"
                                                class="calendar-day{{ $day['in_month'] ? '' : ' outside' }}{{ $day['is_booked'] ? ' ' . $day['booking_status'] : ' available-day' }}"
                                                data-date="{{ $day['date']->toDateString() }}"
                                                @disabled($day['is_booked'])
                                            >
                                                <div class="fw-bold">{{ $day['date']->day }}</div>
                                                <div class="calendar-price">{{ $day['price'] ? '$' . rtrim(rtrim(number_format($day['price'], 2), '0'), '.') : '-' }}</div>
                                            </button>
                                        @endforeach
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="card booking-card">
                <div class="card-header">
                    <h4 class="mb-1">Bookings List</h4>
                    <p class="text-muted mb-0">Manual aur iCal synced dono bookings neeche dikhengi.</p>
                </div>
                <div class="card-body p-4">
                    <div class="booking-list">
                        @forelse($bookings as $booking)
                            <div class="booking-list-item d-flex justify-content-between align-items-start gap-3">
                                <div>
                                    <div class="fw-semibold">{{ $booking->guest_name ?: 'Booking' }}</div>
                                    <div class="small text-muted">{{ $booking->start_date->format('d M Y') }} to {{ $booking->end_date->format('d M Y') }}</div>
                                    <div class="small text-muted">{{ ucfirst($booking->status) }} via {{ $booking->source_name ?: $booking->source }}</div>
                                </div>
                                <form method="POST" action="{{ route(($routePrefix ?? 'admin') . '.property-booking.destroy', $booking->id) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-danger" onclick="return confirm('Delete this booking?')">Delete</button>
                                </form>
                            </div>
                        @empty
                            <div class="text-center py-4 text-muted">No bookings found for this property.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        @else
            <div class="card booking-card">
                <div class="card-body text-center py-5 text-muted">No property available for booking calendar.</div>
            </div>
        @endif
    </div>
</div>

@if($selectedProperty)
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const availableDays = document.querySelectorAll('.available-day');
        const startInput = document.getElementById('booking-start-date');
        const endInput = document.getElementById('booking-end-date');
        let selectionStart = startInput.value || null;
        let selectionEnd = endInput.value || null;

        const clearHighlights = () => {
            document.querySelectorAll('.available-day').forEach((button) => {
                button.classList.remove('selected', 'range', 'range-start', 'range-end');
            });
        };

        const applyHighlights = () => {
            clearHighlights();

            if (!selectionStart) {
                return;
            }

            const start = new Date(selectionStart);
            const end = new Date(selectionEnd || selectionStart);

            document.querySelectorAll('.available-day').forEach((button) => {
                const current = new Date(button.dataset.date);

                if (current >= start && current <= end) {
                    button.classList.add('range');
                }
                if (button.dataset.date === selectionStart) {
                    button.classList.add('selected', 'range-start');
                }
                if (button.dataset.date === (selectionEnd || selectionStart)) {
                    button.classList.add('selected', 'range-end');
                }
            });
        };

        availableDays.forEach((button) => {
            button.addEventListener('click', () => {
                const selectedDate = button.dataset.date;

                if (!selectionStart || (selectionStart && selectionEnd)) {
                    selectionStart = selectedDate;
                    selectionEnd = null;
                } else if (selectedDate < selectionStart) {
                    selectionEnd = selectionStart;
                    selectionStart = selectedDate;
                } else {
                    selectionEnd = selectedDate;
                }

                startInput.value = selectionStart;
                endInput.value = selectionEnd || selectionStart;
                applyHighlights();
            });
        });

        applyHighlights();
    });
</script>
@endif
@endsection