@extends('layouts.user')

@section('title')
    Deposit Funds
@endsection

@section('content')

<style>
    :root {
        --orange: #f97316;
        --orange-dim: rgba(249,115,22,0.10);
        --orange-glow: rgba(249,115,22,0.22);
        --green: #10b981;
        --green-dim: rgba(16,185,129,0.09);
        --red: #ef4444;
        --amber: #f59e0b;
        --card-bg: #ffffff;
        --card-border: rgba(0,0,0,0.07);
        --muted: #94a3b8;
        --radius: 16px;
        --radius-sm: 10px;
        --shadow: 0 4px 24px rgba(0,0,0,0.07);
        --shadow-lg: 0 8px 36px rgba(0,0,0,0.13);
        --ease: cubic-bezier(.4,0,.2,1);
    }
    .dark {
        --card-bg: #0f172a;
        --card-border: rgba(255,255,255,0.07);
        --shadow: 0 4px 24px rgba(0,0,0,0.4);
        --shadow-lg: 0 8px 36px rgba(0,0,0,0.55);
    }

    /* ── sidebar ── */
    .sidebar-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        border: 1px solid var(--card-border);
        padding: 1.5rem;
    }
    .avatar-ring {
        width: 6rem; height: 6rem; border-radius: 50%;
        padding: 3px;
        background: linear-gradient(135deg, var(--orange), #660066);
        display: inline-block;
    }
    .avatar-ring img {
        width: 100%; height: 100%; border-radius: 50%;
        border: 3px solid var(--card-bg);
        object-fit: cover; display: block;
    }

    /* ── balance tile ── */
    .balance-tile {
        background: linear-gradient(135deg, var(--orange) 0%, #c2440a 100%);
        border-radius: var(--radius);
        padding: 1.5rem 1.75rem;
        color: #fff;
        box-shadow: 0 6px 28px var(--orange-glow);
        position: relative; overflow: hidden;
        margin-bottom: 1.25rem;
    }
    .balance-tile::after {
        content: '';
        position: absolute; top: -40px; right: -40px;
        width: 140px; height: 140px; border-radius: 50%;
        background: rgba(255,255,255,0.07); pointer-events: none;
    }
    .bal-label  { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: .75; }
    .bal-amount { font-size: 2.1rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin: .35rem 0 .5rem; }
    .bal-sub    { font-size: .72rem; opacity: .7; display: flex; align-items: center; gap: .5rem; }
    .sdot { width: 7px; height: 7px; border-radius: 50%; background: #fff; display: inline-block; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
    .sdot.on  { animation: pulse 2s ease-in-out infinite; }
    .sdot.off { background: rgba(255,255,255,.38); }

    /* ── deposit form card ── */
    .dep-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow);
        overflow: hidden;
        margin-bottom: 1.5rem;
    }
    .dep-card-header {
        padding: 1.1rem 1.5rem;
        border-bottom: 1px solid var(--card-border);
        display: flex; align-items: center; gap: .5rem;
    }
    .dep-card-title { font-size: .9rem; font-weight: 800; }
    .dep-card-body  { padding: 1.5rem; }

    /* method select */
    .method-label {
        font-size: .78rem; font-weight: 600;
        color: var(--muted); margin-bottom: .6rem; display: block;
    }
    .method-select {
        width: 100%; padding: .75rem 1rem;
        border-radius: var(--radius-sm);
        border: 1.5px solid var(--card-border);
        background: var(--card-bg); color: inherit;
        font-size: .85rem; font-weight: 600; outline: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right .85rem center;
        cursor: pointer;
        transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
        margin-bottom: 1.1rem;
    }
    .method-select:focus {
        border-color: var(--orange);
        box-shadow: 0 0 0 3px var(--orange-dim);
    }

    /* amount input */
    .amount-wrap {
        border-radius: var(--radius-sm);
        border: 1.5px solid var(--card-border);
        padding: .85rem 1rem;
        display: flex; align-items: center; gap: .5rem;
        transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
        margin-bottom: 1.25rem;
    }
    .amount-wrap:focus-within {
        border-color: var(--orange);
        box-shadow: 0 0 0 3px var(--orange-dim);
    }
    .amount-sym { font-size: 1.4rem; font-weight: 800; color: var(--orange); flex-shrink: 0; }
    .amount-inp {
        flex: 1; border: none; outline: none; background: transparent;
        font-size: 1.4rem; font-weight: 800; color: inherit; min-width: 0;
    }
    .amount-inp::placeholder { color: var(--muted); font-weight: 400; font-size: 1rem; }
    .amount-cur { font-size: .72rem; font-weight: 800; color: var(--muted); letter-spacing: .05em; flex-shrink: 0; }

    /* submit button */
    .deposit-btn {
        width: 100%; padding: .78rem;
        border-radius: var(--radius-sm); border: none;
        background: var(--orange); color: #fff;
        font-size: .9rem; font-weight: 800; letter-spacing: .01em;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center; gap: .5rem;
        transition: background .18s var(--ease), transform .15s, box-shadow .18s;
        box-shadow: 0 3px 14px var(--orange-glow);
    }
    .deposit-btn:hover {
        background: #ea6c0a; transform: translateY(-1px);
        box-shadow: 0 5px 20px var(--orange-glow);
    }

    /* ── history table ── */
    .hist-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow);
        overflow: hidden;
    }
    .hist-card-header {
        padding: 1.1rem 1.5rem;
        border-bottom: 1px solid var(--card-border);
    }
    .sh {
        font-size: .9rem; font-weight: 800;
        display: flex; align-items: center; gap: .45rem;
    }
    .sh::before {
        content: ''; width: 3px; height: .95rem;
        border-radius: 2px; background: var(--orange); flex-shrink: 0;
    }
    .dep-tbl { width: 100%; border-collapse: collapse; font-size: .78rem; }
    .dep-tbl th {
        padding: .65rem 1rem; text-align: left;
        font-size: .65rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .07em; color: var(--muted);
        background: rgba(248,250,252,.9);
        border-bottom: 1px solid var(--card-border);
    }
    .dark .dep-tbl th { background: rgba(15,23,42,.9); }
    .dep-tbl td { padding: .75rem 1rem; border-bottom: 1px solid var(--card-border); vertical-align: middle; }
    .dep-tbl tr:last-child td { border-bottom: none; }
    .dep-tbl tr:hover td { background: rgba(249,115,22,.025); }
    .amt-cell { font-weight: 800; font-size: .88rem; }
    .amt-cell span { font-size: .65rem; font-weight: 700; color: var(--muted); margin-left: .2rem; }
    .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 99px; font-size: .68rem; font-weight: 700; }
    .chip-ok  { background: var(--green-dim); color: var(--green); }
    .chip-bad { background: rgba(239,68,68,.1); color: var(--red); }
    .chip-pnd { background: rgba(245,158,11,.1); color: var(--amber); }
    .view-a   { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700; color: var(--orange); text-decoration: none; }
    .view-a:hover { text-decoration: underline; }

    .empty-dep {
        text-align: center; padding: 2.5rem 1rem;
        color: var(--muted); font-size: .82rem;
    }
</style>

<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">

    {{-- Banner --}}
    <div class="relative md:container container-fluid">
        <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-cover bg-center"
            style="background-image: url('{{ asset('images/profile-1.jpg') }}');">
            <div style="position:absolute;inset:0;background:linear-gradient(135deg,rgba(249,115,22,0.35),rgba(102,0,102,0.45));"></div>
        </div>
    </div>

    <div class="container relative mt-16 md:mt-24">
        <div class="md:flex" style="gap:1.5rem;">

            {{-- Sidebar --}}
            <div class="lg:w-1/4 md:w-1/3 md:px-0">
                <div class="relative" style="margin-top:-7rem;">
                    <div class="sidebar-card">
                        <div class="mb-5 text-center">
                            <div class="flex justify-center mb-4">
                                <span class="avatar-ring">
                                    <img src="{{ asset('images/avatar-1.png') }}" id="profile-image" alt="avatar">
                                </span>
                            </div>
                            <h5 class="text-base font-bold">{{ auth()->user()->username }}</h5>
                            <p class="text-xs mt-1" style="color:var(--muted);">{{ auth()->user()->email }}</p>
                        </div>
                        <x-side-nav />
                    </div>
                </div>
            </div>

            {{-- Main content --}}
            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-0 md:mt-0" style="display:flex;flex-direction:column;gap:0;">

                <x-alert />

                {{-- Balance tile --}}
                <div class="balance-tile">
                    <div class="bal-label">Main Balance</div>
                    <div class="bal-amount">
                        ${{ number_format(auth()->user()->balance, 2) }}
                        <span style="font-size:1rem;font-weight:600;opacity:.7;">USDT</span>
                    </div>
                    <div class="bal-sub">
                        <span class="sdot {{ auth()->user()->balance > 0 ? 'on' : 'off' }}"></span>
                        {{ auth()->user()->balance > 0 ? 'Active' : 'In-Active' }}
                        <span style="opacity:.4;">·</span>
                        {{ now()->format('d F Y') }}
                    </div>
                </div>

                {{-- Deposit form --}}
                <div class="dep-card">
                    <div class="dep-card-header">
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="var(--orange)" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                        <span class="dep-card-title">Deposit Funds</span>
                    </div>
                    <div class="dep-card-body">

                        <form method="post" action="{{ route('submit.payment') }}">
                            @csrf

                            <label class="method-label">Select payment method</label>
                            <select name="currency" class="method-select">
                                <option value="usdttrc20">USDT TRC20 — TRX Network</option>
                                <option value="usdtsol">USDT SOL — Solana Network</option>
                            </select>

                            <label class="method-label">Enter amount</label>
                            <div class="amount-wrap">
                                <span class="amount-sym">$</span>
                                <input type="number" id="amount" name="amount" min="20" required
                                    class="amount-inp" placeholder="0.00">
                                <span class="amount-cur">USDT</span>
                            </div>

                            <button type="submit" class="deposit-btn">
                                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                                Deposit Funds
                            </button>
                        </form>

                    </div>
                </div>

                {{-- History --}}
                <div class="hist-card">
                    <div class="hist-card-header">
                        <span class="sh">My Deposit History</span>
                    </div>
                    <div style="overflow-x:auto;">
                        <table class="dep-tbl">
                            <thead>
                                <tr>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($deposits as $deposit)
                                <tr>
                                    <td>
                                        <span class="amt-cell">
                                            + {{ number_format($deposit->amount, 2) }}
                                            <span>USDT</span>
                                        </span>
                                    </td>
                                    <td>
                                        @if($deposit->status == 1)
                                            <span class="chip chip-ok">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                                Completed
                                            </span>
                                        @elseif($deposit->status == 2)
                                            <span class="chip chip-bad">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                                Failed
                                            </span>
                                        @else
                                            <span class="chip chip-pnd">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M12 8v4l2 2"/></svg>
                                                Pending...
                                            </span>
                                        @endif
                                    </td>
                                    <td style="color:var(--muted);font-size:.72rem;">{{ $deposit->created_at->format('d F Y') }}</td>
                                    <td>
                                        <a href="{{ route('payment_info', $deposit->id) }}" class="view-a">
                                            View
                                            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                                        </a>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4">
                                        <div class="empty-dep">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="none" viewBox="0 0 24 24" stroke="var(--muted)" stroke-width="1.2" style="margin:0 auto 0.75rem;display:block;"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                                            No deposits yet.
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

@endsection