@extends('user.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

<style>
    .btn-earn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #ffd700, #c9a000) !important;
        color: #0a1f44 !important;
        border: none;
        margin-top: auto !important;
        border-radius: 10px;
        font-weight: 600;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    /* ICON WRAPPER */
    .lock-wrapper {
        position: relative;
        width: 22px;
        height: 22px;
    }

    /* BOTH ICONS */
    .lock-icon {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 22px;
        transition: all 0.4s ease;
    }

    /* CLOSED DEFAULT */
    .lock-closed {
        opacity: 1;
        transform: scale(1);
    }

    /* OPEN HIDDEN INIT */
    .lock-open {
        opacity: 0;
        transform: scale(0.7);
    }

    /* 🔥 AUTO TOGGLE ANIMATION */
    @keyframes lockToggle {

        0%,
        40% {
            opacity: 1;
            transform: scale(1);
        }

        50%,
        90% {
            opacity: 0;
            transform: scale(0.7);
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes lockOpenToggle {

        0%,
        40% {
            opacity: 0;
            transform: scale(0.7);
        }

        50%,
        90% {
            opacity: 1;
            transform: scale(1.1);
        }

        100% {
            opacity: 0;
        }
    }

    /* APPLY ANIMATION */
    .lock-closed {
        animation: lockToggle 2s infinite;
    }

    .lock-open {
        animation: lockOpenToggle 2s infinite;
    }

    /* ✨ ATTENTION PULSE */
    @keyframes pulseGlow {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.5);
        }

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

        100% {
            box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
        }
    }

    .earn-modal {
        background: #0a1f44;
        color: #fff;
        border-radius: 16px;
        border: 1px solid rgba(255, 215, 0, 0.2);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.15);
    }

    /* Steps */
    .earn-step {
        display: flex;
        gap: 15px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .earn-step:last-child {
        border-bottom: none;
    }

    .step-icon {
        width: 40px;
        height: 40px;
        background: #ffd700;
        color: #0a1f44;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    /* Text */
    .earn-step h6 {
        margin: 0;
        font-size: 15px;
    }

    .earn-step p {
        margin: 2px 0 0;
        font-size: 13px;
        opacity: 0.8;
    }

    /* Shine sweep */
    .btn-earn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg,
                transparent,
                rgba(255, 255, 255, 0.5),
                transparent);
        transform: skewX(-25deg);
        animation: shineMove 3s infinite;
    }

    @keyframes shineMove {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }

    /* Modal Theme */
    .earn-modal {
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;
        ;
        color: #efbf04 !important;
        border-radius: 16px;
        border: 1px solid rgba(255, 215, 0, 0.2);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.15);
    }

    /* Steps */
    .earn-step {
        display: flex;
        gap: 15px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .earn-step:last-child {
        border-bottom: none;
    }

    .step-icon {
        width: 40px;
        height: 40px;
        /* background: #ffd700; */
        color: #000000;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    /* Text */
    .earn-step h6 {
        margin: 0;
        font-size: 15px;
        color: #ffffff;
    }

    .earn-step p {
        margin: 2px 0 0;
        font-size: 13px;
        opacity: 0.8;
    }

    h6 {
        color: #fff !important;
    }

    .btn-earn,
    .btn-coin {
        transition: all 0.25s ease;
    }

    @media (max-width: 991px) {

        .btn-earn,
        .btn-coin {
            justify-content: center;
            text-align: center;
        }
    }

    .btn-coin {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        overflow: hidden;
    }

    /* COIN WRAPPER */
    .coin-stack {
        position: relative;
        width: 24px;
        height: 24px;
    }

    /* COINS BASE */
    .coin {
        position: absolute;
        font-size: 18px;
        left: 0;
        bottom: 0;
        opacity: 0;
        transform: translateY(0) scale(0.8);
    }

    /* 🎯 INDIVIDUAL ANIMATIONS */
    .coin-1 {
        animation: coinRise 2s infinite;
    }

    .coin-2 {
        animation: coinRise 2s infinite 0.4s;
    }

    .coin-3 {
        animation: coinRise 2s infinite 0.8s;
    }

    /* 🔥 MAIN ANIMATION */
    @keyframes coinRise {
        0% {
            opacity: 0;
            transform: translateY(0) scale(0.7);
        }

        30% {
            opacity: 1;
            transform: translateY(-6px) scale(1);
        }

        60% {
            opacity: 1;
            transform: translateY(-12px) scale(1.1);
        }

        100% {
            opacity: 0;
            transform: translateY(-20px) scale(0.9);
        }
    }

    @media (max-width: 768px) {

        /* Tablet + Mobile */
        .step-icon {
            width: 40px;
            height: 24px;
            /* background: #ffd700; */
            color: #000000;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
    }
</style>

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="row align-items-center justify-content-between mb-4 mt-3">
    <div class="col-auto d-flex align-items-center justify-content-center">
        <a href="{{ route('user.advance_list') }}" class="btn btn-white btn-icon me-3 shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M15 6l-6 6l6 6" />
            </svg>
        </a>
        <h5 class="mb-0 text-center">Profits</h5>
    </div>

    <!--
      <div class="col-12 col-lg-auto d-flex flex-column flex-lg-row gap-2">

    <button class="btn btn-earn w-100 w-lg-auto" data-bs-toggle="modal" data-bs-target="#earnModal">

        <span class="lock-wrapper">
            <i class="ti tabler-lock lock-icon lock-closed"></i>
            <i class="ti tabler-lock-open lock-icon lock-open"></i>
        </span>

        <span class="btn-text">To Get Profit</span>

    </button>

    <a href="{{ route('user.purchase_advance') }}" class="btn btn-primary btn-coin w-100 w-lg-auto">

        <span class="coin-stack">
            <i class="ti tabler-coin coin coin-1"></i>
            <i class="ti tabler-coin coin coin-2"></i>
            <i class="ti tabler-coin coin coin-3"></i>
        </span>

        <span class="btn-text text-nowrap">
            Add Advance
        </span>

    </a>

</div> -->
</div>

<div class="card shadow-sm border-0">
    <div class="card-body p-4">


        <div class="table-responsive">
            <table class="table w-100" id="usersTable">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Date</th>
                        <th>Amount</th>


                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- Trigger Button -->

<!-- Modal -->
<!-- <div class="modal fade" id="earnModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content earn-modal">

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

                <div class="modal-body">
                    <h6 class="text-center">💰 Get Profit By Paying Advance</h6>

                    <div class="earn-step">
                        <div class="step-icon">1</div>
                        <div>
                            <p>Make an advance between 1 Lakh to 10 Lakh</p>
                            <h6>To Get 18% Yearly Profit.</h6>
                        </div>
                    </div>

                    <div class="earn-step">
                        <div class="step-icon">2</div>
                        <div>
                              <p>Make an advance between 10 Lakh to 20 Lakh</p>
                            <h6>To Get 20% Yearly Profit.</h6>
                        </div>
                    </div>

                    <div class="earn-step">
                        <div class="step-icon">3</div>
                        <div>
                             <p>Make an advance above 20 Lakh</p>
                            <h6>To Get 25% Yearly Profit.</h6>
                        </div>
                    </div>



                </div>

            </div>
        </div>
    </div> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

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

       $('#usersTable').DataTable({
            processing: true,
            serverSide: true,

            ajax: "{{ route('user.profit_data', $id) }}",

            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'date'
                },
                {
                    data: 'amount'
                }

            ]
        });

    });
</script>
@endsection