@extends('Admin.layout')

<style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .page-header h5 {
        font-weight: 600;
    }

    /* ================= BUTTON ================= */
    #copyReferralBtn {
        border-radius: 10px;
        padding: 10px 18px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    #copyReferralBtn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    /* ================= TICKER ================= */
    .ticker-wrapper {
        overflow: hidden;
        position: relative;
        border-radius: 12px;
        background: linear-gradient(135deg, #0A1F44, #0A1F44);
        color: #fff;
    }

    .ticker-text {
        display: inline-block;
        white-space: nowrap;
        padding: 10px 0;
        animation: tickerMove 12s linear infinite;
        font-weight: 500;
    }

    @keyframes tickerMove {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    /* ================= STAT CARD ================= */
    .stat-card {
        position: relative;
        border-radius: 16px;
        transition: all 0.3s ease;
        background: #fff;
    }

    .stat-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    }

    /* .stat-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        border-radius: 16px 0 0 16px;
        background: linear-gradient(to bottom, #c9a227, #1a1a1a);
    } */
    .stat-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(500px 220px at 30% 10%, rgba(0, 220, 255, .18), transparent 55%), radial-gradient(520px 220px at 70% 80%, rgba(140, 90, 255, .16), transparent 60%) !important;
        opacity: .7;
        pointer-events: none;
    }


    .stat-card h5 {
        font-size: 22px;
    }

    .stat-card h6 {
        font-size: 13px;
        color: #95a5a6;
    }

    /* ================= ICON ================= */
    .avatar-initial {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-size: 20px;
    }

    .bg-label-success {
        background: rgba(40, 167, 69, 0.1);
        color: #28a745;
    }

    .bg-label-danger {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
    }

    /* ================= GOLD RATE CARD ================= */
    .gold-card {
        border-radius: 16px;
        background: linear-gradient(135deg, #fff8e1, #fff);
        border-left: 5px solid #c9a227;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    }

    .gold-card h5 {
        font-weight: 600;
        color: #c9a227;
    }

    .apexcharts-text tspan {
        fill: currentColor !important;
        font-weight: bold !important;
    }

    .apexcharts-legend-text {
        color: currentColor !important;
        font-weight: bold !important;

    }

    .card-img {
        height: 300px;
    }

    .slider {
        border-radius: 15px;
        overflow: hidden;
    }

    .slider-img {
        height: 300px;
        object-fit: cover;
    }

    /* Optional: smooth shadow */
    .slider {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }
</style>
<style>
    /* Unique Card Name */
    .goldx-card {
        /* background: #000 !important; */
        border-radius: 16px;
        padding: 18px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }

    .goldx-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
    }

    .goldx-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(500px 220px at 30% 10%, rgba(0, 220, 255, .18), transparent 55%), radial-gradient(520px 220px at 70% 80%, rgba(140, 90, 255, .16), transparent 60%) !important;
        opacity: .7;
        pointer-events: none;
    }

    .goldx-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #444;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .goldx-title {
        font-size: 16px;
        font-weight: 600;
    }

    .goldx-sub {
        font-size: 12px;
        color: #aaa;
    }

    .goldx-toggle {
        display: flex;
        gap: 20px;
        margin: 12px 0;
    }

    .goldx-toggle span {
        cursor: pointer;
        color: #aaa;
    }

    .goldx-active {
        color: #00d26a;
        font-weight: 600;
    }

    .goldx-inputbox {
        border: 1px solid #333;
        border-radius: 12px;
        padding: 15px;
        margin-top: 10px;
    }

    .goldx-inputrow {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .goldx-inputrow input {
        background: transparent;
        border: none;
        /* color:#fff; */
        font-size: 22px;
        width: 120px;
        outline: none;
    }

    .goldx-price {
        font-size: 16px;
        /* color:#ddd; */
    }

    .goldx-meta {
        font-size: 11px;
        color: #aaa;
        margin-top: 6px;
    }

    .goldx-live {
        color: #ff4d6d;
    }

    .goldx-badges {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    .goldx-badge {
        border: 1px solid #7c3aed;
        padding: 6px 12px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
    }

    .goldx-badge.active {
        background: #7c3aed;
        color: white !important;
    }

    .img-fluid.ad-img {
        height: 125px !important;
        width: 100% !important;
    }

    .graph-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(500px 220px at 30% 10%, rgba(0, 220, 255, .18), transparent 55%), radial-gradient(520px 220px at 70% 80%, rgba(140, 90, 255, .16), transparent 60%) !important;
        opacity: .7;
        pointer-events: none;
    }
</style>
@section('content')
 @php
    $user = Auth::guard('admin')->user();
    @endphp
    <div class="page-header mb-3">
        <h5>Coin Admin</h5>
 @if(!$user->hasRole('staff'))
        <button class="btn btn-primary" id="copyReferralBtn">
            <i class="ti tabler-link"></i> &nbsp;Refer
        </button>
  @endif
        <input type="hidden" id="referralLink" value="{{ $referralLink }}">
    </div>

    <!-- ================= TICKER ================= -->
    <div class="ticker-wrapper px-3">
        <div class="ticker-text">
            @foreach($newsList as $news)
                {{ $news->description }}
            @endforeach
        </div>
    </div>
 
    <!-- ================= STATS ================= -->
    <div class="row g-3 mt-3">
    @if(!$user->hasRole('staff'))
        <div class="col-lg-3 col-sm-6">
            <div class="card stat-card shadow-sm border-0 h-100 rounded-3">

                <div class="card-body">

                    <!-- HEADER -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <small class="fw-semibold text-muted mb-0">
                            <i class="ti tabler-user-check me-1"></i> Total Users
                        </small>

                        <a href="{{route('user_table')}}" class="fs-4 fw-bold text-dark text-decoration-none">
                            <small> {{ number_format($totalUsers) }}</small>
                        </a>
                    </div>

                    <!-- DIVIDER -->
                    <hr class="my-2">

                    <!-- STATS -->
                    <div class="row text-center mt-3">

                        <div class="col-6">
                            <small class="text-muted d-block">Not Purchased</small>
                            <a href="#" class="fw-semibold fs-5 text-danger text-decoration-none">
                                {{ number_format($notPurchasedUsers) }}
                            </a>
                        </div>

                        <div class="col-6">
                            <small class="text-muted d-block">Purchased</small>
                            <a href="#" class="fw-semibold fs-5 text-success text-decoration-none">
                                {{ number_format($purchasedUsers) }}
                            </a>
                        </div>

                    </div>

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


        <div class="col-lg-3 col-sm-6">
            <div class="card stat-card shadow-sm border-0 h-100 rounded-3">

                <div class="card-body">

                    <!-- HEADER -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <small class="fw-semibold text-muted mb-0">
                            <i class="ti tabler-user-check me-1"></i> Purchased Units
                        </small>

                        <a href="{{route('investment_history')}}" class="fs-4 fw-bold text-dark text-decoration-none">
                            <small class="small">{{ number_format($totalPurchased) }}</small>
                        </a>
                    </div>

                    <!-- DIVIDER -->
                    <hr class="my-2">

                    <!-- STATS -->
                    <div class="row text-center mt-3">

                        <div class="col-6">
                            <small class="text-muted d-block">Block</small>
                            <a href="{{route('view_block')}}" class="fw-semibold fs-5 text-danger text-decoration-none">
                                {{ number_format($totalBlocks) }}
                            </a>
                        </div>

                        <div class="col-6">
                            <small class="text-muted d-block">Units</small>
                            <a href="{{route('investment_history')}}" class="fw-semibold fs-5 text-success text-decoration-none">
                                {{ number_format($totalUnits) }}
                            </a>
                        </div>

                    </div>

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

        <div class="col-lg-3 col-sm-6">
            <div class="card stat-card shadow-sm border-0 h-100 rounded-3">

                <div class="card-body">

                    <!-- HEADER -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <small class="fw-semibold text-muted mb-0">
                            <i class="ti tabler-user-check me-1"></i>Loan
                        </small>

                        <a href="{{route('loan_requests')}}" class="fs-4 fw-bold text-dark text-decoration-none">
                            <small>{{ number_format($totalLoan) }}</small>
                        </a>
                    </div>

                    <!-- DIVIDER -->
                    <hr class="my-2">

                    <!-- STATS -->
                    <div class="row text-center mt-3">

                        <div class="col-6">
                            <small class="text-muted d-block">Paid Amount</small>
                            <a href="{{route('loan_requests')}}" class="fw-semibold fs-5 text-danger text-decoration-none">
                                {{ number_format($totalPaid) }}
                            </a>
                        </div>

                        <div class="col-6">
                            <small class="text-muted d-block">Total Amount</small>
                            <a href="{{route('loan_requests')}}" class="fw-semibold fs-5 text-success text-decoration-none">
                                {{ number_format($totalLoanAmount) }}
                            </a>
                        </div>

                    </div>

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

        <div class="col-lg-3 col-sm-6">
            <div class="card stat-card shadow-sm border-0 h-100 rounded-3">

                <div class="card-body">

                    <!-- HEADER -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <small class="fw-semibold text-muted mb-0">
                            <i class="ti tabler-user-check me-1"></i> Total Income
                        </small>

                        <a href="#" class="fs-4 fw-bold text-dark text-decoration-none">
                            <small> {{ number_format($totalIncome) }}</small>
                        </a>
                    </div>

                    <!-- DIVIDER -->
                    <hr class="my-2">

                    <!-- STATS -->
                    <div class="row text-center mt-3">

                        <div class="col-6">
                            <small class="text-muted d-block">Level Income</small>
                            <a href="{{route('level_income_list')}}"
                                class="fw-semibold fs-5 text-danger text-decoration-none">
                                {{ number_format($levelIncome) }}
                            </a>
                        </div>

                        <div class="col-6">
                            <small class="text-muted d-block">Profit Income</small>
                            <a href="{{route('roi_income_list')}}"
                                class="fw-semibold fs-5 text-success text-decoration-none">
                                {{ number_format($profitIncome) }}
                            </a>
                        </div>

                    </div>

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

    </div>

        @endif
    <!-- ================= GOLD RATE ================= -->
    <div class="row mt-4">
        <div class="col-lg-9 mb-4">
            <div class="card graph-card p-4">
                <h6 class="text-center fw-bold">Analytics</h6>
                <div id="investmentChart"></div>

            </div>
        </div>
        <div class="col-lg-3">

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

                <div class="goldx-header">
                    <div class="goldx-icon">⏱</div>
                    <div>
                        <div class="goldx-title">Buy gold at today's price</div>
                        <div class="goldx-sub">Make a single payment for gold savings</div>
                    </div>
                </div>

                <div class="goldx-toggle">
                    <!-- <span id="rsBtn">Buy in Rupees</span> -->
                    <span id="gmBtn" class="goldx-active">Gold (in Grams)</span>
                </div>

                <div class="goldx-inputbox">
                    <div class="goldx-inputrow">
                        <input type="number" id="goldInput" value="8" step="1" min="0">
                        <div class="goldx-price" id="price"> ₹{{ number_format($gold->gold_price_inr_1gm ?? 0, 2) }}</div>
                    </div>

                    <div class="goldx-meta">
                        Min: 1g &nbsp; <span class="goldx-live">● LIVE</span>
                    </div>
                </div>

                <div class="goldx-badges">
                    <div class="goldx-badge" data-val="1">1g</div>
                    <div class="goldx-badge active" data-val="8">8g</div>
                    <div class="goldx-badge" data-val="16">16g</div>
                    <div class="goldx-badge" data-val="24">24g</div>
                </div>

            </div>


         <div class="col-lg-12 col-md-7 mt-3 card p-2 h-auto">
    <div id="goldCarousel" class="carousel slide" data-bs-ride="carousel">

        <!-- Indicators -->
        <div class="carousel-indicators">
            @foreach($banners as $key => $banner)
                <button type="button"
                        data-bs-target="#goldCarousel"
                        data-bs-slide-to="{{ $key }}"
                        class="{{ $key == 0 ? 'active' : '' }}">
                </button>
            @endforeach
        </div>

        <!-- Slides -->
        <div class="carousel-inner text-center">

            @forelse($banners as $key => $banner)
                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                    <img src="{{ asset('storage/' . $banner->image) }}"
                         class="img-fluid rounded-3 ad-img"
                         alt="Banner">
                </div>
            @empty
                <!-- Fallback if no banners -->
                <div class="carousel-item active">
                    <img src="{{ asset('assets/image/no-image.png') }}"
                         class="img-fluid rounded-3 ad-img"
                         alt="No Banner">
                </div>
            @endforelse

        </div>

        <!-- Controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#goldCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>

        <button class="carousel-control-next" type="button" data-bs-target="#goldCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>

    </div>
</div>
        </div>
    </div>
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 9999;">
        <div id="referralToast" class="toast align-items-center text-white bg-primary border-0" role="alert"
            aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
            <div class="d-flex">
                <div class="toast-body">
                    Referral link copied!
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    const investmentData = @json($investmentData);
    const incomeData = @json($incomeData);
    const days = @json($days);

    document.addEventListener("DOMContentLoaded", function () {

        var options = {
            chart: {
                type: 'area',
                height: 350,
                toolbar: {
                    show: false
                }
            },
            series: [
                {
                    name: 'Investment',
                    data: investmentData 
                },
                {
                    name: 'Income',
                    data: incomeData 
                }
            ],
            xaxis: {
                categories: days 
            },
            yaxis: {
                labels: {
                    formatter: function (val) {
                        return "₹ " + Math.round(val).toLocaleString('en-IN');
                    }
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth',
                width: 3
            },
            legend: {
                position: 'top'
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return "₹ " + val;
                    }
                }
            }
        };

        var chart = new ApexCharts(document.querySelector("#investmentChart"), options);
        chart.render();

    });
</script>
     <!-- <script>
        document.addEventListener("DOMContentLoaded", function () {

            var options = {
                chart: {
                    type: 'area',
                    height: 350,
                    toolbar: {
                        show: false
                    }
                },
                series: [{
                    name: 'Investment',
                    data: [1200, 1800, 1500, 2200, 2600, 3000, 3500]
                },
                {
                    name: 'Income',
                    data: [900, 1400, 1300, 1700, 2100, 2400, 2800]
                },
                    // {
                    //     name: 'Silver Income',
                    //     data: [500, 800, 700, 1100, 1300, 1600, 1900]
                    // }
                ],
                xaxis: {
                    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 3
                },
                legend: {
                    position: 'top'
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return "₹ " + val;
                        }
                    }
                }
            };

            var chart = new ApexCharts(document.querySelector("#investmentChart"), options);
            chart.render();

        });
    </script> -->

    <script>
        $(document).ready(function () {
            const copyBtn = $('#copyReferralBtn');
            const referralLink = $('#referralLink').val();
            const referralToastEl = $('#referralToast');
            const referralToast = new bootstrap.Toast(referralToastEl[0]);

            copyBtn.on('click', function (e) {
                e.preventDefault();
                if (!referralLink) return;

                // Modern clipboard API
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(referralLink)
                        .then(() => {
                            referralToast.show();
                        })
                        .catch(err => console.error('Clipboard failed:', err));
                } else {
                    // Fallback for HTTP / non-secure
                    const tempInput = $('<input>');
                    $('body').append(tempInput);
                    tempInput.val(referralLink).select();
                    document.execCommand('copy');
                    tempInput.remove();
                    referralToast.show();
                }
            });
        });
    </script>
   


    <script>
        const ratePerGram = {{ $gold->gold_price_inr_1gm ?? 0 }};
        const input = document.getElementById('goldInput');
        const price = document.getElementById('price');
        const badges = document.querySelectorAll('.goldx-badge');



        function updatePrice() {
            let grams = parseFloat(input.value) || 0;
            let total = grams * ratePerGram;

            price.innerText = '₹' + total.toLocaleString('en-IN', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }


        input.addEventListener('input', updatePrice);

        badges.forEach(b => {
            b.addEventListener('click', function () {
                badges.forEach(x => x.classList.remove('active'));
                this.classList.add('active');

                input.value = this.dataset.val;
                updatePrice();
            });
        });


        updatePrice();
    </script>

@endsection