@extends('Admin.layout')

@section('navlink')
<a href="{{ route('dashboard') }}" class="link-secondary text-decoration-none">
    Home
</a>
/ <span>Level Masters Report</span>
@endsection

@section('content')

<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css">

<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">Level Masters Report</h1>
    </div>

    <div class="d-flex gap-2">
        <a href="{{ route('level_master') }}" class="btn-back">
            <i class="ti ti-arrow-left"></i>
            <span>Back</span>
        </a>
    </div>
</div>

<div class="card card-animated-border mb-4">
    <div class="card-header">
        <h3 class="h6 mb-0 text-gold">All Level Masters Records</h3>
    </div>

    <div class="card-body">

        <!-- FILTERS -->
        <div class="row g-3 align-items-end mb-3">
            <div class="col-12 col-md-3">
                <label for="fromDate" class="form-label small">From Date</label>
                <input type="date" id="fromDate" class="form-control form-control-sm">
            </div>

            <div class="col-12 col-md-3">
                <label for="toDate" class="form-label small">To Date</label>
                <input type="date" id="toDate" class="form-control form-control-sm">
            </div>

            <div class="col-12 col-md-3">
                <label for="customSearch" class="form-label small">Search</label>
                <input type="search"
                    id="customSearch"
                    class="form-control form-control-sm"
                    placeholder="Search table...">
            </div>

            <div class="col-12 col-md-3">
                <button type="button" id="exportBtn"
                    class="btn btn-outline-primary btn-sm w-100">
                    <i class="ti ti-download me-1"></i> Export
                </button>
            </div>
        </div>

        <!-- TABLE -->
        <div class="table-responsive">
            <table class="table table-striped align-middle mb-0"
                id="level-income-table"
                style="width:100%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>DATE</th>
                        @for ($i = 1; $i <= 12; $i++)
                            <th>L{{ $i }}</th>
                            <th>L{{ $i }} REF</th>
                            @endfor
                            <th>STATUS</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </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,
                date: "2026-09-27",
                level_1: 6,
                level_1_ref: 2,
                level_2: 5,
                level_2_ref: 1,
                level_3: 0,
                level_3_ref: 0,
                level_4: 0,
                level_4_ref: 0,
                level_5: 0,
                level_5_ref: 0,
                level_6: 0,
                level_6_ref: 0,
                level_7: 0,
                level_7_ref: 0,
                level_8: 0,
                level_8_ref: 0,
                level_9: 0,
                level_9_ref: 0,
                level_10: 0,
                level_10_ref: 0,
                level_11: 0,
                level_11_ref: 0,
                level_12: 0,
                level_12_ref: 0,
                level_13: 0,
                level_13_ref: 0,
                level_14: 0,
                level_14_ref: 0,
                status: "Active"
            },
            {
                id: 2,
                date: "2026-09-26",
                level_1: 10,
                level_1_ref: 3,
                level_2: 8,
                level_2_ref: 2,
                level_3: 5,
                level_3_ref: 1,
                level_4: 0,
                level_4_ref: 0,
                level_5: 0,
                level_5_ref: 0,
                level_6: 0,
                level_6_ref: 0,
                level_7: 0,
                level_7_ref: 0,
                level_8: 0,
                level_8_ref: 0,
                level_9: 0,
                level_9_ref: 0,
                level_10: 0,
                level_10_ref: 0,
                level_11: 0,
                level_11_ref: 0,
                level_12: 0,
                level_12_ref: 0,
                level_13: 0,
                level_13_ref: 0,
                level_14: 0,
                level_14_ref: 0,
                status: "Inactive"
            },

        ];

        // Build columns dynamically
        const columns = [{
                data: "id"
            },
            {
                data: "date",
                render: function(data, type) {
                    if (type === "display" && data) {
                        const [year, month, day] = data.split("-");
                        return `${day}-${month}-${year}`;
                    }

                    return data;
                }
            }
        ];

        for (let i = 1; i <= 12; i++) {
            columns.push({
                data: `level_${i}`,
                defaultContent: 0
            });

            columns.push({
                data: `level_${i}_ref`,
                defaultContent: 0
            });
        }

        columns.push({
            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}"
                    data-status="${data}"
                    style="cursor:pointer">
                ${data}
            </button>
        `;
            }
        });
        // Initialize DataTable
        const table = new DataTable("#level-income-table", {
            data: users,
            columns: columns,

            order: [
                [0, "asc"]
            ],
            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 table...",
                emptyTable: "No level income records available",
                zeroRecords: "No matching records 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"
            }]
        });

        // Custom search
        $("#customSearch").on("input", function() {
            table.search(this.value).draw();
        });

        // Date range filter
        $.fn.dataTable.ext.search.push(function(settings, data) {
            if (settings.nTable.id !== "level-income-table") {
                return true;
            }

            const fromDate = $("#fromDate").val();
            const toDate = $("#toDate").val();

            // Convert displayed DD-MM-YYYY to YYYY-MM-DD
            const dateParts = data[0].split("-");
            const rowDate = dateParts.length === 3 ?
                `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}` :
                "";

            if (fromDate && rowDate < fromDate) {
                return false;
            }

            if (toDate && rowDate > toDate) {
                return false;
            }

            return true;
        });

        $("#fromDate, #toDate").on("change", function() {
            table.draw();
        });

        // Export filtered data as CSV
        $("#exportBtn").on("click", function() {
            const rows = table.rows({
                search: "applied"
            }).data().toArray();

            const headers = ["DATE"];

            for (let i = 1; i <= 14; i++) {
                headers.push(`L${i}`, `L${i} REF`);
            }

            headers.push("STATUS");

            const csvRows = [headers];

            rows.forEach(function(user) {
                const row = [user.date];

                for (let i = 1; i <= 14; i++) {
                    row.push(user[`level_${i}`] ?? 0);
                    row.push(user[`level_${i}_ref`] ?? 0);
                }

                row.push(user.status);
                csvRows.push(row);
            });

            const csv = csvRows.map(function(row) {
                return row.map(function(value) {
                    return `"${String(value ?? "").replace(/"/g, '""')}"`;
                }).join(",");
            }).join("\r\n");

            const blob = new Blob(["\uFEFF" + csv], {
                type: "text/csv;charset=utf-8;"
            });

            const url = URL.createObjectURL(blob);
            const link = document.createElement("a");

            link.href = url;
            link.download = "level-income-report.csv";
            document.body.appendChild(link);
            link.click();
            link.remove();

            URL.revokeObjectURL(url);
        });
        // Open existing Active / Inactive modal
        $("#level-income-table").on("click", ".status-btn", function() {
            const id = $(this).data("id");
            const status = $(this).data("status");

            // Store selected record details for the modal
            $("#statusModal").data("id", id);
            $("#statusModal").data("status", status);

            // Update modal text if these elements exist
            $("#statusModal .modal-title").text(
                status === "Active" ? "Deactivate Record" : "Activate Record"
            );

            $("#statusModal .modal-body").text(
                `Are you sure you want to change this record from ${status} to ${status === "Active" ? "Inactive" : "Active"}?`
            );

            // Open the existing modal
            $("#statusModal").modal("show");
        });
    });
</script>

@endsection