@extends('backend.app')
@push('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --success-gradient: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
            --warning-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
            --card-hover-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        }

        body {
            background: #f5f7fa;
        }

        /* Header Section */
        .booking-header {
            background: var(--primary-gradient);
            border-radius: 16px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            color: white;
            box-shadow: var(--card-shadow);
            position: relative;
            overflow: hidden;
        }

        .booking-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }

        .booking-header .back-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 10px;
            transition: all 0.3s;
        }

        .booking-header .back-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateX(-3px);
        }

        .booking-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .booking-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* Info Cards */
        .info-card {
            background: white;
            border: none;
            border-radius: 16px;
            box-shadow: var(--card-shadow);
            transition: all 0.3s ease;
            overflow: hidden;
            height: 100%;
        }

        .info-card:hover {
            box-shadow: var(--card-hover-shadow);
            transform: translateY(-4px);
        }

        .card-header-custom {
            background: linear-gradient(to right, #f8f9fa, #ffffff);
            border-bottom: 2px solid #e9ecef;
            padding: 1.5rem;
            font-weight: 600;
        }

        .card-header-custom i {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            font-size: 1.1rem;
        }

        .card-icon-user { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
        .card-icon-calendar { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; }
        .card-icon-building { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: white; }
        .card-icon-shield { background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%); color: white; }
        .card-icon-clock { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #333; }

        .card-body-custom {
            padding: 1.5rem;
        }

        /* User Profile Section */
        .user-profile-section {
            text-align: center;
            padding-bottom: 1rem;
        }

        .user-avatar-large {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #667eea;
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
            margin-bottom: 1rem;
        }

        .user-avatar-placeholder {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: var(--primary-gradient);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
        }

        .user-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 0.25rem;
        }

        .user-email {
            color: #718096;
            font-size: 0.95rem;
        }

        /* Info Table */
        .info-table-custom {
            margin: 0;
        }

        .info-table-custom tr {
            border-bottom: 1px solid #f7fafc;
        }

        .info-table-custom tr:last-child {
            border-bottom: none;
        }

        .info-table-custom th {
            padding: 0.875rem 0.5rem;
            font-weight: 500;
            color: #718096;
            font-size: 0.875rem;
            border: none;
            background: transparent;
            width: 35%;
        }

        .info-table-custom td {
            padding: 0.875rem 0.5rem;
            font-weight: 600;
            color: #2d3748;
            border: none;
        }

        /* Status Badges */
        .status-badge-custom {
            padding: 0.5rem 1.25rem;
            border-radius: 25px;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-block;
        }

        .status-pending { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: white; }
        .status-confirmed { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; }
        .status-completed { background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%); color: white; }
        .status-cancelled { background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); color: white; }

        /* Amount Display */
        .amount-display {
            font-size: 1.75rem;
            font-weight: 700;
            background: var(--success-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Alert Box */
        .flagged-alert-custom {
            background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
            color: white;
            border: none;
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: var(--card-shadow);
        }

        /* Form Controls */
        .form-control-custom, .form-select-custom {
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            padding: 0.75rem 1rem;
            transition: all 0.3s;
        }

        .form-control-custom:focus, .form-select-custom:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        /* Buttons */
        .btn-custom-primary {
            background: var(--primary-gradient);
            border: none;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-custom-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
            color: white;
        }

        .btn-custom-warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            border: none;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-custom-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(245, 87, 108, 0.4);
            color: white;
        }

        /* Timeline */
        .timeline-custom {
            position: relative;
            padding-left: 2rem;
        }

        .timeline-item-custom {
            position: relative;
            padding-bottom: 2rem;
            padding-left: 2rem;
            border-left: 3px solid #e2e8f0;
        }

        .timeline-item-custom:last-child {
            border-left-color: transparent;
        }

        .timeline-dot {
            position: absolute;
            left: -2.5rem;
            top: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: white;
            border: 4px solid #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
        }

        .timeline-dot.success { border-color: #56ab2f; box-shadow: 0 0 0 4px rgba(86, 171, 47, 0.2); }
        .timeline-dot.info { border-color: #4facfe; box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.2); }
        .timeline-dot.warning { border-color: #f5576c; box-shadow: 0 0 0 4px rgba(245, 87, 108, 0.2); }
        .timeline-dot.danger { border-color: #eb3349; box-shadow: 0 0 0 4px rgba(235, 51, 73, 0.2); }

        .timeline-content-custom {
            background: #f7fafc;
            border-radius: 12px;
            padding: 1.25rem;
            border-left: 4px solid #667eea;
        }

        .timeline-content-custom.success { border-left-color: #56ab2f; }
        .timeline-content-custom.info { border-left-color: #4facfe; }
        .timeline-content-custom.warning { border-left-color: #f5576c; }
        .timeline-content-custom.danger { border-left-color: #eb3349; }

        .timeline-time {
            font-size: 0.85rem;
            color: #718096;
        }

        /* Quick Stats */
        .quick-stat-card {
            background: white;
            border-radius: 12px;
            padding: 1.25rem;
            text-align: center;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
            border: 2px solid transparent;
            transition: all 0.3s;
        }

        .quick-stat-card:hover {
            border-color: #667eea;
            transform: translateY(-2px);
        }

        .quick-stat-value {
            font-size: 1.75rem;
            font-weight: 700;
            color: #2d3748;
        }

        .quick-stat-label {
            font-size: 0.875rem;
            color: #718096;
            margin-top: 0.25rem;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .booking-header {
                padding: 1.5rem;
            }

            .booking-title {
                font-size: 1.5rem;
            }

            .info-table-custom th,
            .info-table-custom td {
                display: block;
                width: 100%;
            }

            .info-table-custom th {
                padding-top: 1rem;
                padding-bottom: 0.25rem;
            }
        }
    </style>
@endpush

@section('title', 'Booking Details #' . $booking->id)

@section('content')
<div class="app-content content">
    <div class="content-wrapper">
        <!-- Header -->
        <div class="booking-header">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <div class="d-flex align-items-center mb-3">
                        <a href="{{ route('admin.bookings.index') }}" class="back-btn me-3">
                            <i class="fa-solid fa-arrow-left"></i>
                        </a>
                        <div>
                            <h1 class="booking-title mb-0">Booking Details</h1>
                            <p class="booking-subtitle mb-0">ID: #BOOK-{{ str_pad($booking->id, 5, '0', STR_PAD_LEFT) }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-md-end mt-3 mt-md-0">
                    <span class="status-badge-custom status-{{ $booking->status }}">
                        <i class="fa-solid fa-circle me-2" style="font-size: 8px;"></i>
                        {{ ucfirst($booking->status) }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Flagged Alert -->
        @if($booking->is_flagged)
            <div class="flagged-alert-custom">
                <div class="d-flex align-items-center">
                    <div class="me-4">
                        <i class="fa-solid fa-triangle-exclamation fa-3x"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h4 class="mb-2"><i class="fa-solid fa-flag me-2"></i>This Booking is Flagged</h4>
                        <p class="mb-0 opacity-90">{{ $booking->flag_reason ?? 'No reason provided' }}</p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Quick Stats -->
        <div class="row mb-4">
            <div class="col-md-3 mb-3">
                <div class="quick-stat-card">
                    <div class="quick-stat-value text-primary">
                        <i class="fa-solid fa-calendar-check me-2"></i>{{ $booking->booking_date ? $booking->booking_date->format('M d') : 'N/A' }}
                    </div>
                    <div class="quick-stat-label">Booking Date</div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="quick-stat-card">
                    <div class="quick-stat-value text-info">
                        <i class="fa-regular fa-clock me-2"></i>{{ Carbon\Carbon::parse($booking->booking_time)->format('h:i A') ?? 'N/A' }}
                    </div>
                    <div class="quick-stat-label">Booking Time</div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="quick-stat-card">
                    <div class="quick-stat-value text-success">
                        <i class="fa-solid fa-dollar-sign me-2"></i>{{ number_format((float)($booking->total_amount ?? 0), 2) }}
                    </div>
                    <div class="quick-stat-label">Amount</div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="quick-stat-card">
                    <div class="quick-stat-value text-warning">
                        <i class="fa-solid fa-eye me-2"></i>{{ $booking->is_visit ? 'Yes' : 'No' }}
                    </div>
                    <div class="quick-stat-label">Is Visit</div>
                </div>
            </div>
        </div>

        <!-- Main Content Cards -->
        <div class="row">
            <!-- User Information -->
            <div class="col-lg-4 mb-4">
                <div class="info-card">
                    <div class="card-header-custom">
                        <i class="card-icon-user"><i class="fa-solid fa-user"></i></i>
                        <span class="fs-5">Customer Information</span>
                    </div>
                    <div class="card-body-custom">
                        <div class="user-profile-section">
                            @if($booking->user && $booking->user->profile_picture)
                                <img src="{{ asset($booking->user->profile_picture) }}" class="user-avatar-large">
                            @else
                                <div class="user-avatar-placeholder">
                                    <i class="fa-solid fa-user fa-2x text-white"></i>
                                </div>
                            @endif
                            <h4 class="user-name">{{ $booking->user ? $booking->user->name : 'N/A' }}</h4>
                            <p class="user-email">{{ $booking->user ? $booking->user->email : 'N/A' }}</p>
                        </div>
                        <table class="info-table-custom">
                            <tr>
                                <th><i class="fa-solid fa-phone me-2 text-primary"></i>Phone</th>
                                <td>{{ $booking->user ? $booking->user->phone : 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa-solid fa-id-card me-2 text-primary"></i>User ID</th>
                                <td>#{{ str_pad($booking->user_id ?? 0, 4, '0', STR_PAD_LEFT) }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa-solid fa-calendar-plus me-2 text-primary"></i>Joined</th>
                                <td>{{ $booking->user && $booking->user->created_at ? $booking->user->created_at->format('M Y') : 'N/A' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Booking Details -->
            <div class="col-lg-4 mb-4">
                <div class="info-card">
                    <div class="card-header-custom">
                        <i class="card-icon-calendar"><i class="fa-solid fa-calendar-check"></i></i>
                        <span class="fs-5">Booking Details</span>
                    </div>
                    <div class="card-body-custom">
                        <table class="info-table-custom">
                            <tr>
                                <th><i class="fa-solid fa-calendar me-2 text-info"></i>Date</th>
                                <td>{{ $booking->booking_date ? $booking->booking_date->format('l, F j, Y') : 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa-solid fa-clock me-2 text-info"></i>Time</th>
                                <td>{{ $booking->booking_time ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa-solid fa-money-bill-wave me-2 text-info"></i>Amount</th>
                                <td class="amount-display">${{ number_format((float)($booking->total_amount ?? 0), 2) }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa-solid fa-tag me-2 text-info"></i>Status</th>
                                <td>
                                    <span class="status-badge-custom status-{{ $booking->status }}">
                                        {{ ucfirst($booking->status) }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th><i class="fa-solid fa-eye me-2 text-info"></i>Is Visit</th>
                                <td>
                                    @if($booking->is_visit)
                                        <span class="badge bg-success status-badge-custom">Yes</span>
                                    @else
                                        <span class="badge bg-secondary status-badge-custom">No</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th><i class="fa-solid fa-clock-rotate-left me-2 text-info"></i>Created</th>
                                <td class="small">{{ $booking->created_at ? $booking->created_at->diffForHumans() : 'N/A' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Business & Professional -->
            <div class="col-lg-4 mb-4">
                <div class="info-card">
                    <div class="card-header-custom">
                        <i class="card-icon-building"><i class="fa-solid fa-building"></i></i>
                        <span class="fs-5">Business & Professional</span>
                    </div>
                    <div class="card-body-custom">
                        <table class="info-table-custom">
                            <tr>
                                <th><i class="fa-solid fa-building me-2 text-warning"></i>Company</th>
                                <td class="text-primary fw-bold">{{ $booking->company ? $booking->company->name : 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa-solid fa-user-tie me-2 text-warning"></i>Professional</th>
                                <td>{{ $booking->employee && $booking->employee->user ? $booking->employee->user->name : 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa-solid fa-briefcase me-2 text-warning"></i>Job Title</th>
                                <td>{{ $booking->employee ? $booking->employee->job_title : 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa-solid fa-concierge-bell me-2 text-warning"></i>Service</th>
                                <td>{{ $booking->service ? $booking->service->name : 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa-solid fa-id-badge me-2 text-warning"></i>Employee ID</th>
                                <td>#{{ str_pad($booking->employee_id ?? 0, 4, '0', STR_PAD_LEFT) }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Admin Actions -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="info-card">
                    <div class="card-header-custom">
                        <i class="card-icon-shield"><i class="fa-solid fa-user-shield"></i></i>
                        <span class="fs-5">Admin Actions & Notes</span>
                    </div>
                    <div class="card-body-custom">
                        <form method="POST" action="{{ route('admin.bookings.update', $booking->id) }}">
                            @csrf
                            @method('PUT')
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold mb-2">
                                        <i class="fa-solid fa-arrows-rotate me-2 text-primary"></i>Update Status
                                    </label>
                                    <select name="status" class="form-select form-select-custom">
                                        <option value="pending" {{ $booking->status === 'pending' ? 'selected' : '' }}>⏳ Pending</option>
                                        <option value="confirmed" {{ $booking->status === 'confirmed' ? 'selected' : '' }}>✅ Confirmed</option>
                                        <option value="completed" {{ $booking->status === 'completed' ? 'selected' : '' }}>✔️ Completed</option>
                                        <option value="cancelled" {{ $booking->status === 'cancelled' ? 'selected' : '' }}>❌ Cancelled</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold mb-2">
                                        <i class="fa-solid fa-clipboard me-2 text-primary"></i>Admin Notes
                                    </label>
                                    <textarea name="admin_notes" class="form-control form-control-custom" rows="1" placeholder="Add internal notes...">{{ $booking->admin_notes ?? '' }}</textarea>
                                </div>
                            </div>
                            <div class="d-flex gap-2 flex-wrap">
                                <button type="submit" class="btn btn-custom-primary">
                                    <i class="fa-solid fa-save me-2"></i>Update Booking
                                </button>
                                @if(!$booking->is_flagged)
                                    <button type="button" class="btn btn-custom-warning" onclick="showFlagModal()">
                                        <i class="fa-solid fa-flag me-2"></i>Flag Booking
                                    </button>
                                @else
                                    <button type="button" class="btn btn-success" onclick="unflagThisBooking()" style="background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%); border: none; color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 10px;">
                                        <i class="fa-solid fa-check me-2"></i>Resolve Flag
                                    </button>
                                @endif
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Activity Timeline -->
        <div class="row">
            <div class="col-12">
                <div class="info-card">
                    <div class="card-header-custom">
                        <i class="card-icon-clock"><i class="fa-solid fa-clock-rotate-left"></i></i>
                        <span class="fs-5">Activity Timeline</span>
                    </div>
                    <div class="card-body-custom">
                        @if($booking->activities && $booking->activities->count() > 0)
                            <div class="timeline-custom">
                                @foreach($booking->activities->sortByDesc('created_at')->take(10) as $activity)
                                    @php
                                        $badgeTypes = [
                                            'created' => 'success',
                                            'updated' => 'info',
                                            'confirmed' => 'info',
                                            'cancelled' => 'danger',
                                            'completed' => 'success',
                                            'flagged' => 'warning',
                                            'investigated' => 'info',
                                        ];
                                        $type = $badgeTypes[$activity->action] ?? 'info';
                                    @endphp
                                    <div class="timeline-item-custom">
                                        <div class="timeline-dot {{ $type }}"></div>
                                        <div class="timeline-content-custom {{ $type }}">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <div>
                                                    <h6 class="mb-1 fw-bold">
                                                        <span class="badge bg-{{ $type }} me-2">
                                                            <i class="fa-solid fa-circle text-white" style="font-size: 6px;"></i>
                                                            {{ ucfirst($activity->action) }}
                                                        </span>
                                                        {{ $activity->performer ? $activity->performer->name : 'System' }}
                                                    </h6>
                                                    <p class="timeline-time mb-0">
                                                        <i class="fa-regular fa-clock me-1"></i>
                                                        {{ $activity->created_at ? $activity->created_at->format('M d, Y - g:i A') : 'N/A' }}
                                                    </p>
                                                </div>
                                            </div>
                                            @if($activity->notes)
                                                <p class="mb-2 mt-2">{{ $activity->notes }}</p>
                                            @endif
                                            @if($activity->old_values || $activity->new_values)
                                                <div class="mt-2 p-3 bg-white rounded shadow-sm">
                                                    @if($activity->old_values)
                                                        <div class="small mb-1">
                                                            <span class="text-danger fw-bold"><i class="fa-solid fa-arrow-left me-1"></i>Old:</span>
                                                            <code class="ms-1 bg-light p-1 rounded">{{ json_encode($activity->old_values) }}</code>
                                                        </div>
                                                    @endif
                                                    @if($activity->new_values)
                                                        <div class="small">
                                                            <span class="text-success fw-bold"><i class="fa-solid fa-arrow-right me-1"></i>New:</span>
                                                            <code class="ms-1 bg-light p-1 rounded">{{ json_encode($activity->new_values) }}</code>
                                                        </div>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fa-solid fa-clock-rotate-left fa-4x text-muted mb-3"></i>
                                <p class="text-muted">No activity recorded yet</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Flag Modal -->
<div class="modal fade" id="flagModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border: none; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
            <form id="flagFormInline">
                <div class="modal-header text-white" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 16px 16px 0 0; padding: 1.5rem;">
                    <h5 class="modal-title">
                        <i class="fa-solid fa-flag me-2"></i>Flag Booking
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="alert alert-warning" style="border-radius: 10px;">
                        <i class="fa-solid fa-exclamation-triangle me-2"></i>
                        Flagged bookings will require administrator review and attention.
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Reason for Flagging <span class="text-danger">*</span></label>
                        <textarea class="form-control form-control-custom" id="flag_reason_inline" rows="4" required placeholder="Please explain why this booking needs attention..."></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius: 10px;">Cancel</button>
                    <button type="submit" class="btn btn-custom-warning">
                        <i class="fa-solid fa-flag me-2"></i>Flag Booking
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                }
            });
        });

        function showFlagModal() {
            $('#flag_reason_inline').val('');
            $('#flagModal').modal('show');
        }

        $('#flagFormInline').on('submit', function(e) {
            e.preventDefault();
            var reason = $('#flag_reason_inline').val();

            if (!reason.trim()) {
                toastr.error('Please provide a reason');
                return;
            }

            $.ajax({
                url: '{{ route("admin.bookings.flag", $booking->id) }}',
                type: 'POST',
                data: {
                    flag_reason: reason
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        $('#flagModal').modal('hide');
                        setTimeout(() => location.reload(), 1500);
                    }
                },
                error: function() {
                    toastr.error('Something went wrong!');
                }
            });
        });

        function unflagThisBooking() {
            Swal.fire({
                title: 'Resolve Flag?',
                text: "Are you sure this booking no longer needs attention?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#6c757d',
                confirmButtonText: '<i class="fa-solid fa-check me-1"></i>Yes, resolve it'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ route("admin.bookings.unflag", $booking->id) }}',
                        type: 'POST',
                        data: {
                            _method: 'PUT'
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Resolved!',
                                    text: response.message,
                                    timer: 2000,
                                    showConfirmButton: false
                                }).then(() => location.reload());
                            }
                        },
                        error: function() {
                            Swal.fire(
                                'Error!',
                                'Something went wrong.',
                                'error'
                            );
                        }
                    });
                }
            });
        }
    </script>
@endpush
@endsection