@extends('Admin.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(145deg, #0A1F44, #0d2b63);
        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(145deg, #0A1F44, #0d2b63);
        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);
        }
    }
</style>
@section('content')

<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <div class="col-auto">
        <h5>View Royality Eigibility </h5>
    </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="dept" class="table table-bordered align-middle users-table w-100">
                        <thead>
                            <tr>
                                <th>SNO</th>
                                <th>Date</th>
                                <th>User ID</th>
                                <th>User Name</th>
                                <th>Achieved Date</th>
                                <th>Eligible Months</th>
                                <th>Expire Date</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </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>
    $(document).ready(function() {

      
        const table = $('#dept').DataTable({
 ajax: "{{ route('fivestar_royalty_eligibility_history_data') }}",   
             processing: true,
            searching: true,
            ordering: false,
            lengthChange: false,
            pageLength: 10,

            columns: [
        { data: 'DT_RowIndex', name: 'DT_RowIndex' },
        { data: 'date', name: 'date' },
        { data: 'user_id', name: 'user_id' },
        { data: 'user_name', name: 'user_name' },
        { data: 'achieved_date', name: 'achieved_date' },
        { data: 'months', name: 'months' },
        { data: 'expiry_date', name: 'expiry_date' }
    ]

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

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

        // Action click
        $(document).on('click', '.view-btn', function() {
            let id = $(this).data('id');
            console.log("View clicked ID:", id);
        });

    });
</script>




@endsection