@extends('layouts.app')
    @section('title')
        USER REGISTRATION
    @endsection
    @section('button')
        <a type="button" class="btn btn-info" href="{{ route('user.create') }}">
            <i class="bi bi-plus-square"></i> Create
        </a>
    @endsection
    @section('content')
        <style>
            .table thead tr input {
                background: transparent;
                color: white;
            }
        </style>
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered m-0 datatable">
                        <thead>
                            <tr>
                                <th>Sr #</th>
                                <th>Full Name</th>
                                <th>User Name</th>
                                <th>Email Address</th>
                                <th>Active</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <thead>
                            <tr>
                                <th></th>
                                <th><input type="text" id="search-full_name" placeholder="Search Full Name"></th>
                                <th><input type="text" id="search-user_name" placeholder="Search User Name"></th>
                                <th><input type="text" id="search-email" placeholder="Search Email Address"></th>
                                <th><input type="text" id="search-active" placeholder="Search Active"></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script>
            var searchTimeout;
            var data = "{{ route('user.data') }}";
            var table;
            let allData = {};
            $(document).ready(function() {
                let bool = true;
                const tableKey = 'DataTables_DataTables_Table_0_' + window.location.pathname;
                const savedState = localStorage.getItem(tableKey);

                if (savedState) {
                    allData = JSON.parse(savedState);
                    if (allData.columns) {
                        allData.columns.forEach((col, i) => {
                            if (col.search) {
                                $('thead tr:eq(1) th').eq(i).find('input').val(col.search);
                            }
                        });
                    }

                    if (allData.search && allData.search.sSearch) {
                        $('#dt-search-0').val(allData.search.sSearch);
                    }
                    bool = false;
                }
                
                table = $('.datatable').DataTable({
                    processing: true,
                    serverSide: true,
                    displayStart: allData.start || 0,
                    pageLength: allData.length || 10,
                    order: allData.order || [],
                    search: allData.search || {},
                    language: {
                        processing: 'Processing'
                    },
                    ajax: {
                        url: data,
                        type: 'GET',
                        data: function(d) {
                            d.full_name = $('#search-full_name').val();
                            d.user_name = $('#search-user_name').val();
                            d.email = $('#search-email').val();
                            d.active = $('#search-active').val();
                            d.bool = bool;
                        }
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            orderable: false,
                            searchable: false
                        },

                        {
                            data: 'full_name',
                            name: 'full_name',
                        },
                        {
                            data: 'user_name',
                            name: 'user_name',
                        },
                        {
                            data: 'email',
                            name: 'email',
                        }, {
                            data: 'is_active',
                            name: 'is_active',
                            render: function(data, type, row) {
                                if (data === 'yes') {
                                    return '<i class="fs-2 bi bi-check2" style="color: green"></i>';
                                } else {
                                    return '<i class="fs-3 bi bi-x-lg" style="color: red"></i>';
                                }
                            },
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },
                    ],
                    paging: true,
                    pagingType: 'input',

                });

                $(document).on('keyup', '#dt-search-0', function() {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(function() {
                        table.search($('#dt-search-0').val()).draw();
                    }, 1000);
                });

                let isFirstLoad = true;

                $('.datatable').on('search.dt page.dt order.dt length.dt', function() {
                    if (isFirstLoad) {
                        isFirstLoad = false;
                        return;
                    }
                    bool = false;
                    storeInLocalStorage();
                });

                $('.datatable thead tr:eq(1) th').each(function(i) {
                    $('input', this).on('keyup change', function() {
                        let value = this.value;
                        if (table.column(i).search() !== value) {
                            clearTimeout(searchTimeout);
                            searchTimeout = setTimeout(() => {
                                table.column(i).search(value).draw();
                                bool = false;
                                storeInLocalStorage();
                            }, 500);
                        }
                    });
                });

                function storeInLocalStorage() {
                    const tableKey = 'DataTables_DataTables_Table_0_' + window.location.pathname;
                    const settings = table.settings()[0];
                    const state = {
                        time: +new Date(),
                        start: settings._iDisplayStart,
                        length: settings._iDisplayLength,
                        order: settings.aaSorting,
                        search: settings.oPreviousSearch,
                        columns: settings.aoPreSearchCols.map(col => ({
                            search: col.sSearch
                        }))
                    };
                    localStorage.setItem(tableKey, JSON.stringify(state));
                }
            });
        </script>
    @endsection