@extends('master.authMaster')


@section('content')
    <div class="col-span-12 lg:col-span-12">
        <div class="flex justify-between mt-5">
            <h2 class="text-lg font-medium mr-auto">
                Assets List
            </h2>

            @php
                $menuId = \App\Models\Menu::where('route', 'asset.index')->value('id');
                $permissionService = app(\App\Services\PermissionService::class);
            @endphp

            @if ($permissionService->hasPermission($menuId, 'w'))
                <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
                    <a href="{{ route('asset.create') }}">
                        <button class="button text-white bg-theme-1 shadow-md">
                            Add An Asset
                        </button>
                    </a>
                </div>
            @endif
        </div>
    </div>
    </div>
    <!-- BEGIN: HTML Table Data -->
    <div class="intro-y box p-5 mt-5">

        @if (session('success'))
            <div class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-9 text-theme-9 dark:border-theme-9">
                {{ session('success') }}
            </div>
        @elseif (session('error'))
            <div class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-6 text-theme-6 dark:border-theme-6">
                {{ session('error') }}
            </div>
        @endif

        <div class="flex flex-col sm:flex-row sm:items-end xl:items-start">
            <form class="xl:flex w-full" id="tabulator-html-filter-form">

                <div class="sm:flex items-center justify-between w-full">
                    <div class="ms-4 me-4 d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <label for="page-size" class="form-label mb-0">Data Per Page</label>
                            <select id="page-size" class="input w-full sm:w-40 xxl:w-full mt-2 sm:mt-0 border">
                                {{-- <option value="5">5</option> --}}
                                <option value="10">10</option>
                                <option value="30">30</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                    </div>
                    &nbsp; &nbsp; &nbsp;
                    <div>

                        <input type="text" class="input w-full sm:w-40 xxl:w-full mt-2 sm:mt-0 border" id="search-string"
                            placeholder="Search...">
                    </div>

                </div>

            </form>
        </div>
        <div class="overflow-x-auto scrollbar-hidden">
            <div class="mt-5 table-report table-report--tabulator" id="asset-table"></div>
        </div>

    </div>
    <!-- END: HTML Table Data -->

    <link href="{{ asset('build/assets/css/tabulator.min.css') }}" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/css/tabulator_materialize.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.3.1/dist/js/tabulator.min.js"></script>


    <script>
        var canRead = @json($permissionService->hasPermission($menuId, 'r'));
        var canWrite = @json($permissionService->hasPermission($menuId, 'w'));
        var canExecute = @json($permissionService->hasPermission($menuId, 'x'));



        var currentYearRange =
            "{{ \Carbon\Carbon::createFromDate(date('Y'), 4, 1)->format('d-m-Y') . ' to ' . \Carbon\Carbon::createFromDate(date('Y') + 1, 3, 31)->format('d-m-Y') }}";
        var table = new Tabulator("#asset-table", {
            ajaxURL: "{{ route('asset.details') }}",
            ajaxParams: function() {
                return {
                    _token: document.querySelector('meta[name="csrf-token"]').getAttribute("content"),
                    search: document.querySelector("#search-string").value
                };
            },
            ajaxConfig: "POST",
            layout: "fitColumns",
            theme: "bootstrap5",
            paginationMode: "remote",
            pagination: true,
            paginationSize: 10,
            paginationSizeSelector: false,
            layout: "fitColumns",
            search: true,
            movableRows: true,
            movableColumns: true,
            // 🔹 Custom loader spinner
            ajaxLoaderLoading: `
                   <div style='display:inline-block; border:4px solid #333; border-radius:10px; background:#fff; font-weight:bold; font-size:16px; color:#000; padding:10px 20px;'>Loading Data</div>
                `,
            columnDefaults: {
                tooltip: true,
            },
            columns: [{
                    title: "SL",
                    hozAlign: "center",
                    formatter: function(cell, formatterParams, onRendered) {
                        let row = cell.getRow();
                        let data = row.getData();
                        let page = table.getPage();
                        let perPage = table.getPageSize();

                        if (!page) page = 0;
                        if (!perPage) perPage = 10;

                        return ((row.getPosition(true) + 1) + ((page - 1) * perPage) - 1);
                    },
                    maxWidth: 30
                },
                {
                    title: "Purchase Date",
                    field: "asset_purchase_date",
                    hozAlign: "center",
                    headerSort: true,
                    // maxWidth: 400
                },
                {
                    title: "Asset Name",
                    field: "asset_name",
                    hozAlign: "center",
                    headerSort: true,
                },
                {
                    title: "Org. Name",
                    field: "organisation.organisation_name",
                    hozAlign: "center",
                    headerSort: true,
                    // maxWidth: 400
                },
                {
                    title: "Account Type Name",
                    field: "account_type.account_type_Name",
                    hozAlign: "center",
                    headerSort: true,
                    // maxWidth: 400
                },

                {
                    title: "Purchase Cost (₹)",
                    field: "asset_purchase_cost",
                    hozAlign: "center",
                    headerSort: true,
                    // maxWidth: 400
                },
                {
                    title: "Useful (yrs)",
                    field: "asset_useful_life",
                    hozAlign: "center",
                    headerSort: true,
                    
                },
                // {
                //     title: "Action",
                //     headerSort: false,
                //     maxWidth: 620,
                //     headerHozAlign: "center",
                //     formatter: function() {

                //         // let html = `
                //         //     <div class="flex justify-center items-center">
                //         //       `;
                //         // html += `  
                        
                //         // <span data-action="view" data-toggle="tooltip" data-original-title="View Details">
                //         //                      <a class="flex items-center mr-3"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" 
                //         //                  class="feather feather-eye w-4 h-4 mr-1"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                //         //                     <circle cx="12" cy="12" r="3"></circle>
                //         //                 </svg></a>
                //         //         </span>
                                    
                //         //           `;

                //         // if (canExecute) {
                //         //     html += `
                //         //      <a class="flex items-center mr-3" data-action="edit">
                //         //          <span  data-toggle="tooltip" data-original-title="Edit user">
                //         //            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square w-4 h-4 mr-1"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg> 
                //         //         </span>
                //         //          </a>
                //         //     <a class="flex items-center text-theme-6" data-action="delete">    
                //         //     <span class="action-link text-danger font-weight-bold text-xs"  data-toggle="tooltip" data-original-title="Delete user">
                //         //             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 w-4 h-4 mr-1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                //         //         </span>
                //         //           </a>
                //         //                       `;
                //         // }

                //         // return html;
                //     },
                //     cellClick: function(e, cell) {
                //         const rowData = cell.getRow().getData();
                //         const actionEl = e.target.closest('[data-action]');
                //         const action = actionEl ? actionEl.dataset.action : null;

                //         if (action === "view") {
                //             console.log("Row Data:", rowData);
                //             let encodedId = btoa(rowData.income_id);
                //             window.location.href = "/income/each/details/" + encodedId;

                //         } else if (action === "edit") {
                //             console.log("Row Data:", rowData);
                //             let encodedId = btoa(rowData.income_id);
                //             window.location.href = "/income/edit/" + encodedId;

                //         } else if (action === "delete") {
                //             const swalWithBootstrapButtons = Swal.mixin({
                //                 customClass: {
                //                     confirmButton: "btn btn-success",
                //                     cancelButton: "btn btn-danger"
                //                 },
                //                 buttonsStyling: true
                //             });
                //             swalWithBootstrapButtons.fire({
                //                 title: "Are you sure?",
                //                 text: `You want to delete the transaction!!!`,
                //                 icon: "warning",
                //                 showCancelButton: true,
                //                 confirmButtonText: "Yes",
                //                 cancelButtonText: "No",
                //                 reverseButtons: true
                //             }).then((result) => {
                //                 if (result.isConfirmed) {
                //                     $.ajax({
                //                         type: "POST",
                //                         url: "/income/delete/" + rowData
                //                             .income_id,
                //                         dataType: 'json',
                //                         data: {
                //                             id: rowData.income_id,
                //                             _token: '{{ csrf_token() }}'
                //                         },
                //                         success: function(response) {
                //                             if (response.status == true) {
                //                                 Swal.fire({
                //                                     title: "Deleted!",
                //                                     text: "Income deleted successfully.",
                //                                     icon: "success",
                //                                     confirmButtonText: "OK",
                //                                     customClass: {
                //                                         confirmButton: "btn btn-success"
                //                                     },
                //                                     buttonsStyling: true
                //                                 }).then(() => {
                //                                     table.setData();
                //                                 });
                //                                 toastr.success("Deleted Successfully",
                //                                     "Success", toastrProperties);
                //                             } else {
                //                                 Swal.fire({
                //                                     title: "Error!",
                //                                     text: "Error! Please try again later.",
                //                                     icon: "error",
                //                                     confirmButtonText: "OK",
                //                                     customClass: {
                //                                         confirmButton: "btn btn-danger"
                //                                     },
                //                                     buttonsStyling: true
                //                                 });
                //                             }
                //                         },
                //                         error: function(error) {
                //                             console.log(error);
                //                         }
                //                     });

                //                 }
                //             });
                //         }
                //     }
                // }
            ],
            rowFormatter: function(row) {
                const data = row.getData();
                if (data.is_current === 1) {
                    row.getElement().style.backgroundColor = "#1C3FAA";
                    row.getElement().style.color = "white";
                }
            },

            ajaxResponse: function(url, params, response) {
                return {
                    data: response.data,
                    last_page: response.last_page,
                    current_page: response.current_page,
                    total: response.total
                };
            }
        });

        document.getElementById("page-size").addEventListener("change", function() {
            table.setPageSize(Number(this.value));
        });
        document.getElementById("search-string").addEventListener("input", function() {
            table.setData();
        });
    </script>
    <style>
        #accounting-year-table {
            position: relative;
        }

        #accounting-year-table .tabulator-loader {
            position: absolute !important;
            inset: 0 !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.7) !important;
            z-index: 9999 !important;
        }

        #accounting-year-table .tabulator-loader-msg {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
        }
    </style>
@endsection