@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    {{--
<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <div class="col-auto">
        <h5>Project</h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('create_project') }}">
<button class="btn btn-primary">New Project</button>
</a>
</div>
</div>
--}}
    <div class="card p-0 m-2">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-1">
                <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-md-3 ms-auto">
                <input type="text" id="searchBox" class="form-control" placeholder="Search">
            </div>
        </div>
        <div class="table-responsive pt-0 pb-2">
            <table class="table" id="usersTable">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Date</th>
                        <th>Staff Name</th>
                        <th>Salary</th>
                        <th>Worked Project</th>
                        <th>Salary Per day</th>
                        <th>Expence</th>

                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <div class="position-fixed top-0 end-0 p-3" style="z-index:9999">
        <div id="liveToast" class="toast align-items-center text-white border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body" id="toastMessage">Done</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>

    <!--
                    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> -->
    <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>
        function showToast(message, type = "success") {
            $("#toastMessage").text(message);
            let toastEl = document.getElementById("liveToast");
            toastEl.classList.remove("bg-success", "bg-danger");
            if (type === "success") {
                toastEl.classList.add("bg-success");
            } else {
                toastEl.classList.add("bg-danger");
            }
            let toast = new bootstrap.Toast(toastEl, {
                delay: 2500
            });
            toast.show();
        }
    </script>
    <script>
        $(document).ready(function() {

            let table = $('#usersTable').DataTable({
                processing: true,
                searching: false,
                paging: true,
                pageLength: 10
            });

            loadData();

            function loadData() {

                $.ajax({
                    url: "http://64.227.170.206/novelx_accounts/public/admin/staff-expense-report",
                    type: "GET",
                    success: function(res) {

                        table.clear();

                        let i = 1;

                        res.data.forEach(row => {

                           table.row.add([
    i++,
    row.day_label 
        ? `<b>${row.day_label}</b><br>${row.date}`
        : row.date,
    row.staff_name,
    row.salary,
    row.worked_projects,
    row.per_day_salary,
    row.expense
]);
                        });

                        table.draw();
                    },
                    error: function() {
                        alert("Error loading data");
                    }
                });
            }

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

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

        });
    </script>
@endsection