@extends('layouts.app')
@section('content')
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<section class="content-header pb-0">
    <div class="container-fluid">
        <div class="row align-items-center mb-3">
            <div class="col-sm-6">
                <h4 class="font-weight-bold mb-0"><i class="fa fa-ban text-danger mr-2"></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-2">
    @include('flash::message')
    <!-- KPI Summary Cards -->
    @if(isset($kpis))
    <div class="row mb-4">
        <!-- Total Lost Revenue -->
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card kpi-card h-100" style="border-bottom: 4px solid #dc3545;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 font-weight-bold" style="font-size: 13px;">الفرص المالية الضائعة</p>
                            <h3 class="font-weight-bold text-danger mb-0">{{ number_format($kpis['lost_revenue'], 0) }} <small class="text-sm text-muted">د.ل</small></h3>
                        </div>
                        <div class="kpi-icon badge-soft-danger text-danger"><i class="fa fa-chart-line-down"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Total Cancellations -->
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card kpi-card h-100" style="border-bottom: 4px solid #6c757d;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 font-weight-bold" style="font-size: 13px;">إجمالي الإلغاءات</p>
                            <h3 class="font-weight-bold text-dark mb-0">{{ $kpis['total'] }} <small class="text-sm text-muted">حجز</small></h3>
                        </div>
                        <div class="kpi-icon bg-light text-secondary"><i class="fa fa-times-circle"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Host Timeout -->
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card kpi-card h-100" style="border-bottom: 4px solid #ffc107;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 font-weight-bold" style="font-size: 13px;">تجاهل المضيف (Timeout)</p>
                            <h3 class="font-weight-bold text-warning mb-0">{{ $kpis['reasons']['host_timeout'] }} <small class="text-sm text-muted">حجز</small></h3>
                        </div>
                        <div class="kpi-icon badge-soft-warning text-warning"><i class="fa fa-user-clock"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Customer Timeout -->
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card kpi-card h-100" style="border-bottom: 4px solid #17a2b8;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 font-weight-bold" style="font-size: 13px;">تأخر الزبون بالدفع</p>
                            <h3 class="font-weight-bold text-info mb-0">{{ $kpis['reasons']['customer_timeout'] }} <small class="text-sm text-muted">حجز</small></h3>
                        </div>
                        <div class="kpi-icon badge-soft-info text-info"><i class="fa fa-wallet"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
    <div class="row">
        <!-- Chart Section -->
        <div class="col-lg-4 mb-4">
            <div class="card h-100 border-0 shadow-sm" style="border-radius: 12px;">
                <div class="card-header bg-white border-0 pt-4 pb-0">
                    <h6 class="font-weight-bold"><i class="fa fa-chart-pie text-primary mr-2"></i> توزيع أسباب الإلغاء</h6>
                </div>
                <div class="card-body d-flex justify-content-center align-items-center">
                    <canvas id="cancellationChart" style="max-height: 250px;"></canvas>
                </div>
            </div>
        </div>
        <!-- Filter Section -->
        <div class="col-lg-8 mb-4">
            <div class="card h-100 border-0 shadow-sm" style="border-radius: 12px;">
                <div class="card-body">
                    <h6 class="font-weight-bold mb-3"><i class="fa fa-filter text-primary mr-2"></i> تصفية السجل</h6>
                    <form method="GET" action="{{ route('admin.cancellation_logs') }}">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="text-muted small">رقم الحجز</label>
                                <input type="number" name="booking_id" class="form-control" placeholder="بحث برقم الحجز..." value="{{ request('booking_id') }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="text-muted small">اسم المستخدم (الزبون أو الموظف)</label>
                                <input type="text" name="user_id" class="form-control" placeholder="بحث بالاسم..." value="{{ request('user_id') }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="text-muted small">نوع الإلغاء</label>
                                <select name="type" class="form-control">
                                    <option value="">الكل</option>
                                    <option value="admin_manual" {{ request('type') == 'admin_manual' ? 'selected' : '' }}>إلغاء يدوي من الإدارة</option>
                                    <option value="host_rejected" {{ request('type') == 'host_rejected' ? 'selected' : '' }}>رفض من قبل المالك</option>
                                    <option value="host_timeout" {{ request('type') == 'host_timeout' ? 'selected' : '' }}>تلقائي (تأخر المالك بالرد)</option>
                                    <option value="customer_timeout" {{ request('type') == 'customer_timeout' ? 'selected' : '' }}>تلقائي (تأخر الزبون بالدفع)</option>
                                    <option value="customer_cancel" {{ request('type') == 'customer_cancel' ? 'selected' : '' }}>إلغاء من طرف الزبون</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="text-muted small">بحث في الملاحظات</label>
                                <input type="text" name="notes" class="form-control" placeholder="كلمة مفتاحية..." value="{{ request('notes') }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="text-muted small">من تاريخ</label>
                                <input type="date" name="date_start" class="form-control" value="{{ request('date_start') }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="text-muted small">إلى تاريخ</label>
                                <input type="date" name="date_end" class="form-control" value="{{ request('date_end') }}">
                            </div>
                        </div>
                        <div class="text-left mt-2">
                            <a href="{{ route('admin.cancellation_logs') }}" class="btn btn-light px-3"><i class="fas fa-redo text-muted"></i> إزالة الفلاتر</a>
                            <button type="submit" class="btn btn-primary px-4 ml-2"><i class="fas fa-search"></i> تطبيق التصفية</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Data Table Section -->
    <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 rich-table mb-0">
                    <thead>
                        <tr>
                            <th class="pl-4">معلومات الحجز الملغى</th>
                            <th>القيمة المالية (ضائعة)</th>
                            <th>من قام بالإلغاء</th>
                            <th>نوع الإلغاء وتاريخه</th>
                            <th>السبب / ملاحظات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($logs as $log)
                            <tr>
                                <td class="pl-4">
                                    <div class="d-flex align-items-center">
                                        <div class="bg-light rounded d-flex align-items-center justify-content-center mr-3" style="width: 45px; height: 45px;">
                                            <i class="fa fa-bed text-secondary"></i>
                                        </div>
                                        <div>
                                            <a href="{{ route('tblBookingResorts.show', [$log->booking_id]) }}" class="font-weight-bold text-dark d-block" style="font-size: 15px;">
                                                #{{ $log->booking->unique_id ?? $log->booking_id }} - {{ $log->booking->detail->title ?? 'غير معروف' }}
                                            </a>
                                            <small class="text-muted"><i class="fa fa-user"></i> الزبون: {{ $log->booking->customer->first_name ?? 'غير معروف' }} {{ $log->booking->customer->last_name ?? '' }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($log->booking)
                                        <span class="font-weight-bold text-danger">{{ number_format($log->booking->total_amount, 2) }} <small class="text-muted">LYD</small></span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="font-weight-bold">{{ $log->user->name ?? $log->user->first_name ?? 'مدير النظام (آلي)' }}</div>
                                    <small class="text-muted">{{ $log->user ? 'عن طريق المستخدم' : 'النظام الآلي' }}</small>
                                </td>
                                <td>
                                    @if($log->type == 'admin_manual')
                                        <span class="badge badge-soft-danger px-2 py-1 mb-1 d-inline-block"><i class="fa fa-user-shield"></i> يدوي من الإدارة</span>
                                    @elseif($log->type == 'host_rejected')
                                        <span class="badge badge-soft-danger px-2 py-1 mb-1 d-inline-block"><i class="fa fa-times"></i> رفض المالك</span>
                                    @elseif($log->type == 'host_timeout')
                                        <span class="badge badge-soft-warning px-2 py-1 mb-1 d-inline-block"><i class="fa fa-hourglass-end"></i> تأخر المالك بالرد</span>
                                    @elseif($log->type == 'customer_timeout')
                                        <span class="badge badge-soft-info px-2 py-1 mb-1 d-inline-block"><i class="fa fa-wallet"></i> تأخر الزبون بالدفع</span>
                                    @elseif($log->type == 'customer_cancel')
                                        <span class="badge badge-soft-warning px-2 py-1 mb-1 d-inline-block"><i class="fa fa-user-times"></i> إلغاء من الزبون</span>
                                    @else
                                        <span class="badge bg-light text-dark px-2 py-1 mb-1 d-inline-block">{{ $log->type }}</span>
                                    @endif
                                    <div class="small text-muted" dir="ltr">{{ \Carbon\Carbon::parse($log->created_at)->format('Y-m-d h:i A') }}</div>
                                </td>
                                <td>
                                    <p class="mb-0 text-muted" style="font-size: 13px; max-width: 250px;">
                                        {{ $log->notes ?: 'لا توجد ملاحظات.' }}
                                    </p>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-5">
                                    <div class="mb-3"><i class="fas fa-inbox fa-3x text-light"></i></div>
                                    <h6 class="font-weight-bold">لا توجد سجلات إلغاء!</h6>
                                    <p class="small text-muted mb-0">لم يتم العثور على أي إلغاءات تطابق الفلتر المختار.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($logs->hasPages())
            <div class="card-footer bg-white border-top-0 d-flex justify-content-center pt-4" style="border-radius: 0 0 12px 12px;">
                {{ $logs->appends(request()->query())->links() }}
            </div>
        @endif
    </div>
</div>
@endsection
@push('page_scripts')
@if(isset($kpis))
<script>
document.addEventListener("DOMContentLoaded", function() {
    var ctx = document.getElementById('cancellationChart').getContext('2d');
    var chartData = {
        labels: [
            'تجاهل المضيف',
            'تأخر الزبون بالدفع',
            'إلغاء يدوي',
            'رفض المضيف',
            'إلغاء من الزبون',
            'أخرى'
        ],
        datasets: [{
            data: [
                {{ $kpis['reasons']['host_timeout'] }},
                {{ $kpis['reasons']['customer_timeout'] }},
                {{ $kpis['reasons']['admin_manual'] }},
                {{ $kpis['reasons']['host_rejected'] }},
                {{ $kpis['reasons']['customer_cancel'] }},
                {{ $kpis['reasons']['other'] }}
            ],
            backgroundColor: [
                '#ffc107', // warning (host_timeout)
                '#17a2b8', // info (customer_timeout)
                '#dc3545', // danger (admin_manual)
                '#fd7e14', // orange (host_rejected)
                '#6f42c1', // purple (customer_cancel)
                '#6c757d'  // secondary (other)
            ],
            borderWidth: 0,
            hoverOffset: 4
        }]
    };
    var myPieChart = new Chart(ctx, {
        type: 'doughnut',
        data: chartData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '70%',
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        font: {
                            family: 'Tajawal, sans-serif'
                        }
                    }
                }
            }
        }
    });
});
</script>
@endif
@endpush