@extends('layouts.UserDashboard')
@section('user')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Income</h4>
                <div class="page-title-right">
                    <a href="{{ route('user.dashboard') }}" class="btn btn-secondary btn-sm">
                        ← Back
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <!-- Credit Card Style Balance Card -->
    <div class="row justify-content-center mb-4">
        <div class="col-lg-6 col-md-8">
            <div class="card shadow-lg border-0 rounded-4 text-white"
                style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="mb-0">My Balance</h5>
                        <i class="mdi mdi-credit-card-outline fs-2"></i>
                    </div>

                    <h2 class="fw-bold mb-2">

                        {{ number_format($user->total_dollar, 2) }}

                    </h2>
                    <div class="d-flex justify-content-between">
                        <div>
                            <small class="d-block text-white-50">Card Holder</small>
                            <span class="fw-semibold">{{ Auth::user()->name }}</span>
                        </div>
                        @if ($bank)
                            <div class="text-end">
                                <small class="d-block text-white-50">Account No</small>
                                <span class="fw-semibold">**** **** **** {{ substr($bank->account_number, -4) }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Transfer / Exchange Section -->
    <div class="row justify-content-center mt-5">
        <div class="col-lg-6 col-md-8">
            <div class="card shadow-lg border-0 rounded-4"
                style="background: linear-gradient(135deg, #f0f4ff 0%, #d9e2ff 100%);">
                <div class="card-body text-center py-5">
                    <h5 class="card-title mb-4 text-primary fw-bold" style="letter-spacing: 1px;">Manage Your Funds</h5>

                    <div class="d-flex justify-content-center gap-4 flex-wrap">
                        <!-- Transfer Button -->

                        @if ($gen->transfer_status == 1)
                            <a href="{{ route('user.transfer.coin') }}"
                                class="btn btn-primary d-flex align-items-center px-5 py-3 shadow-lg rounded-3 text-white"
                                style="transition: transform 0.3s, box-shadow 0.3s;"
                                onmouseover="this.style.transform='translateY(-3px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.2)';"
                                onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.15)';">
                                <i class="mdi mdi-arrow-top-right-bold-outline fs-5 me-2"></i> Transfer
                            </a>
                        @endif

                        <!-- Exchange Gold Coins Button -->
                        {{-- <a href=""
                           class="btn btn-warning d-flex align-items-center px-5 py-3 shadow-lg rounded-3 text-white"
                           style="transition: transform 0.3s, box-shadow 0.3s;"
                           onmouseover="this.style.transform='translateY(-3px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.2)';"
                           onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.15)';">
                            <i class="mdi mdi-currency-usd-circle fs-5 me-2"></i> Exchange Gold Coins
                        </a> --}}
                        <a href="javascript:void(0);" onclick="togglePackageTable()"
                            class="btn btn-warning d-flex align-items-center px-5 py-3 shadow-lg rounded-3 text-white">
                            <i class="mdi mdi-currency-usd-circle fs-5 me-2"></i> Exchange Gold Coins
                        </a>
                    </div>

                    <p class="mt-4 text-muted">Quickly transfer your funds or convert your gold coins into balance</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-center mt-4" id="packageSection" style="display: none;">
        <div class="col-lg-12">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-primary"><i class="mdi mdi-package-variant-closed me-2"></i>Available Coin Packages
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-4">Package Name</th>
                                    <th class="text-center">Coins Received</th>
                                    <th class="text-center">Price (USD)</th>
                                    <th class="text-end pe-4">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($packages as $package)
                                    <tr>
                                        <td class="ps-4">
                                            <span class="fw-bold text-dark">{{ $package->name }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-soft-warning text-dark border border-warning px-3">
                                                🪙 {{ number_format($package->coin) }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <span
                                                class="fw-semibold text-success">${{ number_format($package->amount, 2) }}</span>
                                        </td>
                                        <td class="text-end pe-4">
                                            @if ($user->total_dollar >= $package->amount)
                                                <form action="{{ route('user.purchase.package') }}" method="POST">
                                                    @csrf
                                                    <input type="hidden" name="package_id" value="{{ $package->id }}">
                                                    <button type="submit" class="btn btn-primary btn-sm px-4 rounded-pill">
                                                        Buy Now
                                                    </button>
                                                </form>
                                            @else
                                                <button class="btn btn-secondary btn-sm px-4 rounded-pill disabled"
                                                    title="Insufficient Balance">
                                                    Low Balance
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-4 text-muted">No
                                            packages available at the moment.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function togglePackageTable() {
            var x = document.getElementById("packageSection");
            if (x.style.display === "none") {
                x.style.display = "block";
                // Smooth scroll to table
                x.scrollIntoView({
                    behavior: 'smooth'
                });
            } else {
                x.style.display = "none";
            }
        }
    </script>

    <style>
        .mdi-coin {
            filter: drop-shadow(0 0 2px rgba(255, 193, 7, 0.5));
        }
    </style>
@endsection