@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>Project Name</th>
                        <th>Amount</th>
                        <th>Recived</th>
                        <th>Balance</th>
                        <th>Expence</th>
                        <th>Over Due</th>
                        <th>Profit</th>
                        <th>Add Payment</th>
                        <th>View</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>
    <div class="modal fade" id="candidateModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="mb-0">Add Project Payment</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="flowForm">
                        @csrf
                        <input type="hidden" name="project_id" id="project_id">
                        <input type="hidden" name="project_name" id="project_name">
                        <div class="row g-2">
                            <div class="col-lg-6 mb-3">
                                <label>Amount</label>
                                <input type="number" name="amount" class="form-control">
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label>Received</label>
                                <input type="number" name="received" class="form-control">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </form>
                </div>
            </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>
        let table;
        $(document).ready(function () {
            table = $('#usersTable').DataTable({
                processing: true,
                serverSide: false,
                searching: true,
                paging: true,
                ordering: false,
                lengthChange: false,
                pageLength: 10,
                ajax: {
                    url: "/novelx_accounts/public/api/get-project",
                    type: "GET",
                    dataSrc: function (json) {
                        return json.data;
                    }
                },
                columns: [
                    {
                        data: null,
                        render: (data, type, row, meta) => meta.row + 1
                    },
                    { data: 'project_name' },
                    { data: 'amount', render: d => d ?? 0 },
                    { data: 'received', render: d => d ?? 0 },
                    { data: 'balance', render: d => d ?? 0 },
                    { data: 'expense', render: d => d ?? 0 },
                    { data: 'over_due', render: d => d ?? 0 },
                    { data: 'profit', render: d => d ?? 0 },
                    {
                        data: null,
                        render: function (data) {
                            return `<button class="btn btn-sm btn-primary openAddModalBtn"
                                            data-id="${data.id}"
                                            data-name="${data.project_name}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#candidateModal">Add</button>`;
                        }
                    },
                  {
    data: null,
    render: function (data) {

        let baseUrl = "{{ url('/') }}";

        // 🔥 convert to slug
        let slug = data.project_name
            .toLowerCase()
            .replace(/\s+/g, '-');

        return `<a href="${baseUrl}/admin/project_work_detail/${slug}"
            class="btn btn-sm btn-info">View</a>`;
    }
}
                ]
            });
        });
    </script>
    <script>
        $(document).on("click", ".openAddModalBtn", function () {
            let id = $(this).data("id");
            let name = $(this).data("name");
            $("#project_id").val(id);
            $("#project_name").val(name);
        });
    </script>
    <script>
        $("#flowForm").on("submit", function (e) {
            e.preventDefault();
            $.ajax({
                url: "{{ route('payment_detail_store') }}",
                type: "POST",
                data: $(this).serialize(),
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                success: function (res) {
                    if (res.status) {
                        alert(res.message);
                        $("#candidateModal").modal("hide");
                        table.ajax.reload(null, false);
                    }
                },
                error: function (err) {
                    console.log(err);
                    alert("Error");
                }
            });
        });
    </script>
@endsection