@extends('layouts/contentNavbarLayout')

@section('title', 'Dashboard - Analytics')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}">
    <style>
        :root {
            --dash-bg: #eef2f5;
            --dash-surface: #ffffff;
            --dash-border: #dbe4ea;
            --dash-text: #1f2a44;
            --dash-muted: #6b7a90;

            --dash-sidebar: #0f7c8f;
            --dash-sidebar-dark: #0c6a7a;
            --dash-sidebar-active: #2f8fa0;

            --dash-hero-start: #162554;
            --dash-hero-mid: #233f93;
            --dash-hero-end: #2d56c5;

            --dash-card-blue: #2d5be3;
            --dash-card-green: #179c41;
            --dash-card-orange: #d97706;

            --dash-soft-blue: #dfe8f7;
            --dash-soft-icon: #2f67f6;

            --dash-success: #16a34a;
            --dash-warning: #d97706;
            --dash-danger: #dc2626;
            --dash-info: #0891b2;

            --dash-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
            --dash-radius: 20px;
        }

        body {
            background: var(--dash-bg) !important;
        }

        .layout-page,
        .content-wrapper,
        .container-xxl,
        .container-fluid {
            background: transparent !important;
        }

        .dashboard-shell {
            padding: 8px 0 24px;
        }

        .hero-card {
            background: linear-gradient(135deg,
                    var(--dash-hero-start) 0%,
                    var(--dash-hero-mid) 48%,
                    var(--dash-hero-end) 100%);
            border: 0;
            border-radius: 22px;
            color: #fff;
            overflow: hidden;
            position: relative;
            box-shadow: 0 14px 28px rgba(37, 86, 197, 0.18);
            min-height: 240px;
        }

        .hero-card::before {
            content: "";
            position: absolute;
            left: -30px;
            top: 20px;
            width: 130px;
            height: 130px;
            background: rgba(255, 255, 255, .05);
            border-radius: 50%;
        }

        .hero-card::after {
            content: "";
            position: absolute;
            right: -40px;
            bottom: -55px;
            width: 210px;
            height: 210px;
            background: rgba(255, 255, 255, .10);
            border-radius: 50%;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .15);
            color: #fff;
            padding: 8px 14px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 600;
        }

        .hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 20px;
        }

        .hero-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, .10);
            border: 1px solid rgba(255, 255, 255, .16);
            color: #fff;
            border-radius: 999px;
            padding: 9px 15px;
            font-size: 13px;
        }

        .dashboard-card {
            background: var(--dash-surface);
            border: 1px solid var(--dash-border);
            border-radius: 20px;
            box-shadow: var(--dash-shadow);
            height: 100%;
        }

        .dashboard-card .card-header {
            background: transparent;
            border-bottom: 1px solid var(--dash-border);
            padding: 18px 22px 14px;
        }

        .dashboard-card .card-body {
            padding: 22px;
        }

        .section-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--dash-text);
            margin: 0;
        }

        .section-subtitle {
            color: var(--dash-muted);
            font-size: 13px;
            margin-top: 4px;
        }

        .balance-box {
            border-radius: 22px;
            padding: 20px 22px;
            color: #fff;
            position: relative;
            overflow: hidden;
            min-height: 112px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
        }

        .balance-box::after {
            content: "";
            position: absolute;
            right: -34px;
            bottom: -34px;
            width: 118px;
            height: 118px;
            background: rgba(255, 255, 255, .12);
            border-radius: 50%;
        }

        .balance-box.primary {
            background: linear-gradient(135deg, #2b57dc 0%, #2f67f6 100%);
        }

        .balance-box.success {
            background: linear-gradient(135deg, #14943c 0%, #1ca247 100%);
        }

        .balance-box.warning {
            background: linear-gradient(135deg, #cf6d04 0%, #db7a0a 100%);
        }

        .balance-box h6 {
            font-size: 14px;
            color: rgba(255, 255, 255, .85);
            margin-bottom: 10px;
            font-weight: 500;
        }

        .balance-box h3 {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            color: #fff;
        }

        .kyc-alert {
            border-radius: 18px;
            border: 1px solid transparent;
            box-shadow: var(--dash-shadow);
        }

        .filter-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            justify-content: space-between;
            padding: 18px 22px;
            background: #fff;
            border: 1px solid var(--dash-border);
            border-radius: 18px;
            box-shadow: var(--dash-shadow);
            margin-bottom: 22px;
        }

        .filter-meta {
            color: var(--dash-muted);
            font-size: 13px;
        }

        .filter-form {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .filter-form .form-select,
        .filter-form .form-control {
            border-radius: 14px;
            min-height: 42px;
            border: 1px solid #d6dde5;
            color: var(--dash-text);
            background-color: #fff;
        }

        .btn-modern {
            border-radius: 12px;
            min-height: 42px;
            padding: 0 18px;
            font-weight: 600;
            background: var(--dash-sidebar);
            border-color: var(--dash-sidebar);
            color: #fff;
        }

        .btn-modern:hover,
        .btn-modern:focus {
            background: var(--dash-sidebar-dark);
            border-color: var(--dash-sidebar-dark);
            color: #fff;
        }

        .mini-stat {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 22px;
            border-radius: 20px;
            background: #ffffff;
            border: 1px solid var(--dash-border);
            min-height: 116px;
        }

        .mini-stat-icon {
            width: 54px;
            height: 54px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--dash-soft-blue);
            color: var(--dash-soft-icon);
            font-size: 24px;
            flex-shrink: 0;
        }

        .mini-stat h6 {
            margin: 0 0 8px;
            color: #60708b;
            font-size: 14px;
            font-weight: 700;
        }

        .mini-stat h3 {
            margin: 0;
            color: #111c3d;
            font-size: 22px;
            font-weight: 800;
        }

        .mini-stat small {
            color: #97a6ba;
            display: inline-block;
            margin-top: 6px;
            font-size: 13px;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .product-tile {
            text-align: center;
            padding: 18px 12px;
            border-radius: 18px;
            border: 1px solid var(--dash-border);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            transition: .2s ease;
        }

        .product-tile:hover {
            transform: translateY(-2px);
            box-shadow: var(--dash-shadow);
        }

        .product-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 12px;
            border-radius: 18px;
            display: grid;
            place-items: center;
            background: #edf4ff;
            color: var(--dash-soft-icon);
            font-size: 30px;
        }

        .list-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1px dashed var(--dash-border);
        }

        .list-row:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .list-row:first-child {
            padding-top: 0;
        }

        .list-title {
            font-weight: 600;
            color: var(--dash-text);
            margin-bottom: 3px;
        }

        .list-meta {
            color: var(--dash-muted);
            font-size: 12px;
        }

        .amount-pill {
            min-width: 92px;
            text-align: right;
            font-weight: 700;
            color: var(--dash-text);
        }

        .amount-pill.credit {
            color: var(--dash-success);
        }

        .amount-pill.debit {
            color: var(--dash-danger);
        }

        .table thead th {
            font-size: 12px;
            font-weight: 700;
            color: var(--dash-muted);
            text-transform: uppercase;
            letter-spacing: .4px;
            border-bottom-width: 1px;
        }

        .soft-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            padding: 7px 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .soft-badge.success {
            background: #dcfce7;
            color: #166534;
        }

        .news-box {
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border: 1px solid var(--dash-border);
            border-radius: 16px;
            padding: 16px;
        }

        .modal-content {
            border-radius: 20px;
            border: 1px solid var(--dash-border);
        }

        .modal-header,
        .modal-footer {
            border-color: var(--dash-border);
        }

        .field-error {
            font-size: 12px;
            color: var(--dash-danger);
            margin-top: 6px;
        }

        @media (max-width: 991.98px) {
            .product-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
            .product-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .hero-card .card-body,
            .dashboard-card .card-body,
            .dashboard-card .card-header {
                padding-left: 16px;
                padding-right: 16px;
            }

            .filter-wrap {
                padding: 16px;
            }
        }

        @media (max-width: 575.98px) {
            .product-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('assets/js/dashboards-analytics.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const rangeSelect = document.getElementById('rangeSelect');
            const customDates = document.getElementById('customDates');

            function toggleCustom() {
                if (!rangeSelect || !customDates) return;
                customDates.style.display = (rangeSelect.value === 'custom') ? 'flex' : 'none';
            }

            if (rangeSelect) {
                rangeSelect.addEventListener('change', toggleCustom);
                toggleCustom();
            }

            const chartEl = document.querySelector("#userDashboardChart");
            if (chartEl && typeof ApexCharts !== 'undefined') {
                const panelLabels = @json(collect($panels)->pluck('label')->values());
                const panelValues = @json(collect($panels)->pluck('value')->map(fn($v) => (float) $v)->values());

                const chartOptions = {
                    chart: {
                        type: 'bar',
                        height: 300,
                        toolbar: {
                            show: false
                        }
                    },
                    series: [{
                        name: 'Amount',
                        data: panelValues
                    }],
                    xaxis: {
                        categories: panelLabels,
                        labels: {
                            style: {
                                fontSize: '12px'
                            }
                        }
                    },
                    plotOptions: {
                        bar: {
                            borderRadius: 8,
                            columnWidth: '46%',
                            distributed: true
                        }
                    },
                    colors: ['#2d5be3', '#179c41', '#d97706', '#0f7c8f', '#6d5efc', '#dc2626', '#0ea5e9', '#7c3aed'],
                    dataLabels: {
                        enabled: false
                    },
                    yaxis: {
                        labels: {
                            formatter: function(val) {
                                return '₹ ' + Number(val).toLocaleString('en-IN', {
                                    maximumFractionDigits: 0
                                });
                            }
                        }
                    },
                    grid: {
                        borderColor: '#e3eaf2',
                        strokeDashArray: 4
                    },
                    tooltip: {
                        y: {
                            formatter: function(val) {
                                return '₹ ' + Number(val).toLocaleString('en-IN', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                });
                            }
                        }
                    },
                    legend: {
                        show: false
                    }
                };

                const chart = new ApexCharts(chartEl, chartOptions);
                chart.render();
            }
        });
    </script>
@endsection

@section('content')
    @php
        $kycMessages = [
            'B' => [
                'msg' => '❌ Your KYC has been <strong>blocked or rejected.</strong> Please contact support for assistance.',
                'class' => 'bg-label-danger',
            ],
            'C' => [
                'msg' => '⏳ Your KYC verification is <strong>in process.</strong> It usually takes <strong>24 to 48 hours.</strong>',
                'class' => 'bg-label-info',
            ],
            'D' => [
                'msg' => '📩 You haven’t submitted your KYC request yet. <strong>Verify now</strong> to get started!',
                'class' => 'bg-label-primary',
            ],
        ];
        $status = Auth::guard('web')->user()->kycstatus ?? null;
    @endphp

    <div class="dashboard-shell">
        @if ($status && isset($kycMessages[$status]))
            <div class="kyc-alert text-dark {{ $kycMessages[$status]['class'] }} d-flex flex-wrap justify-content-between align-items-center gap-3 p-3 mb-4">
                <p class="mb-0 fs-6">{!! $kycMessages[$status]['msg'] !!}</p>
                @if ($status == 'D' || $status == 'B')
                    <a href="{{ route('kyc-verification') }}" class="btn btn-primary rounded-pill px-4">Verify Now</a>
                @endif
            </div>
        @endif

        <div class="row g-4 mb-4">
            <div class="col-xl-8">
                <div class="card hero-card">
                    <div class="card-body p-4 p-lg-5 position-relative">
                        <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                            <div>
                                <span class="hero-badge mb-3">
                                    <i class="mdi mdi-shield-check-outline"></i>
                                    Secure Account
                                </span>

                                <h2 class="mb-2 text-white fw-bold">Welcome back, {{ $username }} 👋</h2>
                                <p class="mb-0 text-white" style="max-width: 620px; opacity: .88;">
                                    You’re all set to manage payments, wallet activity, service usage and fund requests
                                    from one clean user dashboard.
                                </p>

                                <div class="hero-meta">
                                    <span class="hero-chip">
                                        <i class="mdi mdi-calendar-month-outline"></i>
                                        {{ date('F d, Y') }}
                                    </span>

                                    <span class="hero-chip">
                                        <i class="mdi mdi-wallet-outline"></i>
                                        Wallet Overview
                                    </span>

                                    <span class="hero-chip">
                                        <i class="mdi mdi-bank-check"></i>
                                        Payments Active
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="d-grid gap-3 h-100">
                    <div class="balance-box primary">
                        <h6>Total Transactions Snapshot</h6>
                        <h3>₹ {{ number_format(collect($panels)->sum('value') ?? 0, 2) }}</h3>
                    </div>

                    <div class="balance-box success">
                        <h6>Wallet Services Used</h6>
                        <h3>{{ count($wallet_logs ?? []) }}</h3>
                    </div>

                    <div class="balance-box warning">
                        <h6>Fund Requests</h6>
                        <h3>{{ $fund_requests->count() ?? 0 }}</h3>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-lg-8">
                <div class="dashboard-card card h-100">
                    <div class="card-header">
                        <h5 class="section-title">Performance Snapshot</h5>
                        <div class="section-subtitle">
                            @if ($range === 'all')
                                Showing data for: All Time
                            @else
                                Showing data for: {{ $start?->format('d M Y') }} - {{ $end?->format('d M Y') }}
                            @endif
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="GET" class="filter-form mb-4" id="filterForm">
                            <select name="range" class="form-select form-select-sm" style="width: 190px;" id="rangeSelect">
                                <option value="all" {{ $range === 'all' ? 'selected' : '' }}>All Time</option>
                                <option value="today" {{ $range === 'today' ? 'selected' : '' }}>Today</option>
                                <option value="yesterday" {{ $range === 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                                <option value="last7" {{ $range === 'last7' ? 'selected' : '' }}>Last 7 Days</option>
                                <option value="last30" {{ $range === 'last30' ? 'selected' : '' }}>Last 30 Days</option>
                                <option value="lastMonth" {{ $range === 'lastMonth' ? 'selected' : '' }}>Last Month</option>
                                <option value="last3Months" {{ $range === 'last3Months' ? 'selected' : '' }}>Last 3 Months</option>
                                <option value="custom" {{ $range === 'custom' ? 'selected' : '' }}>Custom Range</option>
                            </select>

                            <div class="d-flex gap-2" id="customDates" style="display:none;">
                                <input type="date" name="from" value="{{ $from }}" class="form-control form-control-sm" style="width: 150px;">
                                <input type="date" name="to" value="{{ $to }}" class="form-control form-control-sm" style="width: 150px;">
                            </div>

                            <button class="btn btn-sm btn-modern" type="submit">
                                <i class="mdi mdi-filter-variant me-1"></i> APPLY FILTER
                            </button>
                        </form>

                        <div id="userDashboardChart"></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="dashboard-card card h-100">
                    <div class="card-header">
                        <h5 class="section-title">Recent News</h5>
                        <div class="section-subtitle">Market and compliance updates</div>
                    </div>
                    <div class="card-body">
                        <div class="news-box">
                            <h6 class="mb-2">RBI Approves 4 New Payment Aggregators</h6>
                            <p class="mb-0 text-muted">
                                The Reserve Bank of India has granted in-principle approval to 4 new companies
                                under its Payment Aggregator framework, boosting fintech competitiveness.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-4">
            @foreach ($panels as $panel)
                <div class="col-12 col-md-6 col-xl-3">
                    <div class="mini-stat">
                        <div class="mini-stat-icon">
                            <i class="{{ $panel['icon'] }} mdi-24px"></i>
                        </div>
                        <div class="flex-grow-1">
                            <h6>{{ $panel['label'] }}</h6>
                            <h3>₹ {{ number_format($panel['value'] ?? 0, 2) }}</h3>
                            <small>{{ $panel['count'] ?? 0 }} Txn</small>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="row g-4 mb-4">
            <div class="col-lg-6">
                <div class="dashboard-card card h-100">
                    <div class="card-header">
                        <h5 class="section-title">Fintech Products</h5>
                        <div class="section-subtitle">Upcoming services and product directions</div>
                    </div>
                    <div class="card-body">
                        <div class="product-grid">
                            <div class="product-tile">
                                <div class="product-icon"><i class="mdi mdi-credit-card-outline"></i></div>
                                <div class="fw-semibold">Digital Payments</div>
                            </div>
                            <div class="product-tile">
                                <div class="product-icon"><i class="mdi mdi-bank-outline"></i></div>
                                <div class="fw-semibold">Neobanking</div>
                            </div>
                            <div class="product-tile">
                                <div class="product-icon"><i class="mdi mdi-wallet-outline"></i></div>
                                <div class="fw-semibold">e-Wallets</div>
                            </div>
                            <div class="product-tile">
                                <div class="product-icon"><i class="mdi mdi-chart-line"></i></div>
                                <div class="fw-semibold">Investment Apps</div>
                            </div>
                            <div class="product-tile">
                                <div class="product-icon"><i class="mdi mdi-shield-check-outline"></i></div>
                                <div class="fw-semibold">Fraud Detection</div>
                            </div>
                            <div class="product-tile">
                                <div class="product-icon"><i class="mdi mdi-cellphone"></i></div>
                                <div class="fw-semibold">Mobile Banking</div>
                            </div>
                            <div class="product-tile">
                                <div class="product-icon"><i class="mdi mdi-receipt-outline"></i></div>
                                <div class="fw-semibold">Bill Payments</div>
                            </div>
                            <div class="product-tile">
                                <div class="product-icon"><i class="mdi mdi-finance"></i></div>
                                <div class="fw-semibold">Credit Scoring</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="dashboard-card card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="section-title">Wallet Transactions</h5>
                            <div class="section-subtitle">Recent credits and debits</div>
                        </div>
                        <a class="text-decoration-none fw-semibold" href="{{ route('transaction-wallet-report') }}" style="color: var(--dash-sidebar);">
                            View all <i class="mdi mdi-chevron-right"></i>
                        </a>
                    </div>
                    <div class="card-body">
                        @forelse ($wallet_logs as $log)
                            <div class="list-row">
                                <div>
                                    <div class="list-title">{{ $log->service_name ?? 'N/A' }}</div>
                                    <div class="list-meta">{{ \Carbon\Carbon::parse($log->created_at)->format('M d, Y') }}</div>
                                </div>

                                <div class="d-flex gap-3 align-items-center">
                                    <div class="amount-pill credit">
                                        {{ $log->credit != 0.0 ? '₹' . number_format($log->credit, 2) : '—' }}
                                    </div>
                                    <div class="amount-pill debit">
                                        {{ $log->debit != 0.0 ? '₹' . number_format($log->debit, 2) : '—' }}
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-muted">No wallet transactions found.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-6">
                <div class="dashboard-card card" style="height: 420px; overflow-y: auto;">
                    <div class="card-header position-sticky top-0 bg-white z-1">
                        <h5 class="section-title">Service Charges</h5>
                        <div class="section-subtitle">Category-wise spending summary</div>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-hover mb-0">
                            <tbody>
                                @forelse($services_charge as $index => $summary)
                                    <tr class="{{ $index % 2 === 0 ? 'table-light' : '' }}">
                                        <td class="text-capitalize text-secondary fw-medium ps-4">
                                            {{ $summary->service_name }}
                                        </td>
                                        <td class="text-end fw-bold pe-4">
                                            ₹{{ number_format($summary->total_spent, 2) }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="text-center text-muted py-4">
                                            No service charges found.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="dashboard-card card" style="height: 420px; overflow-y: auto;">
                    <div class="card-header position-sticky top-0 bg-white z-1 d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="section-title">Fund Requests</h5>
                            <div class="section-subtitle">Manage your submitted fund requests</div>
                        </div>
                        <button class="btn btn-modern btn-sm" data-bs-toggle="modal" data-bs-target="#addFundModal">
                            Fund Request
                        </button>
                    </div>
                    <div class="card-body">
                        @if ($fund_requests->isEmpty())
                            <p class="text-muted mb-0">No fund requests found.</p>
                        @else
                            <div class="table-responsive">
                                <table class="table table-bordered mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Sender Account</th>
                                            <th>Date</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($fund_requests as $request)
                                            <tr>
                                                <td>{{ $request->sender_account_number }}</td>
                                                <td>{{ \Carbon\Carbon::parse($request->created_at)->format('M d, Y') }}</td>
                                                <td>₹{{ number_format($request->amount, 2) }}</td>
                                                <td>
                                                    <span class="soft-badge success">Success</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="addFundModal">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Fund</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <form id="fundrequestform">
                        <div class="row">
                            <div class="col-12 mb-3">
                                <label for="amount" class="form-label">Amount</label>
                                <input type="text" id="amount" class="form-control" name="amount" placeholder="Enter Amount">
                                <div class="amount-message field-error"></div>
                            </div>

                            <div class="col-12 mb-3">
                                <label for="sender-account-number" class="form-label">Sender Account Number</label>
                                <select name="sender-account-number" class="form-select" id="sender-account-number">
                                    <option value="">Select Sender Account Number</option>
                                    @foreach ($active_user_accounts as $account)
                                        <option value="{{ $account->account_number }}">
                                            {{ $account->bank_name }} - {{ $account->account_number }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="sender-account-number-message field-error"></div>
                            </div>

                            <div class="col-12 mb-3">
                                <label for="company-account-number" class="form-label">Company Account Number</label>
                                <select name="company-account-number" class="form-select" id="company-account-number">
                                    <option value="">Select Company Account Number</option>
                                    @foreach ($active_company_accounts as $account)
                                        <option value="{{ $account->id }}">
                                            {{ $account->bank_name }} - {{ $account->account_number }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="company-account-number-message field-error"></div>
                            </div>

                            <div class="col-12 mb-3">
                                <label for="transaction-utr" class="form-label">RRN</label>
                                <input type="text" id="transaction-utr" class="form-control" name="transaction-utr" placeholder="Enter Transaction UTR">
                                <div class="transaction-utr-message field-error"></div>
                            </div>

                            <div class="col-12 mb-3">
                                <label for="transaction-datetime" class="form-label">Transaction Date & Time</label>
                                <input type="datetime-local" id="transaction-datetime" class="form-control" name="transaction-datetime">
                                <div class="transaction-datetime-message field-error"></div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-modern" id="submitButton">Submit</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.15/dist/sweetalert2.all.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#submitButton').on('click', function(e) {
                e.preventDefault();

                $('.field-error').text('');

                Swal.fire({
                    title: 'Processing...',
                    text: 'Please wait while we submit your request.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                        $('#submitButton').text('Processing...');
                        $('#submitButton').prop('disabled', true);
                    }
                });

                $('#addFundModal').modal('hide');

                $.ajax({
                    url: "{{ route('fund-request.submit') }}",
                    method: 'POST',
                    data: $('#fundrequestform').serialize(),
                    success: function(response) {
                        Swal.close();
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: response.message || 'Fund request submitted successfully',
                        });

                        $('#fundrequestform')[0].reset();
                        $('#addFundModal').modal('hide');
                        $('#submitButton').text('Submit');
                        $('#submitButton').prop('disabled', false);
                    },
                    error: function(xhr) {
                        Swal.close();

                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors || {};

                            $('.amount-message').text(errors.amount ? errors.amount[0] : '');
                            $('.sender-account-number-message').text(errors['sender-account-number'] ? errors['sender-account-number'][0] : '');
                            $('.company-account-number-message').text(errors['company-account-number'] ? errors['company-account-number'][0] : '');
                            $('.transaction-utr-message').text(errors['transaction-utr'] ? errors['transaction-utr'][0] : '');
                            $('.transaction-datetime-message').text(errors['transaction-datetime'] ? errors['transaction-datetime'][0] : '');

                            $('#addFundModal').modal('show');
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Something went wrong. Please try again.',
                            });
                        }

                        $('#submitButton').text('Submit');
                        $('#submitButton').prop('disabled', false);
                    }
                });
            });
        });
    </script>
@endsection