@extends('layouts.app')

@section('title', 'ব্যয় রিপোর্ট - আমবাগান যুব কল্যাণ সমিতি')

@section('styles')
<style>
    .report-card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    .chart-container {
        position: relative;
        height: 300px;
        width: 100%;
    }
    
    .category-badge {
        padding: 5px 15px;
        border-radius: 20px;
        margin-right: 5px;
        margin-bottom: 5px;
        display: inline-block;
    }
    
    .filter-form {
        background-color: #f8f9fa;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 20px;
    }
</style>
@endsection

@section('breadcrumbs')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb bg-light">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">ড্যাশবোর্ড</a></li>
        <li class="breadcrumb-item"><a href="{{ route('expenses.index') }}">ব্যয় ব্যবস্থাপনা</a></li>
        <li class="breadcrumb-item active">ব্যয় রিপোর্ট</li>
    </ol>
</nav>
@endsection

@section('content')
<div class="container-fluid">
    <!-- ফিল্টার ফর্ম -->
    <div class="filter-form">
        <h5 class="mb-3"><i class="fas fa-filter me-2"></i>রিপোর্ট ফিল্টার</h5>
        <form method="GET" action="{{ route('expenses.report') }}">
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label for="from_date" class="form-label">থেকে তারিখ</label>
                    <input type="date" name="from_date" id="from_date" class="form-control" 
                        value="{{ request('from_date') }}">
                </div>
                
                <div class="col-md-3 mb-3">
                    <label for="to_date" class="form-label">পর্যন্ত তারিখ</label>
                    <input type="date" name="to_date" id="to_date" class="form-control" 
                        value="{{ request('to_date') }}">
                </div>
                
                <div class="col-md-3 mb-3">
                    <label for="category_id" class="form-label">ক্যাটাগরি</label>
                    <select name="category_id" id="category_id" class="form-control">
                        <option value="">সকল ক্যাটাগরি</option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                            {{ $category->name_in_bangla }}
                        </option>
                        @endforeach
                    </select>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label for="payment_method" class="form-label">পেমেন্ট পদ্ধতি</label>
                    <select name="payment_method" id="payment_method" class="form-control">
                        <option value="">সকল পদ্ধতি</option>
                        <option value="cash" {{ request('payment_method') == 'cash' ? 'selected' : '' }}>নগদ</option>
                        <option value="bank" {{ request('payment_method') == 'bank' ? 'selected' : '' }}>ব্যাংক</option>
                        <option value="check" {{ request('payment_method') == 'check' ? 'selected' : '' }}>চেক</option>
                        <option value="mobile_banking" {{ request('payment_method') == 'mobile_banking' ? 'selected' : '' }}>মোবাইল ব্যাংকিং</option>
                    </select>
                </div>
                
                <div class="col-md-12">
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" class="btn btn-primary me-md-2">
                            <i class="fas fa-search me-2"></i>খুঁজুন
                        </button>
                        <a href="{{ route('expenses.report') }}" class="btn btn-secondary">
                            <i class="fas fa-redo me-2"></i>রিসেট
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    <!-- পরিসংখ্যান কার্ড -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card report-card">
                <div class="card-body text-center">
                    <h5 class="card-title">{{ number_format($totalAmount, 2) }} টাকা</h5>
                    <p class="card-text">মোট ব্যয়</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card report-card">
                <div class="card-body text-center">
                    <h5 class="card-title">{{ $expenses->count() }}</h5>
                    <p class="card-text">মোট রেকর্ড</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card report-card">
                <div class="card-body text-center">
                    @php
                        $avgAmount = $expenses->count() > 0 ? $totalAmount / $expenses->count() : 0;
                    @endphp
                    <h5 class="card-title">{{ number_format($avgAmount, 2) }} টাকা</h5>
                    <p class="card-text">গড় ব্যয়</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card report-card">
                <div class="card-body text-center">
                    @php
                        $maxAmount = $expenses->max('amount') ?? 0;
                    @endphp
                    <h5 class="card-title">{{ number_format($maxAmount, 2) }} টাকা</h5>
                    <p class="card-text">সর্বোচ্চ ব্যয়</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- ক্যাটাগরি অনুযায়ী ব্যয় -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-chart-pie me-2"></i>ক্যাটাগরি অনুযায়ী ব্যয়
                    </h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="categoryChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-list me-2"></i>ক্যাটাগরি তালিকা
                    </h5>
                </div>
                <div class="card-body">
                    @php
                        $categorySummary = $expenses->groupBy('category_id')->map(function($items) {
                            return $items->sum('amount');
                        });
                    @endphp
                    
                    @foreach($categorySummary as $categoryId => $amount)
                        @php
                            $category = $categories->firstWhere('id', $categoryId);
                            $percentage = $totalAmount > 0 ? ($amount / $totalAmount) * 100 : 0;
                        @endphp
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span>
                                    @if($category)
                                        {{ $category->name_in_bangla }}
                                    @else
                                        অজানা ক্যাটাগরি
                                    @endif
                                </span>
                                <span>{{ number_format($amount, 2) }} টাকা</span>
                            </div>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar" role="progressbar" 
                                    style="width: {{ $percentage }}%;" 
                                    aria-valuenow="{{ $percentage }}" 
                                    aria-valuemin="0" 
                                    aria-valuemax="100"></div>
                            </div>
                            <small class="text-muted">{{ number_format($percentage, 1) }}%</small>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    
    <!-- বিস্তারিত রিপোর্ট -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-table me-2"></i>বিস্তারিত রিপোর্ট
            </h5>
        </div>
        <div class="card-body">
            @if($expenses->isEmpty())
            <div class="text-center py-5">
                <i class="fas fa-chart-bar fa-4x text-muted mb-3"></i>
                <h4>কোনো ব্যয় রেকর্ড পাওয়া যায়নি</h4>
                <p class="text-muted">নির্বাচিত সময়ে কোনো ব্যয় রেকর্ড নেই।</p>
            </div>
            @else
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>তারিখ</th>
                            <th>শিরোনাম</th>
                            <th>ক্যাটাগরি</th>
                            <th>পরিমাণ</th>
                            <th>পেমেন্ট পদ্ধতি</th>
                            <th>স্ট্যাটাস</th>
                            <th>রেফারেন্স</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($expenses as $expense)
                        <tr>
                            <td>{{ date('d/m/Y', strtotime($expense->date)) }}</td>
                            <td>{{ $expense->title }}</td>
                            <td>
                                @if($expense->category)
                                {{ $expense->category->name_in_bangla }}
                                @else
                                <span class="text-muted">N/A</span>
                                @endif
                            </td>
                            <td class="text-end">{{ number_format($expense->amount, 2) }} টাকা</td>
                            <td>{{ $expense->payment_method_in_bangla }}</td>
                            <td>
                                <span class="badge bg-{{ $expense->status }}">
                                    {{ $expense->status_in_bangla }}
                                </span>
                            </td>
                            <td>{{ $expense->reference_no ?: 'N/A' }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr class="table-primary">
                            <td colspan="3" class="text-end"><strong>মোট</strong></td>
                            <td class="text-end"><strong>{{ number_format($totalAmount, 2) }} টাকা</strong></td>
                            <td colspan="3"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            
            <!-- প্রিন্ট বাটন -->
            <div class="text-center mt-4">
                <button onclick="printReport()" class="btn btn-success">
                    <i class="fas fa-print me-2"></i>রিপোর্ট প্রিন্ট করুন
                </button>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // ক্যাটাগরি চার্ট
    @if($totalAmount > 0)
    const categoryChart = new Chart(document.getElementById('categoryChart'), {
        type: 'pie',
        data: {
            labels: [
                @foreach($categorySummary as $categoryId => $amount)
                    @php
                        $category = $categories->firstWhere('id', $categoryId);
                    @endphp
                    '{{ $category ? $category->name_in_bangla : "অজানা" }}',
                @endforeach
            ],
            datasets: [{
                data: [{{ implode(',', $categorySummary->values()->toArray()) }}],
                backgroundColor: [
                    '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', 
                    '#9966FF', '#FF9F40', '#8AC926', '#1982C4',
                    '#6A4C93', '#F25F5C'
                ]
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right',
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.raw || 0;
                            const percentage = ((value / {{ $totalAmount }}) * 100).toFixed(1);
                            return `${label}: ${value.toFixed(2)} টাকা (${percentage}%)`;
                        }
                    }
                }
            }
        }
    });
    @endif
    
    // তারিখ ফিল্ড সেট
    if (!$('#from_date').val()) {
        const thirtyDaysAgo = new Date();
        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
        $('#from_date').val(thirtyDaysAgo.toISOString().split('T')[0]);
    }
    
    if (!$('#to_date').val()) {
        $('#to_date').val(new Date().toISOString().split('T')[0]);
    }
});

// রিপোর্ট প্রিন্ট ফাংশন
function printReport() {
    const printContent = document.querySelector('.card-body').outerHTML;
    const originalContent = document.body.innerHTML;
    
    document.body.innerHTML = `
        <html>
        <head>
            <title>ব্যয় রিপোর্ট - আমবাগান যুব কল্যাণ সমিতি</title>
            <style>
                body { font-family: 'SolaimanLipi', sans-serif; padding: 20px; }
                table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
                th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
                th { background-color: #f8f9fa; }
                .header { text-align: center; margin-bottom: 30px; }
                .footer { margin-top: 30px; text-align: center; font-size: 0.9em; }
                .total-row { background-color: #e9ecef; font-weight: bold; }
                @media print {
                    body { padding: 0; }
                }
            </style>
        </head>
        <body>
            <div class="header">
                <h2>আমবাগান যুব কল্যাণ সমিতি</h2>
                <h3>ব্যয় রিপোর্ট</h3>
                <p>প্রস্তুতকৃত: {{ date('d/m/Y H:i:s') }}</p>
                <p>সময়সীমা: {{ request('from_date') ? date('d/m/Y', strtotime(request('from_date'))) : 'শুরু' }} 
                   থেকে {{ request('to_date') ? date('d/m/Y', strtotime(request('to_date'))) : 'শেষ' }}</p>
            </div>
            ${printContent}
            <div class="footer">
                <p>স্বাক্ষর: ___________________</p>
                <p>তারিখ: {{ date('d/m/Y') }}</p>
            </div>
        </body>
        </html>
    `;
    
    window.print();
    document.body.innerHTML = originalContent;
    location.reload();
}
</script>
@endsection