@php
$breadcrumb = [
['label' => 'Dashboard', 'url' => route('admin.dashboard')],
['label' => 'Site Settings Pages']
];
@endphp
@extends('admin.layouts.app')
@section('title', 'Site Settings table')
@section('content')
<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                    <h6>All Site Details</h6>
                </div>
               
            </div>
            <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">Size:</label>
                    <select id="page-size" class="form-select form-select-sm" style="width: auto; min-width: 80px;">
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
                <div class="col-lg-4">
                    <input type="text" class="form-control" id="search-string" placeholder="Search...">
                </div>
            </div>
            <div class="row">

            </div>
            <div class="card-body px-0 pt-0 pb-2">
                <div class="table-responsive p-4">
                    <div id="site-settings-table"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<link href="{{ asset('backend/assets/css/tabulator.min.css') }}" rel="stylesheet">
<link href="{{ asset('backend/assets/css/tabulator_materialize.min.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('backend/assets/js/tabulator.min.js') }}"></script>
<script>
    var table = new Tabulator("#site-settings-table", {
        ajaxURL: "{{ route('admin.site-settings.paginate') }}",
        ajaxParams: function() {
            return {
                _token: document.querySelector('meta[name="csrf-token"]').getAttribute("content"),
                search: document.querySelector("#search-string").value
            };
        },
        ajaxConfig: "POST",
        layout: "fitDataStretch",
        theme: "bootstrap5",
        paginationMode: "remote",
        pagination: true,
        paginationSize: 25,
        paginationSizeSelector: false,
        layout: "fitColumns",
        ajaxProgressiveLoad: "scroll",
        placeholder: "<span class='px-4 py-4 rounded text-secondary'>No Data Available</span>",
        search: true,
        columns: [{
                title: "SL",
                field: "id"

            },
            {
                title: "Name",
                headerSort: false,
                formatter: function(cell) {
                    const data = cell.getRow().getData();
                    return `<div>
                    <h6 class="mb-0 text-sm">${data.name}</h6>
                </div>`;
                }

            },

          
            {
                title: "Action",
                headerSort: false,

                headerHozAlign: "center",
                formatter: function() {
                    return `
            <div class="d-flex  justify-content-center align-items-center gap-3">
            <a href="javascript:;" class="action-link text-secondary font-weight-bold text-xs" data-action="edit_page" data-toggle="tooltip" data-original-title="Edit Page">
                    <i class="fa-solid fa-pen-to-square"></i>
                </a>
            </div>
        `;
                },
                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") {
                        let encodedId = btoa(rowData.id); // JS base64 encode
                        window.location.href = "www.google.com";

                    } else if (action === "edit_page") {
                        let encodedId = btoa(rowData.id); // JS base64 encode
                        window.location.href = "{{route('admin.site-settings.edit')}}" + '/' + encodedId;

                    } else if (action === "delete") {
                        const swalWithBootstrapButtons = Swal.mixin({
                            customClass: {
                                confirmButton: "btn btn-success",
                                cancelButton: "btn btn-danger"
                            },
                            buttonsStyling: false
                        });
                        swalWithBootstrapButtons.fire({
                            title: "Are you sure?",
                            text: `You want to delete the team member named "${rowData.name}"`,
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonText: "Yes, delete it!",
                            cancelButtonText: "No, cancel!",
                            reverseButtons: true
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $.ajax({
                                    type: "POST",
                                    url: "{{ route('admin.site-settings.delete') }}",
                                    dataType: 'json',
                                    data: {
                                        id: rowData.id,
                                        _token: '{{ csrf_token() }}'
                                    },
                                    success: function(response) {
                                        if (response.status == true) {
                                            toastr.success("Deleted Successfully", "Success", toastrProperties);
                                            setTimeout(() => {
                                                table.setData();
                                            }, 400)
                                        } else {
                                            toastr.error("Error! Please try after some time", "Error", toastrProperties);
                                        }
                                    },
                                    error: function(error) {
                                        console.log(error);
                                    }
                                });

                            }
                        });
                    }
                }
            }
        ],

        ajaxResponse: function(url, params, response) {
            if (!response.data || response.data.length === 0) {
                return [];
            }
            return response.data;
        }
    });
    $(document).ready(function() {
        // Page size change
        $('#page-size').on('change', function() {
            table.setPageSize(Number($(this).val()));
        });

        // Search input
        $('#search-string').on('input', function() {
            table.setData();
        });
    });
    table.on("rowClick", function(e, row) {
        const isActionClick = e.target.closest(".action-link");

        // Prevent redirect if user clicked on action buttons (edit/delete/status)
        if (!isActionClick && !e.target.closest('.badge')) {
            const rowData = row.getData();
            let encodedId = btoa(rowData.id); // base64 encode
            window.location.href = "{{route('admin.site-settings.edit')}}" + '/' + encodedId;
     
        }
    });
</script>
@endpush