@extends('layouts.app')
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>মাসিক রিপোর্ট - {{ config('app.name', 'Laravel') }}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        body {
            font-family: 'SolaimanLipi', 'Siyam Rupali', Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            border: none;
        }
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px 10px 0 0 !important;
            padding: 15px 20px;
        }
        .stat-card {
            transition: transform 0.3s;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
            border-top: none;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        .btn-primary:hover {
            opacity: 0.9;
        }
        .filter-box {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .total-box {
            font-size: 1.8rem;
            font-weight: bold;
            color: #2c3e50;
        }
        .currency {
            font-size: 0.9rem;
            color: #7f8c8d;
        }
        .income-color {
            color: #28a745;
        }
        .expense-color {
            color: #dc3545;
        }
        .saving-color {
            color: #17a2b8;
        }
        .loan-color {
            color: #ffc107;
        }
        @media print {
            .no-print {
                display: none !important;
            }
            .card {
                box-shadow: none !important;
                border: 1px solid #dee2e6 !important;
            }
            .table {
                font-size: 12px;
            }
        }
        .select2-container--default .select2-selection--single {
            height: 38px;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }
    </style>
</head>
<body>
    <div class="container-fluid py-4">
        <!-- Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="mb-1"><i class="fas fa-calendar-alt me-2"></i>মাসিক রিপোর্ট</h2>
                        <p class="text-muted mb-0">{{ now()->format('d F Y, h:i A') }}</p>
                    </div>
                    <div class="no-print">
                        <a href="{{ route('reports.summary') }}" class="btn btn-outline-primary">
                            <i class="fas fa-chart-line me-1"></i> সারাংশ
                        </a>
                    </div>
                </div>
                <hr>
            </div>
        </div>

        <!-- Filter Section -->
        <div class="row mb-4 no-print">
            <div class="col-12">
                <div class="filter-box">
                    <form method="GET" action="{{ route('reports.monthly') }}" class="row g-3">
                        <div class="col-md-4">
                            <label for="month" class="form-label">মাস নির্বাচন করুন</label>
                            <input type="month" 
                                   class="form-control" 
                                   id="month" 
                                   name="month" 
                                   value="{{ $month }}"
                                   max="{{ now()->format('Y-m') }}">
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="fas fa-search me-1"></i> রিপোর্ট দেখুন
                            </button>
                            <button type="submit" name="download" value="1" class="btn btn-success">
                                <i class="fas fa-download me-1"></i> PDF ডাউনলোড
                            </button>
                        </div>
                        <div class="col-md-4 text-end">
                            <a href="{{ route('reports.monthly') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-sync-alt me-1"></i> বর্তমান মাস
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Selected Month Info -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="alert alert-info">
                    <h5 class="alert-heading mb-2">
                        <i class="fas fa-calendar-check me-2"></i>
                        নির্বাচিত মাস: 
                        <strong>{{ \Carbon\Carbon::parse($month . '-01')->format('F Y') }}</strong>
                    </h5>
                    <p class="mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        নিচের সারণীতে {{ \Carbon\Carbon::parse($month . '-01')->format('F Y') }} মাসের সকল লেনদেন দেখানো হয়েছে।
                    </p>
                </div>
            </div>
        </div>

        <!-- Summary Statistics -->
        <div class="row mb-4">
            <!-- Total Income -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <div class="card stat-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">মোট আয়</h6>
                                <h3 class="total-box income-color">
                                    {{ number_format($total_income, 2) }} <span class="currency">টাকা</span>
                                </h3>
                                <small class="text-muted">
                                    <i class="fas fa-money-bill-wave me-1"></i>
                                    {{ count($incomes) }}টি লেনদেন
                                </small>
                            </div>
                            <div class="display-4 text-success opacity-50">
                                <i class="fas fa-arrow-down"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Expense -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <div class="card stat-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">মোট ব্যয়</h6>
                                <h3 class="total-box expense-color">
                                    {{ number_format($total_expense, 2) }} <span class="currency">টাকা</span>
                                </h3>
                                <small class="text-muted">
                                    <i class="fas fa-receipt me-1"></i>
                                    {{ count($expenses) }}টি লেনদেন
                                </small>
                            </div>
                            <div class="display-4 text-danger opacity-50">
                                <i class="fas fa-arrow-up"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Savings -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <div class="card stat-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">মোট সঞ্চয়</h6>
                                <h3 class="total-box saving-color">
                                    {{ number_format($total_savings, 2) }} <span class="currency">টাকা</span>
                                </h3>
                                <small class="text-muted">
                                    <i class="fas fa-piggy-bank me-1"></i>
                                    {{ count($savings) }}টি সদস্য
                                </small>
                            </div>
                            <div class="display-4 text-info opacity-50">
                                <i class="fas fa-coins"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Net Balance -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <div class="card stat-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">নিট ব্যালেন্স</h6>
                                @php
                                    $net_balance = $total_income - $total_expense;
                                @endphp
                                <h3 class="total-box {{ $net_balance >= 0 ? 'text-success' : 'text-danger' }}">
                                    {{ number_format($net_balance, 2) }} <span class="currency">টাকা</span>
                                </h3>
                                <small class="text-muted">
                                    <i class="fas fa-balance-scale me-1"></i>
                                    আয় - ব্যয়
                                </small>
                            </div>
                            <div class="display-4 {{ $net_balance >= 0 ? 'text-success' : 'text-danger' }} opacity-50">
                                <i class="fas fa-scale-balanced"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Monthly Savings Table -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-piggy-bank me-2"></i>
                            মাসিক সঞ্চয় ({{ count($savings) }} জন সদস্য)
                        </h5>
                    </div>
                    <div class="card-body">
                        @if(count($savings) > 0)
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>সদস্য নাম</th>
                                            <th>সদস্য আইডি</th>
                                            <th>মাস</th>
                                            <th>সঞ্চয়ের তারিখ</th>
                                            <th class="text-end">পরিমাণ</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($savings as $key => $saving)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>{{ $saving->member->name ?? 'N/A' }}</td>
                                                <td>{{ $saving->member->member_id ?? 'N/A' }}</td>
                                                <td>{{ $saving->month_year }}</td>
                                                <td>{{ \Carbon\Carbon::parse($saving->payment_date)->format('d/m/Y') }}</td>
                                                <td class="text-end">
                                                    <span class="saving-color">{{ number_format($saving->amount, 2) }} টাকা</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr class="table-active">
                                            <td colspan="5" class="text-end"><strong>মোট সঞ্চয়:</strong></td>
                                            <td class="text-end">
                                                <strong class="saving-color">{{ number_format($total_savings, 2) }} টাকা</strong>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-piggy-bank fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">এই মাসে কোনো সঞ্চয় পাওয়া যায়নি</h5>
                                <p class="text-muted">সদস্যগণ এখনও এই মাসের সঞ্চয় জমা দেননি।</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Income and Expense Tables -->
        <div class="row">
            <!-- Income Table -->
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-money-bill-wave me-2"></i>
                            আয়ের তালিকা ({{ count($incomes) }}টি)
                        </h5>
                    </div>
                    <div class="card-body">
                        @if(count($incomes) > 0)
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>বিবরণ</th>
                                            <th>ক্যাটাগরি</th>
                                            <th>তারিখ</th>
                                            <th class="text-end">পরিমাণ</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($incomes as $key => $income)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>{{ $income->description ?? 'N/A' }}</td>
                                                <td>
                                                    <span class="badge bg-success">{{ $income->category ?? 'সাধারণ' }}</span>
                                                </td>
                                                <td>{{ \Carbon\Carbon::parse($income->income_date)->format('d/m/Y') }}</td>
                                                <td class="text-end">
                                                    <span class="income-color">{{ number_format($income->amount, 2) }} টাকা</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr class="table-active">
                                            <td colspan="4" class="text-end"><strong>মোট আয়:</strong></td>
                                            <td class="text-end">
                                                <strong class="income-color">{{ number_format($total_income, 2) }} টাকা</strong>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-money-bill-wave fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">এই মাসে কোনো আয়ের লেনদেন নেই</h5>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Expense Table -->
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-danger text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-receipt me-2"></i>
                            ব্যয়ের তালিকা ({{ count($expenses) }}টি)
                        </h5>
                    </div>
                    <div class="card-body">
                        @if(count($expenses) > 0)
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>বিবরণ</th>
                                            <th>ক্যাটাগরি</th>
                                            <th>তারিখ</th>
                                            <th class="text-end">পরিমাণ</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($expenses as $key => $expense)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>{{ $expense->description ?? 'N/A' }}</td>
                                                <td>
                                                    <span class="badge bg-danger">{{ $expense->category ?? 'সাধারণ' }}</span>
                                                </td>
                                                <td>{{ \Carbon\Carbon::parse($expense->expense_date)->format('d/m/Y') }}</td>
                                                <td class="text-end">
                                                    <span class="expense-color">{{ number_format($expense->amount, 2) }} টাকা</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr class="table-active">
                                            <td colspan="4" class="text-end"><strong>মোট ব্যয়:</strong></td>
                                            <td class="text-end">
                                                <strong class="expense-color">{{ number_format($total_expense, 2) }} টাকা</strong>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-receipt fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">এই মাসে কোনো ব্যয়ের লেনদেন নেই</h5>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Loans Table -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-handshake me-2"></i>
                            মাসিক লোন ({{ count($loans) }}টি)
                        </h5>
                    </div>
                    <div class="card-body">
                        @if(count($loans) > 0)
                            <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($loans as $key => $loan)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>{{ $loan->loan_number ?? 'N/A' }}</td>
                                                <td>{{ $loan->member->name ?? 'N/A' }}</td>
                                                <td class="loan-color">{{ number_format($loan->loan_amount, 2) }} টাকা</td>
                                                <td>
                                                    @php
                                                        $status_colors = [
                                                            'pending' => 'warning',
                                                            'approved' => 'info',
                                                            'disbursed' => 'primary',
                                                            'active' => 'success',
                                                            'completed' => 'secondary',
                                                            'defaulted' => 'danger'
                                                        ];
                                                        $color = $status_colors[$loan->status] ?? 'secondary';
                                                    @endphp
                                                    <span class="badge bg-{{ $color }}">
                                                        {{ $loan->status }}
                                                    </span>
                                                </td>
                                                <td>{{ \Carbon\Carbon::parse($loan->created_at)->format('d/m/Y') }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-handshake fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">এই মাসে কোনো লোন পাওয়া যায়নি</h5>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Summary Footer -->
        <div class="row mt-4 no-print">
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center">
                        <h5 class="mb-3">মাসিক রিপোর্ট সারাংশ</h5>
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <div class="p-3 border rounded">
                                    <small class="text-muted d-block">মোট আয়</small>
                                    <strong class="income-color">{{ number_format($total_income, 2) }} টাকা</strong>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="p-3 border rounded">
                                    <small class="text-muted d-block">মোট ব্যয়</small>
                                    <strong class="expense-color">{{ number_format($total_expense, 2) }} টাকা</strong>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="p-3 border rounded">
                                    <small class="text-muted d-block">মোট সঞ্চয়</small>
                                    <strong class="saving-color">{{ number_format($total_savings, 2) }} টাকা</strong>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="p-3 border rounded">
                                    <small class="text-muted d-block">নিট ব্যালেন্স</small>
                                    <strong class="{{ $net_balance >= 0 ? 'text-success' : 'text-danger' }}">
                                        {{ number_format($net_balance, 2) }} টাকা
                                    </strong>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <a href="{{ route('reports.summary') }}" class="btn btn-outline-primary me-2">
                                <i class="fas fa-chart-line me-1"></i> সারাংশ রিপোর্ট
                            </a>
                            <a href="{{ route('reports.annual') }}" class="btn btn-outline-secondary me-2">
                                <i class="fas fa-calendar me-1"></i> বার্ষিক রিপোর্ট
                            </a>
                            <button onclick="window.print()" class="btn btn-primary">
                                <i class="fas fa-print me-1"></i> প্রিন্ট রিপোর্ট
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Report Info -->
        <div class="row mt-4">
            <div class="col-12 text-center">
                <hr>
                <p class="text-muted small">
                    <i class="fas fa-clock me-1"></i>
                    রিপোর্ট তৈরি হয়েছে: {{ now()->format('d F Y, h:i A') }}
                    | 
                    <i class="fas fa-user me-1"></i>
                    ব্যবহারকারী: {{ Auth::user()->name ?? 'অজানা' }}
                    |
                    <i class="fas fa-calendar-alt me-1"></i>
                    মাস: {{ \Carbon\Carbon::parse($month . '-01')->format('F Y') }}
                </p>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Font Awesome -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"></script>
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // Select2 initialization
            $('.select2').select2({
                placeholder: "সদস্য নির্বাচন করুন",
                allowClear: true
            });

            // Set max date for month input to current month
            const monthInput = document.getElementById('month');
            const today = new Date();
            const currentMonth = today.toISOString().slice(0, 7);
            monthInput.max = currentMonth;

            // Auto submit form on month change if you want
            // monthInput.addEventListener('change', function() {
            //     this.form.submit();
            // });

            // Print function
            function printReport() {
                window.print();
            }

            // Format numbers with comma
            function formatNumber(num) {
                return new Intl.NumberFormat('bn-BD').format(num);
            }

            // Update all numbers on page
            document.querySelectorAll('.number-format').forEach(function(element) {
                const num = parseFloat(element.textContent);
                if (!isNaN(num)) {
                    element.textContent = formatNumber(num);
                }
            });
        });
    </script>
</body>
</html>