@extends('Admin.layout')

@section('navlink')
    <a href="#" class="link-secondary text-decoration-none">Home</a>
    <span class="mx-1">/</span>
    <span>Dashboard</span>
@endsection

@section('content')

<style>
    .dashboard-page {
        color: var(--parchment);
    }

    /* Statistics */
    .dashboard-stats {
        background: var(--ink-soft);
        border: 1px solid rgba(201, 154, 59, .2);
        border-radius: 12px;
        overflow: hidden;
    }

    .stat-item {
        position: relative;
        padding: 17px 10px;
        min-height: 112px;
        text-align: center;
        transition: background .2s ease;
    }

    .stat-item:hover {
        background: rgba(201, 154, 59, .07);
    }

    .stat-item::after {
        content: "";
        position: absolute;
        top: 20%;
        right: 0;
        height: 60%;
        width: 1px;
        background: rgba(201, 154, 59, .2);
    }

    .stat-icon {
        color: var(--gold-hi);
        font-size: 21px;
        margin-bottom: 5px;
    }

    .stat-value {
        color: var(--parchment);
        font-size: clamp(16px, 1.5vw, 22px);
        font-weight: 700;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .stat-label {
        color: #a69b85;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .6px;
        margin-top: 3px;
    }

    /* Dashboard sections */
    .dashboard-panel {
        height: 100%;
        background: var(--ink-soft);
        border: 1px solid rgba(201, 154, 59, .2);
        border-radius: 12px;
        overflow: hidden;
    }

    .panel-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 16px;
        border-bottom: 1px solid rgba(201, 154, 59, .16);
    }

    .panel-title {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--parchment);
    }

    .panel-title i {
        color: var(--gold-hi);
        margin-right: 7px;
        font-size: 17px;
        vertical-align: -2px;
    }

    .panel-body {
        padding: 15px;
    }

    /* Converter */
    .converter-rate {
        color: #a69b85;
        font-size: 11px;
    }

    .converter-field {
        background: var(--ink);
        border: 1px solid rgba(201, 154, 59, .25);
        border-radius: 8px;
        padding: 10px 12px;
    }

    .converter-field:focus-within {
        border-color: var(--gold);
        box-shadow: 0 0 0 2px rgba(201, 154, 59, .1);
    }

    .converter-label {
        display: block;
        color: #a69b85;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .6px;
        margin-bottom: 5px;
    }

    .converter-input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--parchment);
        font-size: 19px;
        font-weight: 700;
    }

    .converter-currency {
        color: var(--gold-hi);
        font-size: 12px;
        font-weight: 700;
    }

    .converter-swap {
        display: flex;
        justify-content: center;
        margin: 19px ;
        position: relative;
        z-index: 1;
    }

    .converter-swap button {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid var(--gold-dim);
        background: var(--charcoal);
        color: var(--gold-hi);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .2s;
    }

    .converter-swap button:hover {
        background: var(--gold);
        color: var(--ink);
        transform: rotate(180deg);
    }

    .converter-result {
        color: var(--gold-hi);
        font-size: 12px;
        margin-top: 10px;
    }

    /* Quick links */
    .quick-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .quick-link {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 11px 10px;
        border: 1px solid rgba(201, 154, 59, .18);
        border-radius: 8px;
        color: var(--parchment);
        text-decoration: none;
        background: rgba(255, 255, 255, .015);
        transition: .2s ease;
    }

    .quick-link:hover {
        border-color: var(--gold);
        background: rgba(201, 154, 59, .08);
        color: var(--gold-hi);
        transform: translateY(-1px);
    }

    .quick-link-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(201, 154, 59, .1);
        color: var(--gold-hi);
        font-size: 17px;
    }

    .quick-link-text {
        min-width: 0;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.35;
    }

    /* Login history */
    .login-table {
        --bs-table-bg: transparent;
        --bs-table-color: var(--parchment);
        --bs-table-border-color: rgba(201, 154, 59, .12);
        margin-bottom: 0;
        font-size: 11px;
        white-space: nowrap;
    }

    .login-table th {
        color: #a69b85;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
        padding: 9px 10px;
    }

    .login-table td {
        padding: 10px;
        vertical-align: middle;
    }

    .login-device {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .login-device i {
        color: var(--gold-hi);
        font-size: 16px;
    }

    .login-status {
        display: inline-block;
        padding: 3px 7px;
        border-radius: 20px;
        color: #7ed6a0;
        background: rgba(56, 161, 105, .12);
        font-size: 10px;
        font-weight: 600;
    }

    .login-status.failed {
        color: #f19a9a;
        background: rgba(220, 53, 69, .12);
    }

    .history-scroll {
        overflow-x: auto;
    }

    @media (max-width: 767.98px) {
        .stat-item {
            min-height: 105px;
            padding: 15px 7px;
        }

        .stat-item:nth-child(2n)::after {
            display: none;
        }

        .dashboard-page .row.g-3 {
            --bs-gutter-y: .75rem;
        }
    }

    @media (min-width: 768px) and (max-width: 1199.98px) {
        .stat-item:nth-child(3n)::after {
            display: none;
        }
    }

    @media (min-width: 1200px) {
        .stat-item:last-child::after {
            display: none;
        }
    }
</style>

<div class="dashboard-page">

    <!-- Page heading -->
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <div>
            <h1 class="h4 mb-1">Dashboard</h1>
        </div>
        <span class="small text-secondary">
            <i class="ti ti-calendar-event me-1"></i>
            {{ now()->format('d M Y') }}
        </span>
    </div>

    <!-- Statistics -->
    <div class="row g-0 dashboard-stats card-animated-border mb-3">

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-item">
                <div class="stat-icon"><i class="ti ti-users"></i></div>
                <div class="stat-value">12,580</div>
                <div class="stat-label">Total Users</div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-item">
                <div class="stat-icon"><i class="ti ti-chart-line"></i></div>
                <div class="stat-value">₹2,45,600</div>
                <div class="stat-label">Level Income</div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-item">
                <div class="stat-icon"><i class="ti ti-chart-pie"></i></div>
                <div class="stat-value">₹1,85,400</div>
                <div class="stat-label">Profit Income</div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-item">
                <div class="stat-icon"><i class="ti ti-trophy"></i></div>
                <div class="stat-value">₹85,200</div>
                <div class="stat-label">Rank Income</div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-item">
                <div class="stat-icon"><i class="ti ti-wallet"></i></div>
                <div class="stat-value">₹5,68,900</div>
                <div class="stat-label">Total Wallet</div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-item">
                <div class="stat-icon"><i class="ti ti-cash"></i></div>
                <div class="stat-value">₹3,25,000</div>
                <div class="stat-label">Total Withdrawals</div>
            </div>
        </div>

    </div>

    <!-- Bottom dashboard sections -->
    <div class="row g-3">

        <!-- USDT Converter -->
        <div class="col-12 col-lg-4">
            <div class="dashboard-panel">
                <div class="panel-heading">
                    <h2 class="panel-title">
                        <i class="ti ti-arrows-exchange"></i>
                        USDT Converter
                    </h2>
                    <span class="badge text-bg-dark border border-secondary-subtle">Demo rate</span>
                </div>

                <div class="panel-body">
                    <div class="converter-rate mb-3">
                        1 USDT = ₹<span id="usdtRate">83.00</span>
                    </div>

                    <div class="converter-field">
                        <label class="converter-label" for="usdtAmount">USDT</label>
                        <div class="d-flex align-items-center gap-2">
                            <input type="number"
                                   id="usdtAmount"
                                   class="converter-input"
                                   value="100"
                                   min="0"
                                   step="any"
                                   inputmode="decimal">
                            <span class="converter-currency">USDT</span>
                        </div>
                    </div>

                    <div class="converter-swap">
                        <button type="button" id="swapConverter" aria-label="Swap currencies">
                            <i class="ti ti-arrows-up-down"></i>
                        </button>
                    </div>

                    <div class="converter-field">
                        <label class="converter-label" for="inrAmount">Indian Rupee</label>
                        <div class="d-flex align-items-center gap-2">
                            <input type="text"
                                   id="inrAmount"
                                   class="converter-input"
                                   value="8,300.00"
                                   inputmode="decimal">
                            <span class="converter-currency">INR</span>
                        </div>
                    </div>

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

       <!-- Quick Links -->
<div class="col-12 col-lg-4">
    <div class="dashboard-panel">
        <div class="panel-heading">
            <h2 class="panel-title">
                <i class="ti ti-layout-grid"></i>
                Quick Links
            </h2>
        </div>

        <div class="panel-body">
            <div class="quick-links">

                <a href="{{ route('user_management') }}" class="quick-link">
                    <span class="quick-link-icon">
                        <i class="ti ti-users"></i>
                    </span>
                    <span class="quick-link-text">User Management</span>
                </a>

                <a href="{{ route('package_report') }}" class="quick-link">
                    <span class="quick-link-icon">
                        <i class="ti ti-package"></i>
                    </span>
                    <span class="quick-link-text">Packages</span>
                </a>

                <a href="{{ route('wallet_deposit_report') }}" class="quick-link">
                    <span class="quick-link-icon">
                        <i class="ti ti-wallet"></i>
                    </span>
                    <span class="quick-link-text">Wallet Deposits</span>
                </a>

                <a href="{{ route('withdraw_report') }}" class="quick-link">
                    <span class="quick-link-icon">
                        <i class="ti ti-cash"></i>
                    </span>
                    <span class="quick-link-text">Withdrawals</span>
                </a>

                <a href="{{ route('level_income') }}" class="quick-link">
                    <span class="quick-link-icon">
                        <i class="ti ti-chart-bar"></i>
                    </span>
                    <span class="quick-link-text">Level Income</span>
                </a>

                <a href="{{ route('rank_income') }}" class="quick-link">
                    <span class="quick-link-icon">
                        <i class="ti ti-trophy"></i>
                    </span>
                    <span class="quick-link-text">Rank Income</span>
                </a>

                <a href="{{ route('profit_income_report') }}" class="quick-link">
                    <span class="quick-link-icon">
                        <i class="ti ti-chart-pie"></i>
                    </span>
                    <span class="quick-link-text">Profit Income</span>
                </a>

                

                <a href="{{ route('purchase_package_report') }}" class="quick-link">
                    <span class="quick-link-icon">
                        <i class="ti ti-shopping-cart"></i>
                    </span>
                    <span class="quick-link-text">Purchase Package</span>
                </a>

             
            </div>
        </div>
    </div>
</div>
        <!-- Admin Login History -->
        <div class="col-12 col-lg-4">
            <div class="dashboard-panel">
                <div class="panel-heading">
                    <h2 class="panel-title">
                        <i class="ti ti-history"></i>
                        Admin Login History
                    </h2>
                    <span class="badge rounded-pill text-bg-dark border border-secondary-subtle">
                        Last 5
                    </span>
                </div>

                <div class="history-scroll">
                    <table class="table login-table">
                        <thead>
                            <tr>
                                <th>Device / IP</th>
                                <th>Date</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="login-device">
                                        <i class="ti ti-device-laptop"></i>
                                        <span>Chrome / Windows</span>
                                    </div>
                                    <small class="text-secondary">192.168.1.10</small>
                                </td>
                                <td>29 Sep, 12:30</td>
                                <td><span class="login-status">Success</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="login-device">
                                        <i class="ti ti-device-mobile"></i>
                                        <span>Chrome / Android</span>
                                    </div>
                                    <small class="text-secondary">192.168.1.11</small>
                                </td>
                                <td>28 Sep, 18:45</td>
                                <td><span class="login-status">Success</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="login-device">
                                        <i class="ti ti-device-laptop"></i>
                                        <span>Edge / Windows</span>
                                    </div>
                                    <small class="text-secondary">192.168.1.12</small>
                                </td>
                                <td>28 Sep, 10:20</td>
                                <td><span class="login-status">Success</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="login-device">
                                        <i class="ti ti-device-laptop"></i>
                                        <span>Firefox / Linux</span>
                                    </div>
                                    <small class="text-secondary">192.168.1.13</small>
                                </td>
                                <td>27 Sep, 16:10</td>
                                <td><span class="login-status failed">Failed</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="login-device">
                                        <i class="ti ti-device-laptop"></i>
                                        <span>Chrome / Windows</span>
                                    </div>
                                    <small class="text-secondary">192.168.1.10</small>
                                </td>
                                <td>27 Sep, 09:05</td>
                                <td><span class="login-status">Success</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const usdtInput = document.getElementById('usdtAmount');
    const inrInput = document.getElementById('inrAmount');
    const swapButton = document.getElementById('swapConverter');

    const rate = 83;
    let reversed = false;

    function formatNumber(value) {
        return Number(value).toLocaleString('en-IN', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    function updateConverter() {
        const amount = parseFloat(reversed ? inrInput.value.replace(/,/g, '') : usdtInput.value);

        if (!Number.isFinite(amount) || amount < 0) {
            if (reversed) usdtInput.value = '';
            else inrInput.value = '';
            return;
        }

        if (reversed) {
            usdtInput.value = formatNumber(amount / rate);
        } else {
            inrInput.value = formatNumber(amount * rate);
        }
    }

    usdtInput.addEventListener('input', function () {
        reversed = false;
        updateConverter();
    });

    inrInput.addEventListener('input', function () {
        reversed = true;
        updateConverter();
    });

    swapButton.addEventListener('click', function () {
        reversed = !reversed;

        const usdtValue = parseFloat(usdtInput.value.replace(/,/g, '')) || 0;
        const inrValue = parseFloat(inrInput.value.replace(/,/g, '')) || 0;

        if (reversed) {
            inrInput.value = formatNumber(usdtValue);
            usdtInput.value = formatNumber(inrValue / rate);
        } else {
            usdtInput.value = formatNumber(inrValue);
            inrInput.value = formatNumber(usdtValue * rate);
        }
    });

    updateConverter();
});
</script>

@endsection