@extends('frontend.layouts.app')

@section('content')
    <div class="dashboard-section py-5">
        <div class="container-fluid">

            <div class="row">

                {{-- Sidebar --}}
                <div class="col-lg-3 col-xl-2 mb-4">

                    <button class="dashboard-menu-btn d-lg-none" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#dashboardSidebar">

                        <i class="fa-solid fa-bars"></i>
                        <span>Menu</span>

                    </button>

                    <div class="d-none d-lg-block">
                        @include('frontend.dashboard.sidebar')
                    </div>

                </div>

                {{-- Content --}}
                <div class="col-lg-9 col-xl-10">

                    {{-- Wallet Balance Overview Cards --}}
                    <div class="row mb-4">
                        <div class="col-md-6 col-xl-4 mb-3 mb-md-0">
                            <div class="card border-0 bg-primary text-white shadow-sm rounded-4 h-100">
                                <div class="card-body p-4">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <span class="text-white-50 fw-semibold" style="color: white !important;">Wallet
                                            Balance</span>
                                        <i class="fa-solid fa-wallet fs-4 opacity-75"></i>
                                    </div>
                                    <h2 class="fw-bold mb-3" style="color: white !important;">
                                        ₹{{ number_format($wallet_balance ?? 1250.0, 2) }}
                                    </h2>
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-light btn-sm rounded-pill px-3 fw-bold text-primary"
                                            data-bs-toggle="modal" data-bs-target="#addMoneyModal">
                                            <i class="fa-solid fa-plus me-1"></i> Add Money
                                        </button>
                                        <button class="btn btn-blur-light btn-sm rounded-pill px-3 fw-bold text-white"
                                            style="background: rgba(255,255,255,0.2);" data-bs-toggle="modal"
                                            data-bs-target="#withdrawModal">
                                            <i class="fa-solid fa-arrow-up-from-bracket me-1"></i> Withdraw
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-xl-4 mb-3 mb-md-0">
                            <div class="card border-0 shadow-sm rounded-4 h-100">
                                <div class="card-body p-4">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <span class="text-muted fw-semibold">Total Winnings</span>
                                        <i class="fa-solid fa-trophy text-warning fs-4"></i>
                                    </div>
                                    <h2 class="fw-bold text-dark mb-1">
                                        ₹{{ number_format($total_winnings ?? 4500.0, 2) }}
                                    </h2>
                                    <p class="text-success small mb-0 fw-semibold">
                                        <i class="fa-solid fa-arrow-trend-up me-1"></i> Ready to withdraw
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Transactions Management Card --}}
                    <div class="card border-0 shadow-sm rounded-4">

                        <div class="card-body p-4">

                            <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
                                <div>
                                    <h4 class="fw-bold mb-1">
                                        Transaction History
                                    </h4>
                                    <p class="text-muted small mb-0">
                                        Monitor your deposits, entries, and winnings.
                                    </p>
                                </div>
                            </div>

                            <hr class="text-muted opacity-25 mb-4">

                            {{-- Transactions Table --}}
                            <div class="table-responsive">
                                <table class="table table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th scope="col" class="py-3 px-4">Transaction ID</th>
                                            <th scope="col" class="py-3">Details</th>
                                            <th scope="col" class="py-3">Type</th>
                                            <th scope="col" class="py-3">Status</th>
                                            <th scope="col" class="py-3">Date</th>
                                            <th scope="col" class="py-3 text-end px-4">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($transactions ?? [] as $tx)
                                            <tr>
                                                <td class="px-4 text-muted fw-mono font-monospace small">
                                                    {{ $tx->transaction_id }}</td>
                                                <td>
                                                    <span class="fw-semibold text-dark">{{ $tx->description }}</span>
                                                </td>
                                                <td>
                                                    <span
                                                        class="badge {{ $tx->type == 'credit' ? 'bg-light-success text-success' : 'bg-light-danger text-danger' }} px-2 py-1 small rounded">
                                                        {{ ucfirst($tx->type) }}
                                                    </span>
                                                </td>
                                                <td>
                                                    @if ($tx->status == 'success')
                                                        <span
                                                            class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2">Success</span>
                                                    @elseif($tx->status == 'pending')
                                                        <span
                                                            class="badge bg-warning-subtle text-warning border border-warning-subtle rounded-pill px-2">Pending</span>
                                                    @else
                                                        <span
                                                            class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2">Failed</span>
                                                    @endif
                                                </td>
                                                <td class="text-muted small">{{ $tx->created_at->format('d M, Y') }}</td>
                                                <td
                                                    class="text-end px-4 fw-bold {{ $tx->type == 'credit' ? 'text-success' : 'text-dark' }}">
                                                    {{ $tx->type == 'credit' ? '+' : '-' }}₹{{ number_format($tx->amount, 2) }}
                                                </td>
                                            </tr>
                                        @empty
                                            {{-- Seamless Demo Fallback Rows --}}
                                            @php
                                                $demo_txs = [
                                                    [
                                                        'id' => 'TXN10984723',
                                                        'desc' => 'Contest Entry Fee - Cricket Mania',
                                                        'type' => 'debit',
                                                        'status' => 'success',
                                                        'date' => '03 Jul, 2026',
                                                        'amount' => '₹50.00',
                                                    ],
                                                    [
                                                        'id' => 'TXN10982194',
                                                        'desc' => 'Winnings - Mega Quiz Rank #2',
                                                        'type' => 'credit',
                                                        'status' => 'success',
                                                        'date' => '02 Jul, 2026',
                                                        'amount' => '₹500.00',
                                                    ],
                                                    [
                                                        'id' => 'TXN10976512',
                                                        'desc' => 'Added to wallet via UPI',
                                                        'type' => 'credit',
                                                        'status' => 'success',
                                                        'date' => '30 Jun, 2026',
                                                        'amount' => '₹1,000.00',
                                                    ],
                                                    [
                                                        'id' => 'TXN10961204',
                                                        'desc' => 'Bank Account Withdrawal',
                                                        'type' => 'debit',
                                                        'status' => 'pending',
                                                        'date' => '28 Jun, 2026',
                                                        'amount' => '₹2,000.00',
                                                    ],
                                                    [
                                                        'id' => 'TXN10950011',
                                                        'desc' => 'Contest Entry Fee - Tech Trivia',
                                                        'type' => 'debit',
                                                        'status' => 'failed',
                                                        'date' => '25 Jun, 2026',
                                                        'amount' => '₹100.00',
                                                    ],
                                                ];
                                            @endphp

                                            @foreach ($demo_txs as $demo)
                                                <tr>
                                                    <td class="px-4 text-muted fw-mono font-monospace small">
                                                        {{ $demo['id'] }}</td>
                                                    <td>
                                                        <span class="fw-semibold text-dark">{{ $demo['desc'] }}</span>
                                                    </td>
                                                    <td>
                                                        <span
                                                            class="badge {{ $demo['type'] == 'credit' ? 'bg-light-success text-success' : 'bg-light-danger text-danger' }} px-2 py-1 small rounded">
                                                            {{ ucfirst($demo['type']) }}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        @if ($demo['status'] == 'success')
                                                            <span
                                                                class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2">Success</span>
                                                        @elseif($demo['status'] == 'pending')
                                                            <span
                                                                class="badge bg-warning-subtle text-warning border border-warning-subtle rounded-pill px-2">Pending</span>
                                                        @else
                                                            <span
                                                                class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2">Failed</span>
                                                        @endif
                                                    </td>
                                                    <td class="text-muted small">{{ $demo['date'] }}</td>
                                                    <td
                                                        class="text-end px-4 fw-bold {{ $demo['type'] == 'credit' ? 'text-success' : 'text-dark' }}">
                                                        {{ $demo['type'] == 'credit' ? '+' : '-' }}{{ $demo['amount'] }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            {{-- Pagination --}}
                            @if (isset($transactions) && method_exists($transactions, 'links'))
                                <div class="mt-4">
                                    {{ $transactions->links() }}
                                </div>
                            @endif

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- Add Money Modal --}}
    <div class="modal fade" id="addMoneyModal" tabindex="-1" aria-labelledby="addMoneyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 shadow-lg">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold" id="addMoneyModalLabel">Add Money to Wallet</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('dashboard.wallet.add') }}" method="POST">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Amount (₹)</label>
                            <input type="number" name="amount" class="form-control form-control-lg rounded-3"
                                placeholder="Enter amount to add" min="1" max="10000" required>
                            <div class="form-text text-muted">Minimum amount is ₹1. Maximum single transaction is ₹10,000.
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light rounded-pill px-4"
                            data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary rounded-pill px-4">Proceed</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Withdraw Money Modal --}}
    <div class="modal fade" id="withdrawModal" tabindex="-1" aria-labelledby="withdrawModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 shadow-lg">

                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold" id="withdrawModalLabel">
                        Request Withdrawal
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>

                <form action="{{ route('dashboard.wallet.withdraw') }}" method="POST" enctype="multipart/form-data">

                    @csrf

                    <div class="modal-body p-4">

                        {{-- Amount --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                Amount to Withdraw (₹)
                            </label>

                            <input type="number" name="amount" id="withdrawAmount"
                                class="form-control form-control-lg rounded-3" placeholder="Enter amount (Min ₹100)"
                                min="100" step="0.01" required>

                            <div class="form-text text-muted">
                                Minimum withdrawal amount is ₹100.
                            </div>
                        </div>


                        {{-- TDS Information --}}
                        <div id="tdsInfoBox" class="alert alert-warning border-0 rounded-3 mb-3" style="display:none;">

                            <div class="d-flex align-items-start">
                                <i class="fa-solid fa-circle-info me-2 mt-1"></i>

                                <div class="w-100">
                                    <div class="fw-semibold mb-2">
                                        TDS Deduction
                                    </div>

                                    <div class="small mb-2">
                                        30% TDS will be deducted from your withdrawal amount.
                                    </div>

                                    <div class="d-flex justify-content-between small mb-1">
                                        <span>Withdrawal Amount</span>
                                        <strong>₹<span id="withdrawAmountDisplay">0.00</span></strong>
                                    </div>

                                    <div class="d-flex justify-content-between small mb-1">
                                        <span>TDS (30%)</span>
                                        <strong class="text-danger">
                                            - ₹<span id="tdsAmountDisplay">0.00</span>
                                        </strong>
                                    </div>

                                    <hr class="my-2">

                                    <div class="d-flex justify-content-between">
                                        <span class="fw-semibold">
                                            You Will Receive
                                        </span>

                                        <strong class="text-success">
                                            ₹<span id="netAmountDisplay">0.00</span>
                                        </strong>
                                    </div>
                                </div>
                            </div>
                        </div>


                        {{-- Payment Method --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                Payment Method
                            </label>

                            <select name="payment_method" id="payment_method" class="form-select rounded-3" required>

                                <option value="">Select Payment Method</option>
                                <option value="UPI">UPI ID</option>
                                <option value="Bank Transfer">
                                    Bank Transfer (A/C & IFSC)
                                </option>

                            </select>
                        </div>


                        {{-- ================= UPI SECTION ================= --}}
                        <div id="upiSection" style="display: none;">

                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    UPI ID
                                </label>

                                <input type="text" name="upi_id" id="upi_id" class="form-control rounded-3"
                                    placeholder="Enter UPI ID">
                            </div>


                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    UPI QR Code
                                </label>

                                <input type="file" name="upi_qr" id="upi_qr" class="form-control rounded-3"
                                    accept="image/png,image/jpeg,image/jpg">

                                <div class="form-text text-muted">
                                    Upload your UPI QR code image.
                                </div>
                            </div>

                        </div>


                        {{-- ================= BANK SECTION ================= --}}
                        <div id="bankSection" style="display: none;">

                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    Account Holder Name
                                </label>

                                <input type="text" name="account_holder_name" id="account_holder_name"
                                    class="form-control rounded-3" placeholder="Enter account holder name">
                            </div>


                            {{-- Bank Name --}}
                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    Bank Name
                                </label>

                                <input type="text" name="bank_name" id="bank_name" class="form-control rounded-3"
                                    placeholder="Enter bank name">
                            </div>


                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    Account Number
                                </label>

                                <input type="text" name="account_number" id="account_number"
                                    class="form-control rounded-3" placeholder="Enter account number">
                            </div>


                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    IFSC Code
                                </label>

                                <input type="text" name="ifsc" id="ifsc" class="form-control rounded-3"
                                    placeholder="Enter IFSC code" style="text-transform: uppercase;">
                            </div>


                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    Branch Name
                                </label>

                                <input type="text" name="branch" id="branch" class="form-control rounded-3"
                                    placeholder="Enter branch name">
                            </div>


                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    Bank Passbook Image
                                </label>

                                <input type="file" name="passbook_image" id="passbook_image"
                                    class="form-control rounded-3"
                                    accept="image/png,image/jpeg,image/jpg,application/pdf">

                                <div class="form-text text-muted">
                                    Upload your Bank Passbook image.
                                </div>
                            </div>

                        </div>

                    </div>


                    <div class="modal-footer border-0 pt-0">

                        <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-primary rounded-pill px-4">
                            Submit Request
                        </button>

                    </div>

                </form>
            </div>
        </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const paymentMethod = document.getElementById('payment_method');

            const upiSection = document.getElementById('upiSection');
            const bankSection = document.getElementById('bankSection');

            const upiId = document.getElementById('upi_id');
            const upiQr = document.getElementById('upi_qr');

            const accountHolderName = document.getElementById('account_holder_name');
            const bankName = document.getElementById('bank_name');
            const accountNumber = document.getElementById('account_number');
            const ifsc = document.getElementById('ifsc');
            const branch = document.getElementById('branch');
            const passbookImage = document.getElementById('passbook_image');


            paymentMethod.addEventListener('change', function() {

                // Hide both sections
                upiSection.style.display = 'none';
                bankSection.style.display = 'none';


                // Remove required
                upiId.required = false;
                upiQr.required = false;

                accountHolderName.required = false;
                bankName.required = false;
                accountNumber.required = false;
                ifsc.required = false;
                branch.required = false;


                // UPI
                if (this.value === 'UPI') {

                    upiSection.style.display = 'block';

                    upiId.required = true;
                    upiQr.required = true;
                }


                // Bank Transfer
                if (this.value === 'Bank Transfer') {

                    bankSection.style.display = 'block';

                    accountHolderName.required = true;
                    bankName.required = true;
                    accountNumber.required = true;
                    ifsc.required = true;
                    branch.required = true;
                }

            });

        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const amountInput = document.getElementById('withdrawAmount');

            const tdsInfoBox = document.getElementById('tdsInfoBox');

            const withdrawAmountDisplay =
                document.getElementById('withdrawAmountDisplay');

            const tdsAmountDisplay =
                document.getElementById('tdsAmountDisplay');

            const netAmountDisplay =
                document.getElementById('netAmountDisplay');

            let debounceTimer = null;

            amountInput.addEventListener('input', function() {

                const amount = parseFloat(this.value) || 0;

                if (amount > 0) {

                    // Show loading state immediately
                    withdrawAmountDisplay.textContent = amount.toFixed(2);
                    tdsAmountDisplay.textContent = '...';
                    netAmountDisplay.textContent = '...';
                    tdsInfoBox.style.display = 'block';

                    // Debounce the API call
                    clearTimeout(debounceTimer);
                    debounceTimer = setTimeout(function() {

                        fetch("{{ route('dashboard.wallet.calculate-tds') }}", {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json',
                            },
                            body: JSON.stringify({ amount: amount })
                        })
                        .then(res => res.json())
                        .then(data => {
                            withdrawAmountDisplay.textContent =
                                parseFloat(data.amount).toFixed(2);
                            tdsAmountDisplay.textContent =
                                parseFloat(data.tds_deducted).toFixed(2);
                            netAmountDisplay.textContent =
                                parseFloat(data.net_amount).toFixed(2);
                        })
                        .catch(() => {
                            // Fallback to 30% if API fails
                            const tds = amount * 0.30;
                            tdsAmountDisplay.textContent = tds.toFixed(2);
                            netAmountDisplay.textContent = (amount - tds).toFixed(2);
                        });

                    }, 400);

                } else {

                    tdsInfoBox.style.display = 'none';

                }
            });

        });
    </script>

    {{-- Withdraw Money Modal --}}
    {{-- <div class="modal fade" id="withdrawModal" tabindex="-1" aria-labelledby="withdrawModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 shadow-lg">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold" id="withdrawModalLabel">Request Withdrawal</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('dashboard.wallet.withdraw') }}" method="POST">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Amount to Withdraw (₹)</label>
                            <input type="number" name="amount" class="form-control form-control-lg rounded-3" placeholder="Enter amount (Min ₹100)" min="100" required>
                            <div class="form-text text-muted">Withdrawal will be deducted from your Winnings balance. Minimum ₹100.</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Payment Method</label>
                            <select name="payment_method" class="form-select rounded-3" required>
                                <option value="UPI">UPI ID</option>
                                <option value="Bank Transfer">Bank Transfer (A/C & IFSC)</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Payment Details</label>
                            <textarea name="payment_details" class="form-control rounded-3" rows="3" placeholder="Enter UPI ID or Bank A/C details (Account Number, Holder Name, IFSC)" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary rounded-pill px-4">Submit Request</button>
                    </div>
                </form>
            </div>
        </div>
    </div> --}}

    {{-- Mobile Sidebar --}}
    <div class="offcanvas offcanvas-start" tabindex="-1" id="dashboardSidebar">
        <div class="offcanvas-header">
            <h5>Dashboard Menu</h5>
            <button class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            @include('frontend.dashboard.sidebar')
        </div>
    </div>
@endsection