@extends('layouts.app')

@section("title", "لوحة التحكم")

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>لوحة التحكم بنظام الكروت</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">الرئيسية</a></li>
                    <li class="breadcrumb-item active">كروت توريستا</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3>{{ $totalVouchers }}</h3>
                        <p>إجمالي الكروت</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-ticket-alt"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3>{{ $soldVouchers }}</h3>
                        <p>الكروت المباعة</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-primary">
                    <div class="inner">
                        <h3>{{ $redeemedVouchers }}</h3>
                        <p>الكروت المستخدمة</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3>{{ number_format($pendingCommissions, 2) }}</h3>
                        <p>عمولات معلقة (د.ل)</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-percentage"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h3 class="card-title">أحدث الكروت</h3>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-sm table-hover mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th>الكود</th>
                                        <th>الباقة</th>
                                        <th>الشركة</th>
                                        <th>الحالة</th>
                                        <th>تاريخ الإصدار</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($latestVouchers as $voucher)
                                    <tr>
                                        <td>{{ $voucher->code }}</td>
                                        <td>{{ $voucher->company->name ?? 'غير محدد' }}</td>
                                        <td>
                                            @if($voucher->status == 'issued')
                                                <span class="badge bg-secondary">مصدر</span>
                                            @elseif($voucher->status == 'sold')
                                                <span class="badge bg-primary">مباع</span>
                                            @elseif($voucher->status == 'redeemed')
                                                <span class="badge bg-success">مستخدم</span>
                                            @elseif($voucher->status == 'expired')
                                                <span class="badge bg-danger">منتهي الصلاحية</span>
                                            @endif
                                        </td>
                                        <td>{{ optional($voucher->issued_at)->format('Y-m-d') }}</td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="5" class="text-center">لا توجد كروت حديثة.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-4">
                <div class="card card-outline card-info">
                    <div class="card-header">
                        <h3 class="card-title">أداء الباقات</h3>
                    </div>
                    <div class="card-body">
                        <canvas id="packagePerformanceChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 mb-4">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title">أداء الشركات الموزعة</h3>
                    </div>
                    <div class="card-body">
                        <canvas id="distributorPerformanceChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Package Performance Chart
        const packageCtx = document.getElementById('packagePerformanceChart').getContext('2d');
        new Chart(packageCtx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($packages->pluck('name')) !!},
                datasets: [{
                    label: 'الكروت المباعة',
                    data: {!! json_encode($packages->pluck('sold_count')) !!},
                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Distributor Performance Chart
        const distributorCtx = document.getElementById('distributorPerformanceChart').getContext('2d');
        new Chart(distributorCtx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($distributors->pluck('name')) !!},
                datasets: [{
                    label: 'الكروت المباعة',
                    data: {!! json_encode($distributors->pluck('sold_count')) !!},
                    backgroundColor: 'rgba(153, 102, 255, 0.6)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
</script>
@endpush

@endsection