@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-calendar-event me-2 text-primary"></i>Booking Details
            </h1>
            <p class="text-muted mb-0">{{ $booking->booking_reference }}</p>
        </div>
        <div class="btn-group">
            <a href="{{ route('booking.index', $website) }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-2"></i>Back to Bookings
            </a>
            <a href="{{ route('booking.calendar', $website) }}" class="btn btn-outline-primary">
                <i class="bi bi-calendar3 me-2"></i>Calendar
            </a>
            @if($booking->status === 'pending')
            <button type="button" class="btn btn-success" onclick="updateStatus('confirmed')">
                <i class="bi bi-check-circle me-2"></i>Confirm
            </button>
            <button type="button" class="btn btn-danger" onclick="updateStatus('cancelled')">
                <i class="bi bi-x-circle me-2"></i>Cancel
            </button>
            @endif
        </div>
    </div>

    <div class="row">
        <!-- Booking Information -->
        <div class="col-lg-8 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i>Booking Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Booking Reference</label>
                            <div class="fw-semibold">{{ $booking->booking_reference }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Status</label>
                            <div>
                                @php
                                    $statusClass = match($booking->status) {
                                        'pending' => 'warning',
                                        'confirmed' => 'success',
                                        'cancelled' => 'danger',
                                        'completed' => 'primary',
                                        default => 'secondary'
                                    };
                                @endphp
                                <span class="badge bg-{{ $statusClass }} {{ $statusClass === 'warning' ? 'text-dark' : '' }} fs-6">
                                    {{ ucfirst($booking->status) }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Check-in Date</label>
                            <div class="fw-semibold">{{ $booking->start_datetime->format('l, F j, Y') }}</div>
                            <small class="text-muted">{{ $booking->start_datetime->format('g:i A') }}</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Check-out Date</label>
                            <div class="fw-semibold">{{ $booking->end_datetime->format('l, F j, Y') }}</div>
                            <small class="text-muted">{{ $booking->end_datetime->format('g:i A') }}</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Duration</label>
                            @php
                                $days = ceil($booking->start_datetime->diffInDays($booking->end_datetime));
                            @endphp
                            <div class="fw-semibold">{{ $days }} {{ Str::plural('day', $days) }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Participants</label>
                            <div class="fw-semibold">{{ $booking->participants }} {{ Str::plural('participant', $booking->participants) }}</div>
                        </div>
                        @if($booking->special_requests)
                        <div class="col-12 mb-3">
                            <label class="form-label text-muted">Special Requests</label>
                            <div class="bg-light p-3 rounded">{{ $booking->special_requests }}</div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Related Booking Slots (if part of subscription group) -->
            @if($relatedBookings->count() > 0)
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-calendar2-check me-2"></i>Related Booking Slots
                        <span class="badge bg-info ms-2">{{ $relatedBookings->count() + 1 }} Total Slots</span>
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        <i class="bi bi-info-circle me-1"></i>
                        This booking is part of a group booking made with subscription credits.
                    </p>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Slot #</th>
                                    <th>Date & Time</th>
                                    <th>Duration</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Current booking --}}
                                <tr class="table-primary">
                                    <td><strong>Current</strong></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>
                                        <small>{{ $booking->start_datetime->diffInMinutes($booking->end_datetime) }} min</small>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $booking->status === 'confirmed' ? 'success' : ($booking->status === 'pending' ? 'warning text-dark' : 'secondary') }}">
                                            {{ ucfirst($booking->status) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="text-muted small">Viewing now</span>
                                    </td>
                                </tr>
                                {{-- Other slots --}}
                                @foreach($relatedBookings as $index => $slot)
                                <tr>
                                    <td>Slot {{ $index + 1 }}</td>
                                    <td>
                                        <div class="fw-semibold">{{ $slot->start_datetime->format('M d, Y') }}</div>
                                        <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>
                                        <span class="badge bg-{{ $slot->status === 'confirmed' ? 'success' : ($slot->status === 'pending' ? 'warning text-dark' : 'secondary') }}">
                                            {{ ucfirst($slot->status) }}
                                        </span>
                                    </td>
                                    <td>
                                        <a href="{{ route('booking.show', [$website, $slot->id]) }}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i> View
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif

            <!-- Resource/Property Information -->
            @if($booking->resource)
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-building me-2"></i>{{ $booking->resource_type ? ucfirst($booking->resource_type) : 'Property' }} Details
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Name</label>
                            <div class="fw-semibold">{{ $booking->resource->name }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Type</label>
                            <div class="fw-semibold">{{ ucfirst($booking->resource->resource_type ?? $booking->resource->type ?? 'N/A') }}</div>
                        </div>
                        @if($booking->resource->description)
                        <div class="col-12 mb-3">
                            <label class="form-label text-muted">Description</label>
                            <div class="bg-light p-3 rounded">{{ $booking->resource->description }}</div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Customer & Payment Information -->
        <div class="col-lg-4">
            <!-- Customer Information -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-person me-2"></i>Customer Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label text-muted">Name</label>
                        <div class="fw-semibold">{{ $booking->customer_name }}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Email</label>
                        <div class="fw-semibold">
                            <a href="mailto:{{ $booking->customer_email }}" class="text-decoration-none">
                                {{ $booking->customer_email }}
                            </a>
                        </div>
                    </div>
                    @if($booking->customer_phone)
                    <div class="mb-3">
                        <label class="form-label text-muted">Phone</label>
                        <div class="fw-semibold">
                            <a href="tel:{{ $booking->customer_phone }}" class="text-decoration-none">
                                {{ $booking->customer_phone }}
                            </a>
                        </div>
                    </div>
                    @endif
                    <div class="mb-0">
                        <label class="form-label text-muted">Booking Date</label>
                        <div class="fw-semibold">{{ $booking->created_at->format('M j, Y g:i A') }}</div>
                    </div>
                </div>
            </div>

            <!-- Payment Information -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-credit-card me-2"></i>Payment Information
                    </h5>
                </div>
                <div class="card-body">
                    @if($booking->subscription_id && $booking->total_price == 0)
                        {{-- Subscription Credits Payment --}}
                        <div class="alert alert-info mb-3">
                            <i class="bi bi-credit-card-2-front me-2"></i>
                            <strong>Paid with Subscription Credits</strong>
                        </div>
                        @if($booking->subscription)
                        <div class="mb-3">
                            <label class="form-label text-muted">Subscription Package</label>
                            <div class="fw-semibold">{{ $booking->subscription->package->name ?? 'N/A' }}</div>
                        </div>
                        @endif
                        <div class="mb-3">
                            <label class="form-label text-muted">Credits Used</label>
                            <div class="fw-semibold text-success">1 Credit</div>
                        </div>
                    @else
                        {{-- Regular Payment --}}
                        <div class="mb-3">
                            <label class="form-label text-muted">Total Amount</label>
                            <div class="fw-semibold fs-4 text-primary">RM {{ number_format($booking->total_price, 2) }}</div>
                        </div>
                    @endif

                    <div class="mb-3">
                        <label class="form-label text-muted">Payment Status</label>
                        <div>
                            @php
                                $paymentStatusClass = match($booking->payment_status) {
                                    'pending' => 'warning',
                                    'paid' => 'success',
                                    'failed' => 'danger',
                                    'refunded' => 'info',
                                    default => 'secondary'
                                };
                            @endphp
                            <span class="badge bg-{{ $paymentStatusClass }} {{ $paymentStatusClass === 'warning' ? 'text-dark' : '' }} fs-6">
                                {{ ucfirst($booking->payment_status) }}
                            </span>
                        </div>
                    </div>

                    @php
                        $paymentMethod = $booking->order->payment_method ?? $booking->booking_metadata['payment_method'] ?? null;
                    @endphp
                    @if($paymentMethod)
                    <div class="mb-3">
                        <label class="form-label text-muted">Payment Method</label>
                        <div class="fw-semibold">
                            @if($paymentMethod === 'wallet')
                                <i class="bi bi-wallet2 me-1 text-success"></i>Wallet Credits
                            @elseif($paymentMethod === 'stripe')
                                <i class="bi bi-credit-card me-1 text-primary"></i>Stripe
                            @elseif($paymentMethod === 'paypal')
                                <i class="bi bi-paypal me-1 text-primary"></i>PayPal
                            @elseif($paymentMethod === 'chipin')
                                <i class="bi bi-credit-card me-1 text-primary"></i>ChipIn
                            @elseif($paymentMethod === 'bank_transfer')
                                <i class="bi bi-bank me-1 text-info"></i>Bank Transfer
                            @elseif($paymentMethod === 'cash_on_delivery')
                                <i class="bi bi-cash-coin me-1 text-success"></i>Cash on Delivery
                            @else
                                {{ ucfirst(str_replace('_', ' ', $paymentMethod)) }}
                            @endif
                        </div>
                    </div>
                    @endif

                    @if($booking->amount_paid > 0)
                    <div class="mb-3">
                        <label class="form-label text-muted">Amount Paid</label>
                        <div class="fw-semibold text-success">RM {{ number_format($booking->amount_paid, 2) }}</div>
                    </div>
                    @endif

                    @if($booking->total_price > $booking->amount_paid)
                    <div class="mb-3">
                        <label class="form-label text-muted">Outstanding</label>
                        <div class="fw-semibold text-warning">RM {{ number_format($booking->total_price - $booking->amount_paid, 2) }}</div>
                    </div>
                    @endif

                    @if($booking->order)
                    <div class="mb-0">
                        <label class="form-label text-muted">Order Reference</label>
                        <div class="fw-semibold">
                            <a href="{{ route('orders.show', [$website, $booking->order]) }}" class="text-decoration-none">
                                {{ $booking->order->order_number }}
                                <i class="bi bi-box-arrow-up-right ms-1 small"></i>
                            </a>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Booking Timeline -->
            @if($booking->confirmed_at || $booking->cancelled_at || $booking->completed_at)
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-clock-history me-2"></i>Timeline
                    </h5>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-marker bg-primary"></div>
                            <div class="timeline-content">
                                <h6 class="mb-1">Booking Created</h6>
                                <small class="text-muted">{{ $booking->created_at->format('M j, Y g:i A') }}</small>
                            </div>
                        </div>
                        @if($booking->confirmed_at)
                        <div class="timeline-item">
                            <div class="timeline-marker bg-success"></div>
                            <div class="timeline-content">
                                <h6 class="mb-1">Booking Confirmed</h6>
                                <small class="text-muted">{{ $booking->confirmed_at->format('M j, Y g:i A') }}</small>
                            </div>
                        </div>
                        @endif
                        @if($booking->cancelled_at)
                        <div class="timeline-item">
                            <div class="timeline-marker bg-danger"></div>
                            <div class="timeline-content">
                                <h6 class="mb-1">Booking Cancelled</h6>
                                <small class="text-muted">{{ $booking->cancelled_at->format('M j, Y g:i A') }}</small>
                            </div>
                        </div>
                        @endif
                        @if($booking->completed_at)
                        <div class="timeline-item">
                            <div class="timeline-marker bg-info"></div>
                            <div class="timeline-content">
                                <h6 class="mb-1">Booking Completed</h6>
                                <small class="text-muted">{{ $booking->completed_at->format('M j, Y g:i A') }}</small>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<script>
function updateStatus(status) {
    if (!confirm(`Are you sure you want to ${status} this booking?`)) {
        return;
    }

    // Disable all action buttons to prevent double-clicks
    const buttons = document.querySelectorAll('.btn-group button');
    buttons.forEach(btn => {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>' + btn.textContent.trim();
    });

    fetch('{{ route("booking.update-status", [$website, $booking]) }}', {
        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);
        console.log('Response headers:', response.headers);

        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 = btn.innerHTML.replace(/<span class="spinner-border.*?<\/span>/, '');
        });
    });
}

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>
.timeline {
    position: relative;
    padding-left: 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -12px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.timeline-content {
    padding-left: 20px;
}

.timeline-content h6 {
    margin-bottom: 4px;
    font-weight: 600;
}
</style>
@endsection