@extends('user.layout')
<style>
    /* .pointing-emoji {
        position: absolute;
        left: -1px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        animation: pointMove 1s infinite;
    } */

    .pointer-hand {
        position: absolute;
        margin-left: 10px !important;
        transform: translateY(-50%);
        font-size: 22px;
        margin-top: 10px !important;
        animation: pointMove 1s infinite;
    }

    /* Smooth left-right attention animation */
    @keyframes pointMove {
        0% {
            transform: translateY(-50%) translateX(0);
        }

        50% {
            transform: translateY(-50%) translateX(6px);
        }

        100% {
            transform: translateY(-50%) translateX(0);
        }
    }

    .cursor {
        display: none;
        margin-left: 2px;
        font-weight: bold;
    }
</style>
<style>
    /* Modal Theme */
    .modal-content {
        background: linear-gradient(135deg, #0a1f44, #123a7a);
        color: #fff;
        border-radius: 15px;
        border: none;
    }

    .modal-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .modal-title {
        font-weight: 600;
    }

    .roadmap-step {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 17px;
    }

    /* Left Star */
    .star {
        width: 30px;
        height: 30px;
        background: #ffc107;
        color: #000000;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
    }

    /* Center Text */
    .step-text {
        color: #fff !important;
        flex: 1;
        margin: 0 15px;
        font-size: 12px;
    }

    /* Status Circles */
    .status {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        color: #fff;
        position: relative;
    }

    .completed {
        background: #28a745;
    }

    .not-completed {
        background: #dc3545;
    }

    /* Tooltip */
    .status::after {
        content: attr(data-title);
        position: absolute;
        bottom: 50px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: 0.3s;
    }

    .status:hover::after {
        opacity: 1;
    }
</style>
<style>
    /* Amount Styling */
    .amount {
        color: #ffc107;
        font-size: 20px;
        font-weight: 700;
        margin: 6px 0;
    }

    /* Refresh Text */
    .refresh-text {
        font-size: 11px;
        color: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

    /* Live Dot */
    .refresh-text .dot {
        width: 6px;
        height: 6px;
        background: #73d12e;
        border-radius: 50%;
        animation: blinkDot 1.2s infinite;
    }

    /* Dot animation */
    @keyframes blinkDot {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.3;
        }
    }
</style>
<style>
    .finance-card {
        padding: 7px;
        border-radius: 10px;
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    /* Hover effect */
    .finance-card:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
    }

    /* Top shimmer */
    .finance-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.12), transparent);
        animation: shimmer 3s infinite;
    }

    @keyframes shimmer {
        100% {
            left: 130%;
        }
    }

    /* Label */
    .label {
        font-size: 11px;
        color: #b0c4de;
        letter-spacing: 0.5px;
    }

    /* Amount (Main focus) */
    .amount {
        font-size: 20px;
        font-weight: 700;
        color: #ffc107;
        margin: 4px 0;
        text-shadow: 0 0 10px rgba(255, 193, 7, 0.6);
    }

    /* Refresh text */
    .refresh {
        font-size: 11px;
        color: #cfd8dc;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    /* Live dot */
    .dot {
        width: 6px;
        height: 6px;
        background: #00e676;
        border-radius: 50%;
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7);
        }

        70% {
            box-shadow: 0 0 0 8px rgba(0, 230, 118, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(0, 230, 118, 0);
        }
    }
</style>
<style>
    /* ===== CARD BASE ===== */
    .mini-card-attention {
        padding: 18px 12px;
        border-radius: 14px;
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;
        position: relative;
        cursor: pointer;
        transition: all 0.3s ease;
        overflow: hidden;
        text-align: center;
    }

    /* shimmer */
    .mini-card-attention::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.15), transparent);
        animation: shimmer 3s infinite;
    }

    /* hover */
    .mini-card-attention:hover {
        transform: translateY(-5px) scale(1.03);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    }

    /* ===== ICON ===== */
    .card-icon {
        font-size: 32px;
        color: #ffc107;
        margin-bottom: 8px;
        animation: floatIcon 2s ease-in-out infinite;
    }

    @keyframes floatIcon {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-4px);
        }
    }

    /* ===== TEXT ===== */
    .title {
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .sub-text {
        font-size: 12px;
        color: #ccc;
        margin-bottom: 8px;
    }

    /* ===== STATUS ===== */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 20px;
        background: rgba(255, 77, 77, 0.15);
        color: #ff4d4d;
        font-size: 12px;
        font-weight: 600;
        animation: pulseGlow 1.5s infinite;
    }

    .status-icon {
        background: #ff4d4d;
        color: #fff;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 11px;
    }

    /* ===== CTA ===== */


    /* ===== ANIMATIONS ===== */
    @keyframes pulseGlow {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6);
        }

        70% {
            box-shadow: 0 0 0 8px rgba(255, 77, 77, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(255, 77, 77, 0);
        }
    }
</style>
<style>
    .reward-list {
        list-style: none;
        padding: 0;
        margin: 10px 0;
        font-size: 12px;
        color: #ccc;
        text-align: left;
    }

    .reward-list li {
        margin-bottom: 4px;
    }

    .locked-text {
        font-size: 11px;
        color: #ff4d4d;
        margin-top: 6px;
    }

    /* ===== PROGRESS RING ===== */
    .progress-ring {
        position: relative;
        width: 120px;
        height: 120px;
        margin: auto;
    }

    .progress-ring svg {
        transform: rotate(-90deg);
    }

    .progress-ring circle {
        fill: none;
        stroke-width: 8;
    }

    .progress-ring .bg {
        stroke: rgba(255, 255, 255, 0.1);
    }

    .progress-ring .progress {
        stroke: #ffc107;
        stroke-dasharray: 314;
        stroke-dashoffset: 314;
        transition: stroke-dashoffset 1s ease;
    }

    /* Center Text */
    .progress-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color: #ffc107;
        font-weight: bold;
    }

    /* ===== LEVEL DOTS ===== */
    .levels {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .level {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #1c2f5c;
        color: #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        transition: 0.3s;
    }

    .level.active {
        background: #ffc107;
        color: #000;
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.7);
    }

    /* ===== UNLOCK ANIMATION ===== */
    .level.unlocked {
        animation: popUnlock 0.6s ease;
    }

    @keyframes popUnlock {
        0% {
            transform: scale(0);
        }

        80% {
            transform: scale(1.3);
        }

        100% {
            transform: scale(1);
        }
    }

    /* Glow effect */
    .unlock-glow {
        animation: glowFlash 1s ease;
    }

    @keyframes glowFlash {
        0% {
            box-shadow: 0 0 0 rgba(255, 193, 7, 0);
        }

        50% {
            box-shadow: 0 0 25px rgba(255, 193, 7, 0.8);
        }

        100% {
            box-shadow: 0 0 0 rgba(255, 193, 7, 0);
        }
    }
</style>
<style>
    .cta-text {
        display: flex;
        flex-direction: column;
        /* stack vertically */
        align-items: center;
        /* center horizontally */
        justify-content: center;
        font-size: 13px;
        color: #ffc107;
        font-weight: 500;
        gap: 4px;
    }

    /* Hand animation (UP-DOWN for pointing feel) */
    .pointer-hand {
        font-size: 18px;
        bottom: 10px;
        animation: pointUpDown 0.8s ease-in-out infinite;
    }

    /* Vertical pointing animation */
    @keyframes pointUpDown {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-6px);
        }

        100% {
            transform: translateY(0);
        }
    }

    .dt-search {
        display: none !important;
    }
</style>
@section('content')
    <div class="row d-flex justify-content-center g-3 mb-3">
        <div class="col-lg-2">
            <div class="custom-card">

                <h5 class="m-0 text-center text-warning fw-bold">Royalty Income</h5>
            </div>
        </div>
    </div>
    <div class="row d-flex g-3">
        <div class="col-lg-4 col-md-6 col-12">
            <div class="mini-card-attention h-100">

                <div class="card-icon">
                    <i class="ti tabler-gift"></i>
                </div>

                <div class="mini-card-content">

                    <h6 class="title">Royalty Benefits</h6>

                    <ul class="reward-list text-center">
                        <li>💰 Monthly Income Share</li>
                        <li>👑 Exclusive Member Status</li>
                    </ul>

                    <div class="locked-text">
                        🔒 Unlock after completion
                    </div>

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <div class="mini-card-attention h-100">

                <div class="card-icon">
                    <i class="ti tabler-wallet"></i>
                </div>

                <div class="mini-card-content">

                    <h6 class="title">Current Royalty Pool</h6>

                    <h5 class="amount">₹10,000</h5>

                    <div class="refresh-text">
                        <span class="dot"></span>
                        Monthly Refreshed
                    </div>

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <div class="mini-card-attention primary h-100" data-bs-toggle="modal" data-bs-target="#roadmapModal">

                <!-- <div class="card-icon">
                        <i class="ti tabler-crown"></i>
                    </div> -->

                <div class="mini-card-content">

                    <h6 class="title">Royalty Membership</h6>
                    <div class="d-flex align-items-center gap-2 mt-2">

                        <!-- Progress -->
                        <div class="progress flex-grow-1" style="height:8px;">
                            <div class="progress-bar bg-warning" style="width: 66%"></div>
                        </div>

                        <!-- Text -->
                        <small class="text-light text-nowrap">2 / 3 Steps</small>

                    </div>
                    <!-- Status -->
                    <div class="status-badge mt-2 mb-2">
                        <span class="status-icon">⚡</span>
                        Almost There
                    </div>

                    <!-- CTA -->
                    <div class="cta-text text-center align-items-center gap-1">
                        <span>Complete Final Step</span><br>
                        <span class="pointer-hand mt-3">👆🏻</span>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <div class="card p-0 mt-3">


        <div class="row mb-3 align-items-center p-3 g-2">

            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>

            <div class="col-auto ms-auto d-flex gap-2 align-items-center">

                <input type="text" id="customSearch" class="form-control" placeholder="Search" style="width:200px;">

            </div>

        </div>


        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table id="usersTable" class="table table-bordered align-middle users-table w-100">
                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>Date</th>
                                    <th>Amount</th>
                                    <th>Service&nbsp;Charge</th>

                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="roadmapModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-sm modal-md">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <h5 class="modal-title text-warning text-center"> <i class="ti tabler-crown"></i>
                    Become a Royalty Member</h5>
                <div class="modal-body">

                    <div class="roadmap">

                        <!-- Step 1 -->
                        <div class="roadmap-step">
                            <div class="star">★</div>
                            <div class="step-text">50K Product Need To Be Purchased</div>
                            <div class="status completed" data-title="Completed">✓</div>
                        </div>

                        <!-- Step 2 -->
                        <div class="roadmap-step">
                            <div class="star">★</div>
                            <div class="step-text">4 Active Direct Referrals</div>
                            <div class="status completed" data-title="Completed">✓</div>
                        </div>

                        <!-- Step 4 -->
                        <div class="roadmap-step">
                            <div class="star">★</div>
                            <div class="step-text"> Each Of The 3 Legs Requires A Purchase of 1.5 Lakhs.</div>
                            <div class="status not-completed" data-title="Not Completed">✗</div>
                        </div>

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

    <!-- jQuery (REQUIRED FIRST) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DataTables Core -->
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>

    <!-- Bootstrap 5 Integration -->
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>


    <script>


        let completedStep = 2;

        const steps = document.querySelectorAll('.step');
        const progressLine = document.getElementById('progressLine');

        steps.forEach((step, index) => {
            const stepNumber = index + 1;
            const circle = step.querySelector('.circle');

            setTimeout(() => {
                step.classList.add('show');
            }, index * 200);

            if (stepNumber < completedStep) {
                step.classList.add('completed');
                circle.innerHTML = '✓';
            }
            else if (stepNumber === completedStep) {
                step.classList.add('active');
            }
        });


        setTimeout(() => {
            const activeStep = document.querySelector('.step.active') || document.querySelector('.step.completed:last-child');

            if (activeStep) {
                const height = activeStep.offsetTop;
                progressLine.style.height = height + "px";
            }
        }, 500);

    </script>

    <script>
        $(document).ready(function () {

            const users = [
                {
                    date: '12/01/2024',
                    amount: '₹50,000.00',
                    service_charge: '₹500.00'
                }
            ];

            const table = $('#usersTable').DataTable({
                data: users,
                processing: true,
                searching: true,
                ordering: false,
                lengthChange: false,
                pageLength: 10,

                columns: [
                    {
                        data: null,
                        render: (d, t, r, m) => m.row + 1
                    },
                    { data: 'date' },
                    { data: 'amount' },
                    { data: 'service_charge' }
                ]
            });

            // Page length
            $('#pageLength').on('change', function () {
                table.page.len(parseInt($(this).val())).draw();
            });

            // Search (FIXED ID)
            $('#customSearch').on('keyup', function () {
                table.search(this.value).draw();
            });

        });
    </script>
@endsection