@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><button type="button" class="btn btn-icon bg-white waves-effect me-2"
                    style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('project_table') }}">
                        <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 icons-tabler-outline icon-tabler-chevron-left">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>Transactions</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>Flow&nbsp;Category</th>
                        <th>Paid</th>
                        <th>Amount&nbsp;Type</th>
                        <th>Remark</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 Expense / Flow</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">

                        <div class="row g-2">

                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Category</label>
                                <select name="flow_category" id="flow_category" class="form-select">
                                    <option value="">Select</option>
                                    <option value="update">Update</option>
                                    <option value="initial">Initial</option>
                                </select>
                                <small class="text-danger error-flow_category"></small>
                            </div>

                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Amount</label>
                                <input type="number" name="amount" id="flow_amount" class="form-control">
                                <small class="text-danger error-amount"></small>
                            </div>

                            <div class="col-lg-12 mb-3">
                                <label class="form-label">Type</label>
                                <select name="type" id="flow_type" class="form-select">
                                    <option value="">Select</option>
                                    <option value="credit">Credit</option>
                                    <option value="debit">Debit</option>
                                </select>
                                <small class="text-danger error-type"></small>
                            </div>

                            <div class="col-lg-12 mb-3">
                                <label class="form-label">Remarks</label>
                                <textarea name="remarks" id="flow_remarks" class="form-control" rows="3"></textarea>
                                <small class="text-danger error-remarks"></small>
                            </div>

                        </div>

                        <div class="d-flex justify-content-center mt-3 gap-2">
                            <button type="submit" class="btn btn-primary" id="saveFlowBtn">Save</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>

                    </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>
        $(document).ready(function () {

            const table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                paging: true,
                ordering: false,
                lengthChange: false,
                pageLength: 10,

                ajax: {
                    url: "{{ route('transactions_data') }}",
                    type: "GET"
                },

                columns: [
                    { data: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'flow_category' },
                    { data: 'paid' },
                    { data: 'amount_type' },
                    { data: 'remark' }
                ],
            });

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

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


            // Open modal
            $(document).on("click", ".openAddModalBtn", function () {

                let id = $(this).data("id");

                $("#project_id").val(id);

                $("#flow_category").val("");
                $("#flow_amount").val("");
                $("#flow_type").val("");
                $("#flow_remarks").val("");

                $(".text-danger").text("");

                showToast("Project Selected", "success");
            });


            // Submit modal
            $("#flowForm").on("submit", function (e) {
                e.preventDefault();

                $("#saveFlowBtn").prop("disabled", true).text("Saving...");

                $(".text-danger").text("");

                $.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 === true) {
                            showToast(res.message, "success");
                            $("#candidateModal").modal("hide");
                            table.ajax.reload(null, false);
                        }
                    },
                    error: function (xhr) {

                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;

                            if (errors.flow_category) $(".error-flow_category").text(errors.flow_category[0]);
                            if (errors.amount) $(".error-amount").text(errors.amount[0]);
                            if (errors.type) $(".error-type").text(errors.type[0]);
                            if (errors.remarks) $(".error-remarks").text(errors.remarks[0]);

                            showToast("Please fix validation errors", "error");
                        }
                        else {
                            console.log(xhr.responseText);
                            showToast("Server error!", "error");
                        }
                    },
                    complete: function () {
                        $("#saveFlowBtn").prop("disabled", false).text("Save");
                    }
                });
            });

        });
    </script>

@endsection