@extends('layouts.admin')

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

@section('content')
<div class="admin-page-header d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1>Payment Summary Dashboard</h1>
        <p class="admin-page-subtitle">Comprehensive payment analytics for POS and Online transactions</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.reports.payment-health') }}" class="btn btn-outline-primary">
            <i class="bi bi-activity"></i> Payment Health
        </a>
        <a href="{{ route('admin.reports.payments.export-csv', request()->all()) }}" class="admin-btn-primary" id="exportCsvBtn" style="background: #10b981;">
            <i class="bi bi-download"></i> Export CSV
        </a>
    </div>
</div>

<!-- Filters -->
<div class="admin-card mb-4">
    <div class="card-body">
        <form method="GET" id="filterForm" class="row g-3">
            <div class="col-md-2">
                <label class="admin-form-label">Start Date</label>
                <input type="date" name="start_date" id="start_date" class="admin-form-control form-control" value="{{ $startDate }}">
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">End Date</label>
                <input type="date" name="end_date" id="end_date" class="admin-form-control form-control" value="{{ $endDate }}">
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">Transaction Type</label>
                <select name="transaction_type" id="transaction_type" class="admin-form-control form-select">
                    <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="col-md-2">
                <label class="admin-form-label">Payment Method</label>
                <select name="payment_method" id="payment_method" class="admin-form-control form-select">
                    <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="col-md-2">
                <label class="admin-form-label">Status</label>
                <select name="status" id="status" class="admin-form-control form-select">
                    <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="col-md-2 d-flex align-items-end gap-2">
                <button type="submit" class="admin-btn-primary flex-grow-1">
                    <i class="bi bi-search"></i> Filters
                </button>
                <a href="{{ route('admin.reports.payments') }}" title="reset" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-clockwise" style="font-size:20px;"></i>
                </a>
            </div>
        </form>
    </div>
</div>

<!-- KPI Cards -->
<div class="row g-4 mb-4" id="kpiCards">
    <div class="col-6 col-md-4 col-lg-4 col-xl-4">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-success">
                <i class="bi bi-currency-rupee"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value" id="kpi-total-received">₹0.00</div>
                <div class="kpi-card-label">Total Received</div>
            </div>
        </div>
    </div>
     <div class="col-6 col-md-4 col-lg-4 col-xl-4">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-primary">
                <i class="bi bi-globe"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value" id="kpi-online-total">₹0.00</div>
                <div class="kpi-card-label">Online Total</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-4 col-xl-4">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-info">
                <i class="bi bi-cash"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value" id="kpi-pos-total">₹0.00</div>
                <div class="kpi-card-label">POS Total</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-4 col-xl-4">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-danger">
                <i class="bi bi-x-circle"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value" id="kpi-failed">0</div>
                <div class="kpi-card-label">Failed</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-4 col-xl-4">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-warning">
                <i class="bi bi-clock"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value" id="kpi-pending">0</div>
                <div class="kpi-card-label">Pending</div>
            </div>
        </div>
    </div>
    
   
    <div class="col-6 col-md-4 col-lg-4 col-xl-3 d-none">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-primary">
                <i class="bi bi-arrow-counterclockwise"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value" id="kpi-refunds">₹0.00</div>
                <div class="kpi-card-label">Refunds</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-4">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-success">
                <i class="bi bi-graph-up-arrow"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value" id="kpi-success-rate">0%</div>
                <div class="kpi-card-label">Success Rate</div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Section -->
<div class="row g-4 mb-4">
    <div class="col-md-8">
        <div class="admin-card">
            <div class="card-header">
                <h5 class="mb-0">Payment Trend</h5>
            </div>
            <div class="card-body">
                <canvas id="trendChart" height="80"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="admin-card">
            <div class="card-header">
                <h5 class="mb-0">POS vs Online</h5>
            </div>
            <div class="card-body">
                <canvas id="posVsOnlineChart" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="admin-card">
            <div class="card-header">
                <h5 class="mb-0">Payment Method Distribution</h5>
            </div>
            <div class="card-body">
                <canvas id="paymentMethodChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Transaction Table -->
<div class="admin-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Transactions</h5>
        <div class="d-flex gap-2">
            <button type="button" class="admin-btn-primary admin-action-btn-sm" id="refreshTableBtn">
                <i class="bi bi-arrow-clockwise"></i> Refresh
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover" id="transactionsTable">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Transaction ID</th>
                        <th>Date</th>
                        <th>Customer</th>
                        <th>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">
            <ul class="pagination justify-content-center" id="paginationList">
            </ul>
        </nav>
    </div>
</div>
@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" }}',
    };
</script>
@endpush

@push('styles')
<style>
    .chart-container {
        position: relative;
        height: 300px;
    }
    
    #trendChart {
        max-height: 300px;
    }
    
    #posVsOnlineChart,
    #paymentMethodChart {
        max-height: 250px;
    }
    
    .admin-stat-card {
        min-height: 120px;
    }
    
    .admin-stat-card .stat-value {
        font-size: 1.5rem;
    }
    
    @media (max-width: 768px) {
        .admin-stat-card .stat-value {
            font-size: 1.25rem;
        }
    }
</style>
@endpush