@extends('layouts.app')
@section('content')
<section class="content-header pb-0">
    <div class="container-fluid">
        <div class="row mb-2 align-items-center">
            <div class="col-sm-6">
                <h4 class="font-weight-bold mb-0"><i class="fa fa-tasks text-primary"></i> لوحة معالجة طلبات الحجوزات</h4>
            </div>
            <div class="col-sm-6 text-right">
                <span class="text-muted small">مرحلة ما قبل تأكيد الحجز</span>
            </div>
        </div>
    </div>
</section>
<div class="content px-3 mt-3">
    @include('flash::message')
    <!-- Summary Widgets -->
    @if(isset($summary))
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm" style="border-radius: 12px; border-bottom: 4px solid #ffc107 !important;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">بانتظار موافقة المضيف</h6>
                            <h3 class="font-weight-bold mb-0">{{ $summary['waiting_host'] }} <small class="text-sm">طلب</small></h3>
                        </div>
                        <div class="bg-light rounded-circle p-3 text-warning"><i class="fa fa-user-clock fa-2x"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm" style="border-radius: 12px; border-bottom: 4px solid #17a2b8 !important;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">بانتظار دفع الزبون</h6>
                            <h3 class="font-weight-bold mb-0">{{ $summary['waiting_customer'] }} <small class="text-sm">طلب</small></h3>
                        </div>
                        <div class="bg-light rounded-circle p-3 text-info"><i class="fa fa-credit-card fa-2x"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm" style="border-radius: 12px; border-bottom: 4px solid #28a745 !important;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">إجمالي الفرص المعلقة</h6>
                            <h3 class="font-weight-bold mb-0 text-success">{{ number_format($summary['total_value'], 0) }} <small class="text-sm">د.ل</small></h3>
                        </div>
                        <div class="bg-light rounded-circle p-3 text-success"><i class="fa fa-chart-line fa-2x"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
    <!-- Filters -->
    <div class="card mb-4 shadow-sm border-0" style="border-radius: 8px;">
        <div class="card-body p-3">
            <form method="GET" action="{{ route('admin.booking_requests') }}" class="row align-items-center m-0">
                <div class="col-md-3 mb-2 mb-md-0">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-white border-right-0"><i class="fas fa-search text-muted"></i></span>
                        </div>
                        <input type="text" name="search" class="form-control border-left-0" placeholder="ابحث برقم أو اسم..." value="{{ request('search') }}">
                    </div>
                </div>
                <div class="col-md-3 mb-2 mb-md-0">
                    <select name="state_id" class="form-control" onchange="this.form.submit()">
                        <option value="">-- جميع الحالات --</option>
                        @foreach($states as $id => $label)
                            <option value="{{ $id }}" {{ request('state_id') !== null && request('state_id') != '' && request('state_id') == $id ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 mb-2 mb-md-0">
                    <select name="date_filter" class="form-control" onchange="this.form.submit()">
                        <option value="today" {{ (isset($currentDateFilter) && $currentDateFilter == 'today') ? 'selected' : '' }}>طلبات اليوم فقط</option>
                        <option value="this_month" {{ (!isset($currentDateFilter) || $currentDateFilter == 'this_month') ? 'selected' : '' }}>طلبات الشهر الحالي (مستحسن)</option>
                        <option value="all" {{ (isset($currentDateFilter) && $currentDateFilter == 'all') ? 'selected' : '' }}>جميع الطلبات في النظام</option>
                    </select>
                </div>
                <div class="col-md-3 text-md-right text-center">
                    <button type="submit" class="btn btn-primary px-3 rounded-pill"><i class="fas fa-filter"></i> تصفية</button>
                    <a href="{{ route('admin.booking_requests') }}" class="btn btn-light px-3 ml-1 rounded-pill border" title="إعادة تعيين"><i class="fas fa-redo"></i> مسح</a>
                </div>
            </form>
        </div>
    </div>
    <!-- Tabs Nav -->
    <ul class="nav nav-tabs mb-4 border-bottom-0" id="requestsTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active font-weight-bold" style="border-radius: 10px 10px 0 0; padding: 12px 20px;" id="kanban-tab" data-toggle="tab" href="#kanban" role="tab" aria-controls="kanban" aria-selected="true">
                <i class="fa fa-th-large text-primary mr-2"></i> لوحة الكانبان
            </a>
        </li>
        <li class="nav-item ml-2">
            <a class="nav-link font-weight-bold" style="border-radius: 10px 10px 0 0; padding: 12px 20px;" id="table-tab" data-toggle="tab" href="#table" role="tab" aria-controls="table" aria-selected="false">
                <i class="fa fa-list text-primary mr-2"></i> عرض كجدول
            </a>
        </li>
    </ul>
    <div class="tab-content" id="requestsTabContent">
        <!-- Kanban Tab -->
        <div class="tab-pane fade show active" id="kanban" role="tabpanel" aria-labelledby="kanban-tab">
            @php
                $waitingHost = [];
                $waitingCustomer = [];
                $rejected = [];
                foreach($bookings as $b) {
                    if (in_array($b->state_id, [1, 11])) $waitingHost[] = $b;
                    elseif ($b->state_id == 2) $waitingCustomer[] = $b;
                    elseif ($b->state_id == 12) $rejected[] = $b;
                }
            @endphp
            <div class="kanban-board">
                <!-- Column 1: Waiting Host -->
                <div class="kanban-col">
                    <div class="kanban-col-header text-warning">
                        <span><i class="fa fa-user-clock mr-1"></i> بانتظار موافقة المضيف</span>
                        <span class="badge badge-warning text-dark px-2 rounded-pill">{{ count($waitingHost) }}</span>
                    </div>
                    @forelse($waitingHost as $booking)
                        @include('tbl_booking_resorts.partials.kanban_card', ['booking' => $booking, 'borderClass' => 'warning-border'])
                    @empty
                        <div class="text-center text-muted py-4"><i class="fa fa-inbox fa-2x mb-2 opacity-50"></i><br>لا توجد طلبات هنا</div>
                    @endforelse
                </div>
                <!-- Column 2: Waiting Customer Payment -->
                <div class="kanban-col">
                    <div class="kanban-col-header text-info">
                        <span><i class="fa fa-credit-card mr-1"></i> بانتظار الدفع (الزبون)</span>
                        <span class="badge badge-info px-2 rounded-pill">{{ count($waitingCustomer) }}</span>
                    </div>
                    @forelse($waitingCustomer as $booking)
                        @include('tbl_booking_resorts.partials.kanban_card', ['booking' => $booking, 'borderClass' => 'success-border'])
                    @empty
                        <div class="text-center text-muted py-4"><i class="fa fa-inbox fa-2x mb-2 opacity-50"></i><br>لا توجد طلبات هنا</div>
                    @endforelse
                </div>
                <!-- Column 3: Rejected/Expired (Optional) -->
                <div class="kanban-col">
                    <div class="kanban-col-header text-danger">
                        <span><i class="fa fa-times-circle mr-1"></i> طلبات مرفوضة</span>
                        <span class="badge badge-danger px-2 rounded-pill">{{ count($rejected) }}</span>
                    </div>
                    @forelse($rejected as $booking)
                        @include('tbl_booking_resorts.partials.kanban_card', ['booking' => $booking, 'borderClass' => 'danger-border'])
                    @empty
                        <div class="text-center text-muted py-4"><i class="fa fa-inbox fa-2x mb-2 opacity-50"></i><br>لا توجد طلبات هنا</div>
                    @endforelse
                </div>
            </div>
        </div>
        <!-- Table Tab -->
        <div class="tab-pane fade" id="table" role="tabpanel" aria-labelledby="table-tab">
            <div class="card border-0 shadow-sm" style="border-radius: 12px;">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="border-top-0 border-0 text-muted">رقم الحجز</th>
                                    <th class="border-top-0 border-0 text-muted">العقار والمضيف</th>
                                    <th class="border-top-0 border-0 text-muted">الزبون</th>
                                    <th class="border-top-0 border-0 text-muted">الدخول للخروج</th>
                                    <th class="border-top-0 border-0 text-muted">الحالة والمؤقت</th>
                                    <th class="border-top-0 border-0 text-muted">المبلغ</th>
                                    <th class="border-top-0 border-0 text-muted text-center">إجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($bookings as $booking)
                                    <tr>
                                        <td class="font-weight-bold">#{{ $booking->unique_id ?? $booking->id }}</td>
                                        <td>
                                            <div class="font-weight-bold text-primary">{{ $booking->detail->title ?? 'غير معروف' }}</div>
                                            <small class="text-muted"><i class="fa fa-user-tie"></i> {{ $booking->detail && $booking->detail->createdBy ? $booking->detail->createdBy->full_name : 'غير معروف' }}</small>
                                        </td>
                                        <td>
                                            <div class="font-weight-bold">{{ $booking->customer ? (trim($booking->customer->first_name . ' ' . $booking->customer->last_name) ?: $booking->customer->full_name) : 'غير معروف' }}</div>
                                            @if($booking->customer && $booking->customer->contact_no)
                                                <small class="text-muted" dir="ltr">{{ $booking->customer->country_code . $booking->customer->contact_no }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            <div dir="ltr" class="text-right d-inline-block">
                                                <span class="d-block">{{ \Carbon\Carbon::parse($booking->start_date)->format('M d') }}</span>
                                                <small class="text-muted">إلى</small>
                                                <span class="d-block">{{ \Carbon\Carbon::parse($booking->end_date)->format('M d') }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge badge-light border px-2 py-1 d-inline-block mb-1">
                                                {{ $states[$booking->state_id] ?? 'غير معروف' }}
                                            </span>
                                            @if($booking->timeout_at)
                                                @php
                                                    $timeout = \Carbon\Carbon::parse($booking->timeout_at);
                                                    $isExpired = $timeout->isPast();
                                                @endphp
                                                <div class="small">
                                                    @if($isExpired)
                                                        <span class="text-danger"><i class="far fa-clock"></i> منتهي</span>
                                                    @else
                                                        <span class="text-warning"><i class="far fa-clock"></i> متبقي {{ $timeout->diffForHumans(null, \Carbon\CarbonInterface::DIFF_ABSOLUTE) }}</span>
                                                    @endif
                                                </div>
                                            @endif
                                        </td>
                                        <td class="font-weight-bold text-success">{{ number_format($booking->total_amount, 2) }} <small class="text-muted">LYD</small></td>
                                        <td class="text-center">
                                            <div class="btn-group">
                                                <a href="{{ route('tblBookingResorts.show', [$booking->id]) }}" class="btn btn-primary btn-sm rounded mx-1" title="عرض التفاصيل"><i class="far fa-eye"></i></a>
                                                @if($booking->state_id != 12 && $booking->state_id != 7)
                                                    <button type="button" class="btn btn-outline-danger btn-sm rounded mx-1" onclick="confirmCancellation({{ $booking->id }})" title="إلغاء"><i class="fas fa-times"></i></button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-4 text-muted">لا توجد طلبات لعرضها.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Pagination -->
    <div class="mt-4 mb-5 d-flex justify-content-center">
        {{ $bookings->appends(request()->query())->links() }}
    </div>
    <!-- Cancellation Modal -->
    <div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="border-radius: 12px;">
                <form id="cancelForm" method="POST" action="">
                    @csrf
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title font-weight-bold text-danger"><i class="fa fa-exclamation-triangle"></i> إلغاء الحجز</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted">هل أنت متأكد من رغبتك في إلغاء هذا الطلب وإخراجه من مسار العمل؟</p>
                        <div class="form-group">
                            <label class="font-weight-bold">سبب الإلغاء (سيتم إرساله في الإشعار)</label>
                            <textarea name="notes" class="form-control bg-light" rows="3" required placeholder="اكتب السبب هنا..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light" data-dismiss="modal">تراجع</button>
                        <button type="submit" class="btn btn-danger px-4">تأكيد الإلغاء</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('page_scripts')
<script>
    function confirmCancellation(id) {
        var actionUrl = "{{ url('booking-requests') }}/" + id + "/cancel";
        $('#cancelForm').attr('action', actionUrl);
        $('#cancelModal').modal('show');
    }
</script>
@endpush