@extends('layouts.vendor')

@section('page-title', 'Finance Overview')

@section('vendor-content')
    <style>
        .finance-card {
            background-color: #fff;
            border-radius: 0.5rem;
            border: 1px solid #eaeaea;
            padding: 1rem;
            text-align: center;
        }

        .finance-card h5 {
            font-size: 0.9rem;
            color: #777;
        }

        .finance-card h3 {
            font-size: 1.4rem;
            margin: 0.5rem 0;
            font-weight: bold;
        }

        .chart-box {
            background-color: #fff;
            border-radius: 0.5rem;
            border: 1px solid #eaeaea;
            padding: 1rem;
            min-height: 280px;
        }
    </style>

    <div class="container-fluid">
        <!-- Finance Summary Cards -->
        <div class="row g-3 mb-4">
            <div class="col-md-3">
                <div class="finance-card">
                    <h5>Wallet Balance</h5>
                    <h3>₦{{ number_format($walletbalance, 2) }}</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="finance-card">
                    <h5>Pending Payouts</h5>
                    <h3>₦{{ number_format($pendingPayments, 2) }}</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="finance-card">
                    <h5>Total Payouts</h5>
                    <h3>₦{{ number_format($totalPayouts, 2) }}</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="finance-card">
                    <h5>Wallet Number</h5>
                    <h3>{{ $walletnumber }}</h3>
                </div>
            </div>
        </div>

        <!-- Payout Request Button -->
        @if($walletbalance >= 5000)
            <div class="d-grid gap-2 d-md-flex justify-content-md-end mb-4">
                <a href="{{ route('vendor.payout.form') }}" class="btn btn-success">
                    <i class="fas fa-hand-holding-usd me-2"></i>Request Payout
                </a>
            </div>
        @else
            <div class="alert alert-info mb-4">
                <i class="fas fa-info-circle me-2"></i>
                You need at least ₦5,000 in your wallet to request a payout.
            </div>
        @endif

        <!-- Combined Chart Section -->
        <div class="row g-3 mb-4">
            <div class="col-md-12">
                <div class="chart-box">
                    <h5 class="mb-3">Payout and Transaction Overview</h5>
                    <canvas id="financeTransactionChart" style="width:100%; max-height:250px;"></canvas>
                </div>
            </div>
        </div>

        <!-- Recent Payouts Table -->
        <div class="mb-3 d-flex justify-content-between align-items-center">
            <h5 class="m-0">Recent Payouts</h5>
            <input type="text" id="payoutSearch" class="form-control form-control-sm w-25" placeholder="Search...">
        </div>

        <div class="table-responsive">
            <table class="table align-middle table-striped">
                <thead>
                    <tr>
                        <th>Payout Reference</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Date Requested</th>
                    </tr>
                </thead>
                <tbody id="payoutTable">
                    @forelse ($recentPayouts as $payout)
                        <tr>
                            <td>{{ $payout->id }}</td>
                            <td>₦{{ number_format($payout->amount, 2) }}</td>
                            <td>
                                <span class="badge bg-{{ $payout->status === 'completed' ? 'success' : ($payout->status === 'pending' ? 'warning' : 'secondary') }}">
                                    {{ ucfirst($payout->status) }}
                                </span>
                            </td>
                            <td>{{ \Carbon\Carbon::parse($payout->requested_at)->format('d/m/Y H:i') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center">No payout history found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($recentPayouts->hasPages())
            <div class="d-flex justify-content-between align-items-center mt-3">
                <p class="m-0">
                    Showing {{ $recentPayouts->firstItem() }} to {{ $recentPayouts->lastItem() }} of {{ $recentPayouts->total() }} results
                </p>
                <div>{{ $recentPayouts->links() }}</div>
            </div>
        @endif
    </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
            // Payout Search Filter
            document.getElementById("payoutSearch").addEventListener("keyup", function () {
                let searchValue = this.value.toLowerCase();
                let rows = document.querySelectorAll("#payoutTable tr");
                rows.forEach(row => {
                    let text = row.innerText.toLowerCase();
                    row.style.display = text.includes(searchValue) ? "" : "none";
                });
            });

            document.addEventListener("DOMContentLoaded", function () {
                const months = @json($transactionMonths);
                const payoutsData = @json($transactionTotals); // using transactionTotals for illustration
                const categoryLabels = @json($categoryLabels);
                const categoryData = @json($categoryTotals);

                // Combined Bar Chart for demonstration
                new Chart(document.getElementById('financeTransactionChart').getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: months,
                        datasets: [
                            {
                                label: 'Transactions',
                                data: payoutsData,
                                backgroundColor: '#2196f3'
                            },
                            {
                                label: 'Categories',
                                data: categoryData,
                                backgroundColor: '#4caf50'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: (value) => `₦${value.toLocaleString()}`
                                }
                            }
                        }
                    }
                });
            });
        </script>
    @endpush
@endsection