@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>
    .ticket-btn {
        padding-left: 80px;
        position: relative;
        overflow: hidden;
    }

    /* Finger position */
    .finger-emoji {
        position: absolute;
        left: -7px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;

        animation: fingerPush 1.2s infinite;
    }

    /* Push animation (towards text → right side) */
    @keyframes fingerPush {
        0% {
            transform: translateY(-50%) translateX(0);
        }

        30% {
            transform: translateY(-50%) translateX(6px);
            /* push right */
        }

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

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

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

    /* Optional attention pulse */
    .ticket-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 6px;
        box-shadow: 0 0 14px rgba(13, 110, 253, 0.5);
        opacity: 0;
        animation: pulseGlow 2s infinite;
    }

    @keyframes pulseGlow {

        0%,
        100% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }
    }

    /* 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;
        }
    }
</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.purchase_advance_history') }}" 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">Advance List</h5>
    </div>


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

        <button class="btn btn-primary position-relative ticket-btn"
            data-bs-toggle="modal"
            data-bs-target="#earnModal">

            <span class="finger-emoji">👉🏻</span>

            To Get Profit
        </button>
        <a class="btn btn-primary position-relative ticket-btn"
            href="{{ route('user.purchase_advance') }}">

            <span class="finger-emoji">👉🏻</span>

            Add Advance
        </a>
        <!-- <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>Advance</th>
                        <th>Percentage</th>
                        <th>Days</th>
                        <th>Profit</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.investment_list') }}",

        dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',

        pageLength: 10,

        columnDefs: [
            { targets: '_all', className: 'text-nowrap' }
        ],

        columns: [
            {
                data: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'date'
            },
            {
                data: 'amount'
            },
            {
                data: 'percentage'
            },
            {
                data: 'days'
            },
            {
                data: 'profit',
                orderable: false,
                searchable: false
            }
        ]
    });

});
</script>
@endsection