@extends('layouts.app')

@section('title', 'Reports Dashboard')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-header text-white" style="background-color: #2F4256; border-radius: 15px 15px 0 0;">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2 class="mb-0">
                                <i class="fas fa-chart-bar mr-2"></i>
                                Reports Dashboard
                            </h2>
                            <p class="mb-0 mt-2 opacity-75">Comprehensive reports for bills, deposits, expenses, and transfers</p>
                        </div>
                        <div class="col-md-4 text-right">
                            <div class="text-white-50">
                                <small>
                                    <i class="fas fa-calendar-alt mr-1"></i>
                                    {{ now()->format('F d, Y') }}
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <!-- Bills Statistics -->
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Bills Assigned</h6>
                            <h3 class="mb-0 text-primary">
                                <i class="fas fa-file-invoice mr-2"></i>
                                {{ $stats['bills']['total'] }}
                            </h3>
                            <small class="text-muted">
                                ৳{{ number_format($stats['bills']['total_amount'], 2) }} total
                            </small>
                        </div>
                        <div class="text-primary">
                            <i class="fas fa-file-invoice fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Collector Deposits Statistics -->
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Collector Collection & Deposits</h6>
                            <h3 class="mb-0 text-success">
                                <i class="fas fa-money-bill-wave mr-2"></i>
                                {{ $stats['collector_deposits']['total'] }}
                            </h3>
                            <small class="text-muted">
                                ৳{{ number_format($stats['collector_deposits']['total_amount'], 2) }} deposited
                            </small>
                        </div>
                        <div class="text-success">
                            <i class="fas fa-money-bill-wave fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Collector Expenses Statistics -->
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Collector Expenses</h6>
                            <h3 class="mb-0 text-warning">
                                <i class="fas fa-receipt mr-2"></i>
                                {{ $stats['collector_expenses']['total'] }}
                            </h3>
                            <small class="text-muted">
                                ৳{{ number_format($stats['collector_expenses']['total_amount'], 2) }} spent
                            </small>
                        </div>
                        <div class="text-warning">
                            <i class="fas fa-receipt fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Manager Deposits Statistics -->
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Manager Transfers</h6>
                            <h3 class="mb-0 text-info">
                                <i class="fas fa-exchange-alt mr-2"></i>
                                {{ $stats['manager_deposits']['total'] }}
                            </h3>
                            <small class="text-muted">
                                ৳{{ number_format($stats['manager_deposits']['total_amount'], 2) }} transferred
                            </small>
                        </div>
                        <div class="text-info">
                            <i class="fas fa-exchange-alt fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Reports Tabs -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <ul class="nav nav-tabs card-header-tabs" id="reportTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="bills-tab" data-toggle="tab" href="#bills" role="tab">
                                <i class="fas fa-file-invoice mr-2"></i>Bills
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="deposits-tab" data-toggle="tab" href="#deposits" role="tab">
                                <i class="fas fa-money-bill-wave mr-2"></i>Collector Collection & Deposits
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="expenses-tab" data-toggle="tab" href="#expenses" role="tab">
                                <i class="fas fa-receipt mr-2"></i>Collector Expenses
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="transfers-tab" data-toggle="tab" href="#transfers" role="tab">
                                <i class="fas fa-exchange-alt mr-2"></i>Manager Transfers
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="reportTabsContent">
                        <!-- Bills Tab -->
                        <div class="tab-pane fade show active" id="bills" role="tabpanel">
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <select class="form-control" id="bills-collector-filter">
                                        <option value="">All Collectors</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-control" id="bills-status-filter">
                                        <option value="">All Status</option>
                                        <option value="pending">Pending</option>
                                        <option value="paid">Paid</option>
                                        <option value="overdue">Overdue</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <input type="date" class="form-control" id="bills-date-from" placeholder="From Date">
                                </div>
                                <div class="col-md-2">
                                    <input type="date" class="form-control" id="bills-date-to" placeholder="To Date">
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-primary" onclick="loadBillsReport()">
                                        <i class="fas fa-search"></i> Filter
                                    </button>
                                </div>
                            </div>
                            <div id="bills-content">
                                <div class="text-center py-4">
                                    <i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
                                    <p class="text-muted mt-2">Loading bills...</p>
                                </div>
                            </div>
                        </div>

                        <!-- Collector Collection & Deposits Tab -->
                        <div class="tab-pane fade" id="deposits" role="tabpanel">
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <select class="form-control" id="deposits-collector-filter">
                                        <option value="">All Collectors</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-control" id="deposits-approval-filter">
                                        <option value="">All Status</option>
                                        <option value="approved">Approved</option>
                                        <option value="pending">Pending</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <input type="date" class="form-control" id="deposits-date-from" placeholder="From Date">
                                </div>
                                <div class="col-md-2">
                                    <input type="date" class="form-control" id="deposits-date-to" placeholder="To Date">
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-primary" onclick="loadDepositsReport()">
                                        <i class="fas fa-search"></i> Filter
                                    </button>
                                </div>
                            </div>
                            <div id="deposits-content">
                                <div class="text-center py-4">
                                    <i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
                                    <p class="text-muted mt-2">Loading deposits...</p>
                                </div>
                            </div>
                        </div>

                        <!-- Collector Expenses Tab -->
                        <div class="tab-pane fade" id="expenses" role="tabpanel">
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <select class="form-control" id="expenses-collector-filter">
                                        <option value="">All Collectors</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-control" id="expenses-type-filter">
                                        <option value="">All Types</option>
                                        <option value="transport">Transport</option>
                                        <option value="meals">Meals</option>
                                        <option value="communication">Communication</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-control" id="expenses-approval-filter">
                                        <option value="">All Status</option>
                                        <option value="approved">Approved</option>
                                        <option value="pending">Pending</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <input type="date" class="form-control" id="expenses-date-from" placeholder="From Date">
                                </div>
                                <div class="col-md-2">
                                    <input type="date" class="form-control" id="expenses-date-to" placeholder="To Date">
                                </div>
                                <div class="col-md-1">
                                    <button class="btn btn-primary" onclick="loadExpensesReport()">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div id="expenses-content">
                                <div class="text-center py-4">
                                    <i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
                                    <p class="text-muted mt-2">Loading expenses...</p>
                                </div>
                            </div>
                        </div>

                        <!-- Manager Transfers Tab -->
                        <div class="tab-pane fade" id="transfers" role="tabpanel">
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <select class="form-control" id="transfers-manager-filter">
                                        <option value="">All Managers</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-control" id="transfers-method-filter">
                                        <option value="">All Methods</option>
                                        <option value="cash">Cash</option>
                                        <option value="bank_transfer">Bank Transfer</option>
                                        <option value="mobile_banking">Mobile Banking</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <input type="date" class="form-control" id="transfers-date-from" placeholder="From Date">
                                </div>
                                <div class="col-md-2">
                                    <input type="date" class="form-control" id="transfers-date-to" placeholder="To Date">
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-primary" onclick="loadTransfersReport()">
                                        <i class="fas fa-search"></i> Filter
                                    </button>
                                </div>
                            </div>
                            <div id="transfers-content">
                                <div class="text-center py-4">
                                    <i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
                                    <p class="text-muted mt-2">Loading transfers...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.bg-primary {
    background: linear-gradient(135deg, #007bff, #0056b3) !important;
}

.nav-tabs .nav-link {
    border: none;
    color: #6c757d;
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    color: #007bff;
    border-bottom: 2px solid #007bff;
    background: none;
}

.nav-tabs .nav-link:hover {
    border: none;
    border-bottom: 2px solid #dee2e6;
}

.table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
}

.badge {
    font-size: 0.75em;
}

.text-success { color: #28a745 !important; }
.text-warning { color: #ffc107 !important; }
.text-danger { color: #dc3545 !important; }
.text-info { color: #17a2b8 !important; }
.text-primary { color: #007bff !important; }

@media (max-width: 768px) {
    .card-header h2 {
        font-size: 1.5rem;
    }
    
    .nav-tabs {
        flex-wrap: wrap;
    }
    
    .nav-tabs .nav-item {
        margin-bottom: 0.5rem;
    }
}
</style>

<script>
$(document).ready(function() {
    // Load initial data for active tab
    loadBillsReport();
    
    // Handle tab changes
    $('#reportTabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        const target = $(e.target).attr('href');
        
        switch(target) {
            case '#bills':
                loadBillsReport();
                break;
            case '#deposits':
                loadDepositsReport();
                break;
            case '#expenses':
                loadExpensesReport();
                break;
            case '#transfers':
                loadTransfersReport();
                break;
        }
    });
});

function loadBillsReport() {
    const filters = {
        collector_id: $('#bills-collector-filter').val(),
        status: $('#bills-status-filter').val(),
        date_from: $('#bills-date-from').val(),
        date_to: $('#bills-date-to').val()
    };
    
    $.get('{{ route("reports.bills") }}', filters)
        .done(function(data) {
            displayBillsData(data);
            populateCollectorFilter(data.collectors, '#bills-collector-filter');
        })
        .fail(function() {
            $('#bills-content').html('<div class="alert alert-danger">Error loading bills data</div>');
        });
}

function loadDepositsReport() {
    const filters = {
        collector_id: $('#deposits-collector-filter').val(),
        approval_status: $('#deposits-approval-filter').val(),
        date_from: $('#deposits-date-from').val(),
        date_to: $('#deposits-date-to').val()
    };
    
    $.get('{{ route("reports.deposits") }}', filters)
        .done(function(data) {
            displayDepositsData(data);
            populateCollectorFilter(data.collectors, '#deposits-collector-filter');
        })
        .fail(function() {
            $('#deposits-content').html('<div class="alert alert-danger">Error loading deposits data</div>');
        });
}

function loadExpensesReport() {
    const filters = {
        collector_id: $('#expenses-collector-filter').val(),
        expense_type: $('#expenses-type-filter').val(),
        approval_status: $('#expenses-approval-filter').val(),
        date_from: $('#expenses-date-from').val(),
        date_to: $('#expenses-date-to').val()
    };
    
    $.get('{{ route("reports.expenses") }}', filters)
        .done(function(data) {
            displayExpensesData(data);
            populateCollectorFilter(data.collectors, '#expenses-collector-filter');
        })
        .fail(function() {
            $('#expenses-content').html('<div class="alert alert-danger">Error loading expenses data</div>');
        });
}

function loadTransfersReport() {
    const filters = {
        manager_id: $('#transfers-manager-filter').val(),
        method: $('#transfers-method-filter').val(),
        date_from: $('#transfers-date-from').val(),
        date_to: $('#transfers-date-to').val()
    };
    
    $.get('{{ route("reports.transfers") }}', filters)
        .done(function(data) {
            displayTransfersData(data);
            populateManagerFilter(data.managers, '#transfers-manager-filter');
        })
        .fail(function() {
            $('#transfers-content').html('<div class="alert alert-danger">Error loading transfers data</div>');
        });
}

function displayBillsData(data) {
    let html = `
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h5 class="text-primary">৳${data.total_amount.toLocaleString()}</h5>
                        <small class="text-muted">Total Amount</small>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h5 class="text-success">৳${data.paid_amount.toLocaleString()}</h5>
                        <small class="text-muted">Paid Amount</small>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h5 class="text-warning">৳${data.pending_amount.toLocaleString()}</h5>
                        <small class="text-muted">Pending Amount</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="bg-light">
                    <tr>
                        <th>Bill Number</th>
                        <th>Client</th>
                        <th>Collector</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Due Date</th>
                        <th>Created</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    if (data.bills.data.length > 0) {
        data.bills.data.forEach(function(bill) {
            const statusClass = bill.status === 'paid' ? 'success' : (bill.status === 'overdue' ? 'danger' : 'warning');
            html += `
                <tr>
                    <td><strong>${bill.bill_number}</strong></td>
                    <td>${bill.client ? bill.client.name : 'N/A'}</td>
                    <td>${bill.employee ? bill.employee.name : 'N/A'}</td>
                    <td><strong>৳${parseFloat(bill.total_amount).toLocaleString()}</strong></td>
                    <td><span class="badge badge-${statusClass}">${bill.status.toUpperCase()}</span></td>
                    <td>${bill.due_date}</td>
                    <td>${bill.created_at}</td>
                </tr>
            `;
        });
    } else {
        html += '<tr><td colspan="7" class="text-center text-muted">No bills found</td></tr>';
    }
    
    html += '</tbody></table></div>';
    
    if (data.bills.last_page > 1) {
        html += generatePagination(data.bills);
    }
    
    $('#bills-content').html(html);
}

function displayDepositsData(data) {
    let html = `
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h5 class="text-primary">৳${data.total_deposited.toLocaleString()}</h5>
                        <small class="text-muted">Total Deposited</small>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h5 class="text-success">৳${data.approved_amount.toLocaleString()}</h5>
                        <small class="text-muted">Approved Amount</small>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h5 class="text-warning">৳${data.pending_amount.toLocaleString()}</h5>
                        <small class="text-muted">Pending Amount</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="bg-light">
                    <tr>
                        <th>Collector</th>
                        <th>Amount</th>
                        <th>Method</th>
                        <th>Status</th>
                        <th>Approved By</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    if (data.deposits.data.length > 0) {
        data.deposits.data.forEach(function(deposit) {
            const statusClass = deposit.is_approved ? 'success' : 'warning';
            const statusText = deposit.is_approved ? 'Approved' : 'Pending';
            html += `
                <tr>
                    <td>${deposit.collector ? deposit.collector.name : 'N/A'}</td>
                    <td><strong>৳${parseFloat(deposit.amount).toLocaleString()}</strong></td>
                    <td>${deposit.method}</td>
                    <td><span class="badge badge-${statusClass}">${statusText}</span></td>
                    <td>${deposit.approver ? deposit.approver.name : 'N/A'}</td>
                    <td>${deposit.deposit_date}</td>
                </tr>
            `;
        });
    } else {
        html += '<tr><td colspan="6" class="text-center text-muted">No deposits found</td></tr>';
    }
    
    html += '</tbody></table></div>';
    
    if (data.deposits.last_page > 1) {
        html += generatePagination(data.deposits);
    }
    
    $('#deposits-content').html(html);
}

function displayExpensesData(data) {
    let html = `
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h5 class="text-primary">৳${data.total_expenses.toLocaleString()}</h5>
                        <small class="text-muted">Total Expenses</small>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h5 class="text-success">৳${data.approved_amount.toLocaleString()}</h5>
                        <small class="text-muted">Approved Amount</small>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h5 class="text-warning">৳${data.pending_amount.toLocaleString()}</h5>
                        <small class="text-muted">Pending Amount</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="bg-light">
                    <tr>
                        <th>Collector</th>
                        <th>Type</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Approved By</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    if (data.expenses.data.length > 0) {
        data.expenses.data.forEach(function(expense) {
            const statusClass = expense.is_approved ? 'success' : 'warning';
            const statusText = expense.is_approved ? 'Approved' : 'Pending';
            html += `
                <tr>
                    <td>${expense.collector ? expense.collector.name : 'N/A'}</td>
                    <td>${expense.expense_type}</td>
                    <td><strong>৳${parseFloat(expense.amount).toLocaleString()}</strong></td>
                    <td><span class="badge badge-${statusClass}">${statusText}</span></td>
                    <td>${expense.approver ? expense.approver.name : 'N/A'}</td>
                    <td>${expense.expense_date}</td>
                </tr>
            `;
        });
    } else {
        html += '<tr><td colspan="6" class="text-center text-muted">No expenses found</td></tr>';
    }
    
    html += '</tbody></table></div>';
    
    if (data.expenses.last_page > 1) {
        html += generatePagination(data.expenses);
    }
    
    $('#expenses-content').html(html);
}

function displayTransfersData(data) {
    let html = `
        <div class="row mb-3">
            <div class="col-md-12">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h5 class="text-primary">৳${data.total_transferred.toLocaleString()}</h5>
                        <small class="text-muted">Total Transferred</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="bg-light">
                    <tr>
                        <th>Manager</th>
                        <th>Amount</th>
                        <th>Method</th>
                        <th>Transferred To</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    if (data.deposits.data.length > 0) {
        data.deposits.data.forEach(function(deposit) {
            html += `
                <tr>
                    <td>${deposit.manager ? deposit.manager.name : 'N/A'}</td>
                    <td><strong>৳${parseFloat(deposit.amount).toLocaleString()}</strong></td>
                    <td>${deposit.method}</td>
                    <td>${deposit.transferred_to ? deposit.transferred_to.name : 'N/A'}</td>
                    <td>${deposit.transfer_date}</td>
                </tr>
            `;
        });
    } else {
        html += '<tr><td colspan="5" class="text-center text-muted">No transfers found</td></tr>';
    }
    
    html += '</tbody></table></div>';
    
    if (data.deposits.last_page > 1) {
        html += generatePagination(data.deposits);
    }
    
    $('#transfers-content').html(html);
}

function populateCollectorFilter(collectors, selector) {
    const select = $(selector);
    const currentValue = select.val();
    
    select.empty().append('<option value="">All Collectors</option>');
    
    collectors.forEach(function(collector) {
        select.append(`<option value="${collector.id}">${collector.name}</option>`);
    });
    
    select.val(currentValue);
}

function populateManagerFilter(managers, selector) {
    const select = $(selector);
    const currentValue = select.val();
    
    select.empty().append('<option value="">All Managers</option>');
    
    managers.forEach(function(manager) {
        select.append(`<option value="${manager.id}">${manager.name}</option>`);
    });
    
    select.val(currentValue);
}

function generatePagination(data) {
    let html = '<nav><ul class="pagination justify-content-center">';
    
    for (let i = 1; i <= data.last_page; i++) {
        const activeClass = i === data.current_page ? 'active' : '';
        html += `<li class="page-item ${activeClass}"><a class="page-link" href="#" onclick="loadPage(${i})">${i}</a></li>`;
    }
    
    html += '</ul></nav>';
    return html;
}
</script>
@endsection