@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>تقرير المدفوعات حسب الفترة</h1>
        <div>
            <a href="{{ route('payments.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> العودة إلى المدفوعات
            </a>
            <button onclick="window.print()" class="btn btn-primary ms-2">
                <i class="fas fa-print"></i> طباعة التقرير
            </button>
        </div>
    </div>
    
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title">تقرير المدفوعات من {{ $startDate }} إلى {{ $endDate }}</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('payments.date-range-report') }}" method="GET" class="row g-3">
                <div class="col-md-4">
                    <label for="start_date" class="form-label">تاريخ البداية</label>
                    <input type="date" class="form-control" id="start_date" name="start_date" value="{{ $startDate }}" required>
                </div>
                <div class="col-md-4">
                    <label for="end_date" class="form-label">تاريخ النهاية</label>
                    <input type="date" class="form-control" id="end_date" name="end_date" value="{{ $endDate }}" required>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary">تحديث التقرير</button>
                </div>
            </form>
        </div>
    </div>
    
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">إجمالي المدفوعات</h5>
                    <h2>{{ number_format($totalAmount, 2) }}</h2>
                    <p>عدد المعاملات: {{ $payments->count() }}</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">المدفوعات حسب الطريقة</h5>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>طريقة الدفع</th>
                                    <th>عدد المعاملات</th>
                                    <th>المبلغ الإجمالي</th>
                                    <th>النسبة المئوية</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($paymentMethods as $method => $data)
                                    <tr>
                                        <td>
                                            @switch($method)
                                                @case('cash')
                                                    <i class="fas fa-money-bill-wave"></i> نقداً
                                                    @break
                                                @case('credit_card')
                                                    <i class="fas fa-credit-card"></i> بطاقة ائتمان
                                                    @break
                                                @case('debit_card')
                                                    <i class="fas fa-credit-card"></i> بطاقة خصم
                                                    @break
                                                @case('mobile_payment')
                                                    <i class="fas fa-mobile-alt"></i> دفع إلكتروني
                                                    @break
                                            @endswitch
                                        </td>
                                        <td>{{ $data['count'] }}</td>
                                        <td>{{ number_format($data['amount'], 2) }}</td>
                                        <td>{{ number_format(($data['amount'] / $totalAmount) * 100, 1) }}%</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title">المدفوعات اليومية</h5>
        </div>
        <div class="card-body">
            <canvas id="dailyPaymentsChart" height="100"></canvas>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">تفاصيل المدفوعات</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>رقم الطلب</th>
                            <th>المبلغ</th>
                            <th>طريقة الدفع</th>
                            <th>التاريخ والوقت</th>
                            <th>المستخدم</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($payments as $payment)
                            <tr>
                                <td>{{ $payment->id }}</td>
                                <td>
                                    @if($payment->order)
                                        <a href="{{ route('orders.show', $payment->order) }}">
                                            #{{ $payment->order_id }}
                                        </a>
                                    @else
                                        #{{ $payment->order_id }}
                                    @endif
                                </td>
                                <td>{{ number_format($payment->amount, 2) }}</td>
                                <td>
                                    @switch($payment->payment_method)
                                        @case('cash')
                                            <i class="fas fa-money-bill-wave"></i> نقداً
                                            @break
                                        @case('credit_card')
                                            <i class="fas fa-credit-card"></i> بطاقة ائتمان
                                            @break
                                        @case('debit_card')
                                            <i class="fas fa-credit-card"></i> بطاقة خصم
                                            @break
                                        @case('mobile_payment')
                                            <i class="fas fa-mobile-alt"></i> دفع إلكتروني
                                            @break
                                    @endswitch
                                </td>
                                <td>{{ $payment->created_at->format('Y-m-d H:i') }}</td>
                                <td>{{ $payment->user->name }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    @media print {
        .btn, .navbar, .sidebar, form {
            display: none !important;
        }
        
        .container-fluid {
            width: 100% !important;
            padding: 0 !important;
        }
        
        .card {
            border: none !important;
        }
        
        .card-header {
            background-color: #f8f9fa !important;
            color: #000 !important;
        }
        
        body {
            padding: 0 !important;
            margin: 0 !important;
        }
    }
</style>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(document).ready(function() {
        // Daily payments chart
        const dailyPaymentsCtx = document.getElementById('dailyPaymentsChart').getContext('2d');
        
        const dailyPaymentsData = {
            labels: [
                @foreach($dailyTotals as $date => $amount)
                    '{{ $date }}',
                @endforeach
            ],
            datasets: [{
                label: 'المدفوعات اليومية',
                data: [
                    @foreach($dailyTotals as $amount)
                        {{ $amount }},
                    @endforeach
                ],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };
        
        new Chart(dailyPaymentsCtx, {
            type: 'bar',
            data: dailyPaymentsData,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
</script>
@endpush
@endsection