@extends('layouts.admin')

@section('title', 'Payment Summary Dashboard')

@section('content')
<x-admin.report-page title="Payment Summary Dashboard" subtitle="Comprehensive payment analytics for POS and Online transactions">
    <x-slot:actions>
        <a href="{{ route('admin.reports.payment-health') }}" class="ci-btn ci-btn--ghost">
            <i class="bi bi-activity"></i> Payment Health
        </a>
        <a href="{{ route('admin.reports.payments.export-csv', request()->all()) }}" class="ci-btn ci-btn--primary" id="exportCsvBtn">
            <i class="bi bi-download"></i> Export CSV
        </a>
    </x-slot:actions>

    <form method="GET" id="filterForm" class="ci-filters ci-filters--report">
        @include('admin.reports.partials.location-filter', ['ci' => true])
        <div class="ci-filters__field">
            <label for="start_date">Start Date</label>
            <input type="date" name="start_date" id="start_date" value="{{ $startDate }}">
        </div>
        <div class="ci-filters__field">
            <label for="end_date">End Date</label>
            <input type="date" name="end_date" id="end_date" value="{{ $endDate }}">
        </div>
        <div class="ci-filters__field">
            <label for="transaction_type">Transaction Type</label>
            <select name="transaction_type" id="transaction_type">
                <option value="all" {{ ($transactionType ?? 'all') === 'all' ? 'selected' : '' }}>All</option>
                <option value="pos" {{ $transactionType === 'pos' ? 'selected' : '' }}>POS</option>
                <option value="online" {{ $transactionType === 'online' ? 'selected' : '' }}>Online</option>
            </select>
        </div>
        <div class="ci-filters__field ci-filters__field--compact">
            <label for="payment_method">Payment Method</label>
            <select name="payment_method" id="payment_method">
                <option value="">All Methods</option>
                <option value="online" {{ $paymentMethod === 'online' ? 'selected' : '' }}>Online</option>
                <option value="cod" {{ $paymentMethod === 'cod' ? 'selected' : '' }}>COD</option>
                <option value="cash" {{ $paymentMethod === 'cash' ? 'selected' : '' }}>Cash</option>
                <option value="card" {{ $paymentMethod === 'card' ? 'selected' : '' }}>Card</option>
                <option value="digital_wallet" {{ $paymentMethod === 'digital_wallet' ? 'selected' : '' }}>Digital Wallet</option>
                <option value="offline" {{ $paymentMethod === 'offline' ? 'selected' : '' }}>Offline</option>
            </select>
        </div>
        <div class="ci-filters__field ci-filters__field--compact">
            <label for="status">Status</label>
            <select name="status" id="status">
                <option value="all" {{ ($status ?? 'all') === 'all' ? 'selected' : '' }}>All</option>
                <option value="paid" {{ $status === 'paid' ? 'selected' : '' }}>Paid</option>
                <option value="pending" {{ $status === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="failed" {{ $status === 'failed' ? 'selected' : '' }}>Failed</option>
                <option value="refunded" {{ $status === 'refunded' ? 'selected' : '' }}>Refunded</option>
            </select>
        </div>
        <div class="ci-filters__actions">
            <button type="submit" class="ci-btn ci-btn--primary">
                <!-- <i class="bi bi-search"></i> -->
                 Filters
            </button>
            <a href="{{ route('admin.reports.payments') }}" title="reset" class="ci-btn ci-btn--ghost ci-btn--icon">
                <i class="bi bi-arrow-clockwise"></i>
            </a>
        </div>
    </form>

    <div class="ci-stats" id="kpiCards">
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Total Received</p>
                <p class="ci-stat__value ci-stat__value--sm ci-stat__value--success" id="kpi-total-received">₹0.00</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-currency-rupee"></i></span>
        </div>
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Online Total</p>
                <p class="ci-stat__value ci-stat__value--sm" id="kpi-online-total">₹0.00</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-globe"></i></span>
        </div>
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">POS Total</p>
                <p class="ci-stat__value ci-stat__value--sm" id="kpi-pos-total">₹0.00</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-cash"></i></span>
        </div>
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Failed</p>
                <p class="ci-stat__value ci-stat__value--danger" id="kpi-failed">0</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-x-circle"></i></span>
        </div>
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Pending</p>
                <p class="ci-stat__value ci-stat__value--warning" id="kpi-pending">0</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-clock"></i></span>
        </div>
        <div class="ci-stat d-none">
            <div>
                <p class="ci-stat__label">Refunds</p>
                <p class="ci-stat__value ci-stat__value--sm" id="kpi-refunds">₹0.00</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-arrow-counterclockwise"></i></span>
        </div>
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Success Rate</p>
                <p class="ci-stat__value ci-stat__value--success" id="kpi-success-rate">0%</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-graph-up-arrow"></i></span>
        </div>
    </div>

    <div class="ci-grid-2" style="grid-template-columns: 2fr 1fr 1fr;">
        <div class="ci-section">
            <div class="ci-section__head">
                <h2>Payment Trend</h2>
            </div>
            <div class="ci-section__body">
                <canvas id="trendChart" height="80"></canvas>
            </div>
        </div>
        <div class="ci-section">
            <div class="ci-section__head">
                <h2>POS vs Online</h2>
            </div>
            <div class="ci-section__body">
                <canvas id="posVsOnlineChart" height="200"></canvas>
            </div>
        </div>
        <div class="ci-section">
            <div class="ci-section__head">
                <h2>Payment Method Distribution</h2>
            </div>
            <div class="ci-section__body">
                <canvas id="paymentMethodChart" height="200"></canvas>
            </div>
        </div>
    </div>

    <div class="ci-table-card">
        <div class="ci-section__head">
            <h2>Transactions</h2>
            <button type="button" class="ci-btn ci-btn--ghost" id="refreshTableBtn">
                <i class="bi bi-arrow-clockwise"></i> Refresh
            </button>
        </div>
        <div class="ci-table-wrap">
            <table class="ci-table" id="transactionsTable">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Transaction ID</th>
                        <th>Date</th>
                        <th>Customer</th>
                        <th class="ci-end">Amount</th>
                        <th>Payment Method</th>
                        <th>Source</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="transactionsTableBody">
                    <tr>
                        <td colspan="9" class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <nav aria-label="Transaction pagination" id="paginationNav" class="ci-pagination">
            <ul class="pagination justify-content-center" id="paginationList">
            </ul>
        </nav>
    </div>
</x-admin.report-page>
@endsection

@push('scripts')
<script src="{{ asset('js/vendor/chart.umd.min.js') }}"></script>
<script src="{{ asset('js/payment-report.js') }}"></script>
<script>
    // Initialize with current filter values
    const initialFilters = {
        start_date: '{{ $startDate }}',
        end_date: '{{ $endDate }}',
        payment_method: '{{ $paymentMethod ?? "" }}',
        transaction_type: '{{ $transactionType ?? "all" }}',
        status: '{{ $status ?? "all" }}',
        location_id: '{{ ($locationId ?? null) === null ? (empty($canViewAllShops) ? "" : "all") : $locationId }}',
    };
</script>
@endpush

@push('styles')
<style>
    .chart-container {
        position: relative;
        height: 300px;
    }

    #trendChart {
        max-height: 300px;
    }

    #posVsOnlineChart,
    #paymentMethodChart {
        max-height: 250px;
    }

    @media (max-width: 992px) {
        .ci-grid-2[style*="2fr 1fr 1fr"] {
            grid-template-columns: 1fr !important;
        }
    }
</style>
@endpush