@extends('Admin.layout')
<link href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
@section('content')
@section('navlink')
<a href="{{ route('dashboard') }}" class="link-secondary text-decoration-none">Home</a> / <span>Package</span>
@endsection
<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">Package</h1>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('add_package') }}" class="btn btn-primary btn-sm">Add Package</a>
    </div>
</div>

<!-- TABLE CARD -->
<div class="card card-animated-border mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="h6 mb-0 text-gold">All Packages</h3>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary btn-sm">Export</button>
        </div>
    </div>
   
<div class="table-responsive">
        <table class="table table-striped align-middle mb-0" id="users-table">
        <thead>
            <tr>
                <th>SNO</th>
                <th>DATE</th>
                <th>Package Name</th>
                <th>Package USDT</th>
                <th>Daily %</th>
                <th>Daily Income</th>
                <th>Maturity Days</th>
                <th>Maturity Income</th>
                <th>Status</th>
                <th>ACTION</th>
            </tr>
        </thead>
        <tbody id="users-tableBody"></tbody>
    </table>
</div>

</div>



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

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

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>

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

    const users = [
        {
            id: 1,
            sno: 1,
            date: "27-09-2026",
            package_name: "Standard Package",
            package_usdt: "$50", 
            mat_days: "300",
            mat_amt: "$75",
            roi: "0.50%",
            daily_inc:"$0.25",
            status: "Active"
            
        },
        {
            id: 2,
            sno: 2,
            date: "26-09-2026",
            package_name: "Premium Package",
            package_usdt: "$5000",
            mat_days: "300",
            mat_amt: "$75",
            roi: "0.566%",
            daily_inc:"$0.25",
            status: "Active"
        },
       
    ];

    const table = new DataTable("#users-table", {
        data: users,

        columns: [
            {
                data: "sno"
            },
            {
                data: "date"
            },
            {
                data: "package_name"
            },
            {
                data: "package_usdt"
            },
            {
                data: "roi"
            },
             {
                data: "daily_inc"
            },
            {
                data: "mat_days"
            },
             {
                data: "mat_amt"
            },
          
            {
                data: "status",
                orderable: false,
                render: function (data, type, row) {
                    if (type !== "display") return data;

                    const badgeClass = data === "Active"
                        ? "bg-success"
                        : "bg-danger";

                    return `
                        <button type="button"
                                class="badge ${badgeClass} border-0 status-btn"
                                data-id="${row.id}"
                                style="cursor:pointer">
                            ${data}
                        </button>
                    `;
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function (data, type, row) {
                    if (type !== "display") return "";

                    return `
                        <div class="d-flex gap-2">
                            <a href="{{ route('edit_package') }}"
                               class="btn btn-sm btn-outline-primary"
                               title="Edit">
                                <i class="ti ti-edit"></i>
                            </a>

                            <button type="button"
                                    class="btn btn-sm btn-outline-danger delete-btn"
                                    data-id="${row.id}"
                                    title="Delete">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    `;
                }
            }
        ],

        order: [[1, "desc"]],
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        lengthChange: true,
        searching: true,
        ordering: true,
        info: true,
        paging: true,
        autoWidth: false,
        scrollX: true,

        language: {
            search: "",
            searchPlaceholder: "Search packages...",
            emptyTable: "No packages available",
            zeroRecords: "No matching packages found",
            lengthMenu: "_MENU_",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            infoEmpty: "Showing 0 to 0 of 0 entries"
        },

        columnDefs: [
            {
                targets: "_all",
                className: "text-nowrap align-middle"
            }
        ]
    });

    // Status modal
    const statusModal = bootstrap.Modal.getOrCreateInstance(
        document.getElementById("statusModal")
    );

    $("#users-table").on("click", ".status-btn", function () {
        const id = $(this).data("id");
        const user = users.find(item => item.id == id);

        if (!user) return;

        $("#statusPackageId").val(user.id);
        $("#statusPackageName").text(user.package_name);
        $("#packageStatus").val(user.status);

        statusModal.show();
    });

    // Save status (front-end demo)
    $("#statusForm").on("submit", function (e) {
        e.preventDefault();

        const id = Number($("#statusPackageId").val());
        const user = users.find(item => item.id === id);

        if (!user) return;

        user.status = $("#packageStatus").val();

        statusModal.hide();
        table.row((idx, data) => data.id === id)
             .data(user)
             .draw(false);
    });

    // Delete modal
    const deleteModal = bootstrap.Modal.getOrCreateInstance(
        document.getElementById("deleteModal")
    );

    $("#users-table").on("click", ".delete-btn", function () {
        const id = $(this).data("id");
        const user = users.find(item => item.id == id);

        if (!user) return;

        $("#deletePackageId").val(user.id);
        $("#deletePackageName").text(user.package_name);

        deleteModal.show();
    });

    // Delete (front-end demo)
    $("#deleteForm").on("submit", function (e) {
        e.preventDefault();

        const id = Number($("#deletePackageId").val());
        const index = users.findIndex(item => item.id === id);

        if (index === -1) return;

        users.splice(index, 1);

        table.clear();
        table.rows.add(users).draw(false);

        deleteModal.hide();
    });

});
</script>

@endsection