@extends('layouts.app')

@section('content')
<div class="container-fluid px-4">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center pt-3 pb-4 mb-4 border-bottom">
        <div>
            <h1 class="h2 mb-1">
                <i class="bi bi-list-ul me-2 text-primary"></i>All Bookings
            </h1>
            <p class="text-muted mb-0">Manage and track all booking requests</p>
        </div>
        <div class="btn-group">
            <a href="{{ route('booking.calendar', $website) }}" class="btn btn-outline-primary">
                <i class="bi bi-calendar3 me-2"></i>Calendar View
            </a>
            <a href="{{ route('booking.resources.index', $website) }}" class="btn btn-outline-primary">
                <i class="bi bi-grid-3x3-gap me-2"></i>Resources
            </a>
            <button type="button" class="btn btn-primary" onclick="exportBookings()">
                <i class="bi bi-download me-2"></i>Export
            </button>
        </div>
    </div>

    <!-- Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Status</label>
                            <select class="form-select" name="status">
                                <option value="">All Statuses</option>
                                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="confirmed" {{ request('status') === 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                                <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Completed</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Resource</label>
                            <select class="form-select" name="resource">
                                <option value="">All Resources</option>
                                @foreach($website->bookingResources as $resource)
                                <option value="{{ $resource->id }}" {{ request('resource') == $resource->id ? 'selected' : '' }}>
                                    {{ $resource->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Date From</label>
                            <input type="date" class="form-control" name="date_from" value="{{ request('date_from') }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Date To</label>
                            <input type="date" class="form-control" name="date_to" value="{{ request('date_to') }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-funnel"></i>
                                </button>
                                <a href="{{ route('booking.index', $website) }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-circle"></i>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bookings Table -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="bi bi-list me-2"></i>Bookings ({{ $bookings->total() }})
                        </h6>
                        <div class="d-flex align-items-center gap-2">
                            <small class="text-muted">Show per page:</small>
                            <select class="form-select form-select-sm" style="width: auto;" onchange="changePerPage(this.value)">
                                <option value="20" {{ request('per_page', 20) == 20 ? 'selected' : '' }}>20</option>
                                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                                <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    @if($bookings->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Booking Reference</th>
                                    <th>Customer</th>
                                    <th>Resource/Property</th>
                                    <th>Dates</th>
                                    <th>Participants</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Payment</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($bookings as $booking)
                                @if(is_object($booking) && isset($booking->is_group) && $booking->is_group)
                                    {{-- Grouped Subscription Booking --}}
                                    <tr class="table-primary">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <button class="btn btn-sm btn-link p-0 me-2" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#group-{{ $booking->group_id }}">
                                                    <i class="bi bi-chevron-down"></i>
                                                </button>
                                                <div>
                                                    <div class="fw-semibold">{{ $booking->booking_reference }}</div>
                                                    <small class="text-muted">{{ $booking->created_at->format('M d, Y H:i') }}</small>
                                                    <br><span class="badge bg-warning text-dark mt-1"><i class="bi bi-calendar2-check me-1"></i>{{ $booking->slots_count }} Slots</span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="fw-semibold">{{ $booking->customer_name }}</div>
                                            <small class="text-muted">{{ $booking->customer_email }}</small>
                                            @if($booking->subscription)
                                            <br><small class="badge bg-info mt-1">Subscription</small>
                                            @endif
                                        </td>
                                        <td>
                                            @if($booking->bookingResource)
                                                <div class="fw-semibold">{{ $booking->bookingResource->name }}</div>
                                                <small class="text-muted">{{ ucfirst($booking->bookingResource->resource_type) }}</small>
                                            @elseif($booking->bookingProperty)
                                                <div class="fw-semibold">{{ $booking->bookingProperty->name }}</div>
                                                <small class="text-muted">{{ $booking->bookingProperty->type }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="fw-semibold">Multiple Dates</div>
                                            <small class="text-muted">{{ $booking->slots->first()->start_datetime->format('M d') }} - {{ $booking->slots->last()->start_datetime->format('M d, Y') }}</small>
                                        </td>
                                        <td>
                                            <span class="badge bg-info">{{ $booking->participants }} {{ Str::plural('participant', $booking->participants) }}</span>
                                        </td>
                                        <td>
                                            <div class="fw-semibold">RM {{ number_format($booking->total_price, 2) }}</div>
                                            @if($booking->amount_paid > 0 && $booking->amount_paid < $booking->total_price)
                                            <small class="text-success">RM {{ number_format($booking->amount_paid, 2) }} paid</small>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge {{ $booking->status_badge_class }}">
                                                {{ ucfirst($booking->status) }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge {{ $booking->payment_status_badge_class }}">
                                                {{ ucfirst($booking->payment_status) }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a href="{{ route('booking.show', [$website, $booking->first_id]) }}"
                                                   class="btn btn-outline-primary btn-sm">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {{-- Expandable Slots --}}
                                    <tr class="collapse" id="group-{{ $booking->group_id }}">
                                        <td colspan="9" class="p-0">
                                            <table class="table table-sm mb-0 ms-5">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th>Slot #</th>
                                                        <th>Date & Time</th>
                                                        <th>Duration</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($booking->slots as $index => $slot)
                                                    <tr>
                                                        <td><small>Slot {{ $index + 1 }}</small></td>
                                                        <td>
                                                            <small class="fw-semibold">{{ $slot->start_datetime->format('M d, Y') }}</small>
                                                            <br><small class="text-muted">{{ $slot->start_datetime->format('g:i A') }} - {{ $slot->end_datetime->format('g:i A') }}</small>
                                                        </td>
                                                        <td>
                                                            <small>{{ $slot->start_datetime->diffInMinutes($slot->end_datetime) }} min</small>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('booking.show', [$website, $slot->id]) }}"
                                                               class="btn btn-outline-primary btn-sm btn-sm">
                                                                <i class="bi bi-eye"></i> View
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                @else
                                    {{-- Regular Booking --}}
                                    <tr>
                                        <td>
                                            <div class="fw-semibold">{{ $booking->booking_reference }}</div>
                                            <small class="text-muted">{{ $booking->created_at->format('M d, Y H:i') }}</small>
                                        </td>
                                        <td>
                                            <div class="fw-semibold">{{ $booking->customer_name }}</div>
                                            <small class="text-muted">{{ $booking->customer_email }}</small>
                                        </td>
                                        <td>
                                            @if($booking->bookingResource)
                                                <div class="fw-semibold">{{ $booking->bookingResource->name }}</div>
                                                <small class="text-muted">{{ ucfirst($booking->bookingResource->resource_type) }}</small>
                                            @elseif($booking->bookingProperty)
                                                <div class="fw-semibold">{{ $booking->bookingProperty->name }}</div>
                                                <small class="text-muted">{{ $booking->bookingProperty->type }}</small>
                                            @else
                                                <div class="fw-semibold">N/A</div>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="fw-semibold">{{ $booking->start_datetime->format('M d, Y') }}</div>
                                            <small class="text-muted">{{ $booking->start_datetime->format('g:i A') }} - {{ $booking->end_datetime->format('g:i A') }}</small>
                                        </td>
                                        <td>
                                            <span class="badge bg-info">{{ $booking->participants }} {{ Str::plural('participant', $booking->participants) }}</span>
                                        </td>
                                        <td>
                                            <div class="fw-semibold">RM {{ number_format($booking->total_price, 2) }}</div>
                                            @if($booking->amount_paid > 0 && $booking->amount_paid < $booking->total_price)
                                            <small class="text-success">RM {{ number_format($booking->amount_paid, 2) }} paid</small>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge {{ $booking->status_badge_class }}">
                                                {{ ucfirst($booking->status) }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge {{ $booking->payment_status_badge_class }}">
                                                {{ ucfirst($booking->payment_status) }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a href="{{ route('booking.show', [$website, $booking]) }}"
                                                   class="btn btn-outline-primary btn-sm">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                                @if($booking->status === 'pending')
                                                <button type="button" class="btn btn-outline-success btn-sm"
                                                        onclick="updateStatus({{ $booking->id }}, 'confirmed')">
                                                    <i class="bi bi-check"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger btn-sm"
                                                        onclick="updateStatus({{ $booking->id }}, 'cancelled')">
                                                    <i class="bi bi-x"></i>
                                                </button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <div class="text-center py-5">
                        <i class="bi bi-calendar-x display-1 text-muted mb-3"></i>
                        <h5 class="text-muted">No bookings found</h5>
                        <p class="text-muted mb-4">There are no bookings matching your criteria.</p>
                        <a href="{{ route('booking.resources.index', $website) }}" class="btn btn-primary">
                            <i class="bi bi-plus-circle me-2"></i>Create Resource
                        </a>
                    </div>
                    @endif
                </div>
                @if($bookings->hasPages())
                <div class="card-footer bg-white border-top">
                    {{ $bookings->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
function updateStatus(bookingId, status) {
    if (!confirm(`Are you sure you want to ${status === 'confirmed' ? 'confirm' : 'cancel'} this booking?`)) {
        return;
    }

    // Disable the action buttons for this row to prevent double-clicks
    const buttons = document.querySelectorAll(`button[onclick*="updateStatus(${bookingId}"]`);
    buttons.forEach(btn => {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
    });

    // Construct the correct URL
    const url = `/websites/{{ $website->id }}/booking/bookings/${bookingId}/status`;

    fetch(url, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        },
        body: JSON.stringify({ status: status })
    })
    .then(response => {
        console.log('Response status:', response.status);

        if (!response.ok) {
            return response.text().then(text => {
                console.error('Error response text:', text);
                throw new Error(`HTTP error! status: ${response.status}`);
            });
        }

        return response.json();
    })
    .then(data => {
        console.log('Success data:', data);
        if (data.success) {
            showAlert('success', `Booking ${status} successfully!`);
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert('error', data.message || 'Failed to update booking status');
            // Re-enable buttons on error
            buttons.forEach(btn => {
                btn.disabled = false;
                btn.innerHTML = btn.innerHTML.replace(/<span class="spinner-border.*?<\/span>/, '');
            });
        }
    })
    .catch(error => {
        console.error('Caught error:', error);
        showAlert('error', error.message || 'An error occurred while updating the booking');
        // Re-enable buttons on error
        buttons.forEach(btn => {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-' + (status === 'confirmed' ? 'check' : 'x') + '"></i>';
        });
    });
}

function changePerPage(perPage) {
    const url = new URL(window.location);
    url.searchParams.set('per_page', perPage);
    window.location = url.toString();
}

function exportBookings() {
    const url = new URL('{{ route("booking.index", $website) }}');
    url.searchParams.set('export', '1');
    
    // Add current filters to export
    const form = document.querySelector('form');
    const formData = new FormData(form);
    for (let [key, value] of formData.entries()) {
        if (value) url.searchParams.set(key, value);
    }
    
    window.open(url.toString(), '_blank');
}

function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    const container = document.querySelector('.container-fluid');
    container.insertAdjacentHTML('afterbegin', alertHtml);
    
    setTimeout(() => {
        const alert = container.querySelector('.alert');
        if (alert) alert.remove();
    }, 5000);
}
</script>

<style>
.badge {
    font-size: 0.75em;
}

.table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
    background-color: #f8f9fa;
}

.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
}
</style>
@endsection