@extends('layouts.app')

@section('title', 'ملخص تقارير الخزينة')

@section('styles')
<style>
    .card {
        border-radius: 8p;
        bo-shadow: 0 4p 6p rgba(0, 0, 0, 0.1);
        border: none;
        margin-bottom: 20p;
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1p solid #eaeaea;
        padding: 15p 20p;
        border-radius: 8p 8p 0 0;
    }
    
    .card-title {
        margin-bottom: 0;
        font-weight: 600;
        color: #3c4b64;
    }
    
    .card-body {
        padding: 20p;
    }
    
    .form-control {
        border-radius: 4p;
        border: 1p solid #ced4da;
        padding: 10p 15p;
        height: auto;
        transition: border-color 0.15s ease-in-out, bo-shadow 0.15s ease-in-out;
    }
    
    .form-control:focus {
        border-color: #80bdff;
        bo-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    label {
        font-weight: 600;
        margin-bottom: 8p;
        color: #495057;
    }
    
    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        border-radius: 4p;
        padding: 10p 20p;
        font-weight: 500;
        transition: background-color 0.15s ease-in-out;
    }
    
    .btn-primary:hover {
        background-color: #0069d9;
        border-color: #0062cc;
    }
    
    .btn-info {
        background-color: #17a2b8;
        border-color: #17a2b8;
        border-radius: 4p;
        padding: 8p 15p;
        font-weight: 500;
        transition: background-color 0.15s ease-in-out;
    }
    
    .btn-info:hover {
        background-color: #138496;
        border-color: #117a8b;
    }
    
    .table {
        width: 100%;
        margin-bottom: 1rem;
        color: #212529;
        border-collapse: collapse;
    }
    
    .table th {
        background-color: #f8f9fa;
        color: #495057;
        font-weight: 600;
        text-align: right;
        padding: 12p 15p;
        vertical-align: middle;
        border: 1p solid #dee2e6;
    }
    
    .table td {
        padding: 12p 15p;
        vertical-align: middle;
        border: 1p solid #dee2e6;
    }
    
    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.075);
    }
    
    .text-success {
        color: #28a745 !important;
    }
    
    .text-danger {
        color: #dc3545 !important;
    }
    
    .text-info {
        color: #17a2b8 !important;
    }
    
    .text-warning {
        color: #ffc107 !important;
    }
    
    .bg-light {
        background-color: #f8f9fa !important;
    }
    
    .chart-container {
        background-color: #fff;
        border-radius: 8p;
        padding: 15p;
        bo-shadow: 0 2p 4p rgba(0, 0, 0, 0.05);
    }
    
    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8p;
        padding: 20p;
        margin-bottom: 20p;
    }
    
    .summary-card {
        border-radius: 8p;
        padding: 15p;
        margin-bottom: 20p;
        background-color: #fff;
        bo-shadow: 0 2p 4p rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;
    }
    
    .summary-card:hover {
        transform: translateY(-5p);
    }
    
    .summary-card .card-title {
        font-size: 16p;
        font-weight: 600;
        margin-bottom: 10p;
        color: #495057;
    }
    
    .summary-card .card-value {
        font-size: 24p;
        font-weight: 700;
        margin-bottom: 0;
    }
    
    .summary-card .card-icon {
        font-size: 30p;
        margin-bottom: 15p;
        color: #6c757d;
    }
    
    .summary-card.deposits {
        border-top: 4p solid #28a745;
    }
    
    .summary-card.payments {
        border-top: 4p solid #dc3545;
    }
    
    .summary-card.transfers-in {
        border-top: 4p solid #17a2b8;
    }
    
    .summary-card.transfers-out {
        border-top: 4p solid #ffc107;
    }
    
    .summary-card.balance {
        border-top: 4p solid #6f42c1;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- عنوان الصفحة والروابط -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-black">ملخص تقارير الخزينة</h1>
        <div>
            <a href="{{ route('treasury.reports.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-list"></i> قائمة التقارير
            </a>
            <a href="javascript:void(0)" onclick="window.print()" class="btn btn-info">
                <i class="fas fa-print"></i> طباعة
            </a>
            <a href="{{ route('treasury.reports.index', ['report' => 'excel']) }}" class="btn btn-success">
                <i class="fas fa-file-excel"></i> تصدير إلى Excel
            </a>
        </div>
    </div>

    <!-- قسم الفلترة -->
    <div class="filter-section">
        <form action="{{ route('treasury.reports.index') }}" method="GET">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="start_date">* من تاريخ</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-tet"><i class="fas fa-calendar"></i></span>
                            </div>
                            <input type="date" name="start_date" id="start_date" class="form-control" value="{{ $startDate }}" required>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="end_date">* إلى تاريخ</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-tet"><i class="fas fa-calendar"></i></span>
                            </div>
                            <input type="date" name="end_date" id="end_date" class="form-control" value="{{ $endDate }}" required>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="form-group" style="margin-top: 32p;">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> عرض التقرير
                        </button>
                        <a href="{{ route('treasury.reports.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-redo"></i> إعادة تعيين
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    <!-- ملخص الإحصائيات -->
    <div class="row mb-4">
        <div class="col-md-2">
            <div class="summary-card balance text-center">
                <div class="card-icon">
                    <i class="fas fa-wallet"></i>
                </div>
                <div class="card-title">الرصيد الافتتاحي</div>
                <div class="card-value">{{ number_format($treasurySummary->sum('opening_balance_at_start'), 2) }}</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="summary-card deposits text-center">
                <div class="card-icon text-success">
                    <i class="fas fa-arrow-circle-down"></i>
                </div>
                <div class="card-title">إجمالي الإيداعات</div>
                <div class="card-value text-success">{{ number_format($treasurySummary->sum('total_deposits') + $treasurySummary->sum('total_transfers_in'), 2) }}</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="summary-card payments text-center">
                <div class="card-icon text-danger">
                    <i class="fas fa-arrow-circle-up"></i>
                </div>
                <div class="card-title">إجمالي المدفوعات</div>
                <div class="card-value text-danger">{{ number_format($treasurySummary->sum('total_payments') + $treasurySummary->sum('total_transfers_out'), 2) }}</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="summary-card transfers-in text-center">
                <div class="card-icon text-info">
                    <i class="fas fa-echange-alt"></i>
                </div>
                <div class="card-title">التحويلات الواردة</div>
                <div class="card-value text-info">{{ number_format($treasurySummary->sum('total_transfers_in'), 2) }}</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="summary-card transfers-out text-center">
                <div class="card-icon text-warning">
                    <i class="fas fa-echange-alt fa-flip-horizontal"></i>
                </div>
                <div class="card-title">التحويلات الصادرة</div>
                <div class="card-value text-warning">{{ number_format($treasurySummary->sum('total_transfers_out'), 2) }}</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="summary-card balance text-center">
                <div class="card-icon text-primary">
                    <i class="fas fa-balance-scale"></i>
                </div>
                <div class="card-title">الرصيد الحالي (من دفتر الأستاذ)</div>
                <div class="card-value text-primary">{{ number_format($treasurySummary->sum('actual_balance'), 2) }}</div>
            </div>
        </div>
    </div>
    
    <!-- جدول ملخص الخزائن -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title">
                <i class="fas fa-table"></i> ملخص حركات الخزائن خلال الفترة من {{ $startDate }} إلى {{ $endDate }}
            </h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th width="5%">#</th>
                            <th width="15%">الخزينة</th>
                            <th width="10%">الرصيد الافتتاحي</th>
                            <th width="10%">إجمالي الإيداعات</th>
                            <th width="10%">إجمالي المدفوعات</th>
                            <th width="10%">التحويلات الواردة</th>
                            <th width="10%">التحويلات الصادرة</th>
                            <th width="10%">صافي الحركة</th>
                            <th width="10%">الرصيد الحالي</th>
                            <th width="10%">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($treasurySummary as $treasury)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                <strong>{{ $treasury->name }}</strong>
                                @if(isset($treasury->code))
                                <br><small class="text-muted">{{ $treasury->code }}</small>
                                @endif
                            </td>
                            <td class="text-right">{{ number_format($treasury->opening_balance_at_start, 2) }}</td>
                            <td class="text-right text-success">
                                <strong>{{ number_format($treasury->total_deposits, 2) }}</strong>
                            </td>
                            <td class="text-right text-danger">
                                <strong>{{ number_format($treasury->total_payments, 2) }}</strong>
                            </td>
                            <td class="text-right text-info">
                                <strong>{{ number_format($treasury->total_transfers_in, 2) }}</strong>
                            </td>
                            <td class="text-right text-warning">
                                <strong>{{ number_format($treasury->total_transfers_out, 2) }}</strong>
                            </td>
                            <td class="text-right {{ $treasury->net_movement >= 0 ? 'text-success' : 'text-danger' }}">
                                <strong>{{ number_format($treasury->net_movement, 2) }}</strong>
                            </td>
                            <td class="text-right">
                                <strong>{{ number_format($treasury->actual_balance ?? 0, 2) }}</strong>
                                @if($treasury->actual_balance !== null)
                                <br><small class="text-success">(من دفتر الأستاذ)</small>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('treasury.reports.index', ['treasury_id' => $treasury->id, 'start_date' => $startDate, 'end_date' => $endDate]) }}" class="btn btn-info btn-sm">
                                    <i class="fas fa-search"></i> عرض التفاصيل
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr class="bg-light">
                            <th colspan="2" class="text-right">الإجمالي</th>
                            <th class="text-right">{{ number_format($treasurySummary->sum('opening_balance_at_start'), 2) }}</th>
                            <th class="text-right text-success">{{ number_format($treasurySummary->sum('total_deposits'), 2) }}</th>
                            <th class="text-right text-danger">{{ number_format($treasurySummary->sum('total_payments'), 2) }}</th>
                            <th class="text-right text-info">{{ number_format($treasurySummary->sum('total_transfers_in'), 2) }}</th>
                            <th class="text-right text-warning">{{ number_format($treasurySummary->sum('total_transfers_out'), 2) }}</th>
                            <th class="text-right">{{ number_format($treasurySummary->sum('net_movement'), 2) }}</th>
                            <th class="text-right">{{ number_format($treasurySummary->sum('actual_balance'), 2) }}</th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    
    <!-- الرسم البياني -->
    <div class="card mt-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title">
                <i class="fas fa-chart-bar"></i> الرسم البياني للخزائن
            </h5>
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-primary active" id="chartTypeBar">
                    <i class="fas fa-chart-bar"></i> أعمدة
                </button>
                <button type="button" class="btn btn-sm btn-outline-primary" id="chartTypeLine">
                    <i class="fas fa-chart-line"></i> خط
                </button>
                <button type="button" class="btn btn-sm btn-outline-primary" id="chartTypePie">
                    <i class="fas fa-chart-pie"></i> دائري
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="chart-container" style="position: relative; height:400p;">
                <canvas id="treasuryChart"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var ct = document.getElementById('treasuryChart').getContet('2d');
        var myChart;
        
        var treasuryNames = [
            @foreach($treasurySummary as $treasury)
                "{{ $treasury->name }}",
            @endforeach
        ];
        
        var initialBalances = [
            @foreach($treasurySummary as $treasury)
                {{ $treasury->initial_balance }},
            @endforeach
        ];
        
        var currentBalances = [
            @foreach($treasurySummary as $treasury)
                {{ $treasury->current_balance }},
            @endforeach
        ];
        
        var deposits = [
            @foreach($treasurySummary as $treasury)
                {{ $treasury->total_deposits }},
            @endforeach
        ];
        
        var payments = [
            @foreach($treasurySummary as $treasury)
                {{ $treasury->total_payments }},
            @endforeach
        ];
        
        var transfersIn = [
            @foreach($treasurySummary as $treasury)
                {{ $treasury->total_transfers_in }},
            @endforeach
        ];
        
        var transfersOut = [
            @foreach($treasurySummary as $treasury)
                {{ $treasury->total_transfers_out }},
            @endforeach
        ];
        
        function createBarChart() {
            if (myChart) {
                myChart.destroy();
            }
            
            myChart = new Chart(ct, {
                type: 'bar',
                data: {
                    labels: treasuryNames,
                    datasets: [
                        {
                            label: 'الرصيد الافتتاحي',
                            data: initialBalances,
                            backgroundColor: 'rgba(75, 192, 192, 0.6)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1
                        },
                        {
                            label: 'الإيداعات',
                            data: deposits,
                            backgroundColor: 'rgba(40, 167, 69, 0.6)',
                            borderColor: 'rgba(40, 167, 69, 1)',
                            borderWidth: 1
                        },
                        {
                            label: 'المدفوعات',
                            data: payments,
                            backgroundColor: 'rgba(220, 53, 69, 0.6)',
                            borderColor: 'rgba(220, 53, 69, 1)',
                            borderWidth: 1
                        },
                        {
                            label: 'التحويلات الواردة',
                            data: transfersIn,
                            backgroundColor: 'rgba(23, 162, 184, 0.6)',
                            borderColor: 'rgba(23, 162, 184, 1)',
                            borderWidth: 1
                        },
                        {
                            label: 'التحويلات الصادرة',
                            data: transfersOut,
                            backgroundColor: 'rgba(255, 193, 7, 0.6)',
                            borderColor: 'rgba(255, 193, 7, 1)',
                            borderWidth: 1
                        },
                        {
                            label: 'الرصيد الحالي',
                            data: currentBalances,
                            backgroundColor: 'rgba(111, 66, 193, 0.6)',
                            borderColor: 'rgba(111, 66, 193, 1)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            tet: 'مقارنة حركات الخزائن'
                        }
                    }
                }
            });
        }
        
        function createLineChart() {
            if (myChart) {
                myChart.destroy();
            }
            
            myChart = new Chart(ct, {
                type: 'line',
                data: {
                    labels: treasuryNames,
                    datasets: [
                        {
                            label: 'الرصيد الافتتاحي',
                            data: initialBalances,
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 2,
                            tension: 0.3,
                            fill: false
                        },
                        {
                            label: 'الإيداعات',
                            data: deposits,
                            backgroundColor: 'rgba(40, 167, 69, 0.2)',
                            borderColor: 'rgba(40, 167, 69, 1)',
                            borderWidth: 2,
                            tension: 0.3,
                            fill: false
                        },
                        {
                            label: 'المدفوعات',
                            data: payments,
                            backgroundColor: 'rgba(220, 53, 69, 0.2)',
                            borderColor: 'rgba(220, 53, 69, 1)',
                            borderWidth: 2,
                            tension: 0.3,
                            fill: false
                        },
                        {
                            label: 'الرصيد الحالي',
                            data: currentBalances,
                            backgroundColor: 'rgba(111, 66, 193, 0.2)',
                            borderColor: 'rgba(111, 66, 193, 1)',
                            borderWidth: 2,
                            tension: 0.3,
                            fill: false
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            tet: 'مقارنة أرصدة الخزائن'
                        }
                    }
                }
            });
        }
        
        function createPieChart() {
            if (myChart) {
                myChart.destroy();
            }
            
            // استخدام الرصيد الحالي للخزائن في الرسم الدائري
            myChart = new Chart(ct, {
                type: 'pie',
                data: {
                    labels: treasuryNames,
                    datasets: [
                        {
                            data: currentBalances,
                            backgroundColor: [
                                'rgba(75, 192, 192, 0.6)',
                                'rgba(40, 167, 69, 0.6)',
                                'rgba(220, 53, 69, 0.6)',
                                'rgba(23, 162, 184, 0.6)',
                                'rgba(255, 193, 7, 0.6)',
                                'rgba(111, 66, 193, 0.6)',
                                'rgba(54, 162, 235, 0.6)',
                                'rgba(255, 99, 132, 0.6)',
                                'rgba(153, 102, 255, 0.6)',
                                'rgba(255, 159, 64, 0.6)'
                            ],
                            borderColor: [
                                'rgba(75, 192, 192, 1)',
                                'rgba(40, 167, 69, 1)',
                                'rgba(220, 53, 69, 1)',
                                'rgba(23, 162, 184, 1)',
                                'rgba(255, 193, 7, 1)',
                                'rgba(111, 66, 193, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 99, 132, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        title: {
                            display: true,
                            tet: 'توزيع أرصدة الخزائن'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(contet) {
                                    var label = contet.label || '';
                                    var value = contet.raw || 0;
                                    var total = contet.dataset.data.reduce((a, b) => a + b, 0);
                                    var percentage = Math.round((value / total) * 100);
                                    return label + ': ' + number_format(value, 2) + ' (' + percentage + '%)';
                                }
                            }
                        }
                    }
                }
            });
        }
        
        // تنسيق الأرقام
        function number_format(number, decimals) {
            return new Intl.NumberFormat('ar-SA', {
                minimumFractionDigits: decimals,
                maximumFractionDigits: decimals
            }).format(number);
        }
        
        // إنشاء الرسم البياني الافتراضي (أعمدة)
        createBarChart();
        
        // تبديل نوع الرسم البياني
        document.getElementById('chartTypeBar').addEventListener('click', function() {
            document.getElementById('chartTypeBar').classList.add('active');
            document.getElementById('chartTypeLine').classList.remove('active');
            document.getElementById('chartTypePie').classList.remove('active');
            createBarChart();
        });
        
        document.getElementById('chartTypeLine').addEventListener('click', function() {
            document.getElementById('chartTypeBar').classList.remove('active');
            document.getElementById('chartTypeLine').classList.add('active');
            document.getElementById('chartTypePie').classList.remove('active');
            createLineChart();
        });
        
        document.getElementById('chartTypePie').addEventListener('click', function() {
            document.getElementById('chartTypeBar').classList.remove('active');
            document.getElementById('chartTypeLine').classList.remove('active');
            document.getElementById('chartTypePie').classList.add('active');
            createPieChart();
        });
    });
</script>
@endsection