@extends('admin.app')
<x-navigation page-title="Usuarios" group-name="Administración"/>
@section('content')

    @include('admin._includes.flash')

    <div class="d-flex flex-column gap-7">
        <div class="card shadow-sm">
            <div class="card-header">
                <div class="card-title"><h2>Filtros</h2></div>
                <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                    <button class="btn btn-sm btn-icon-dark btn-text-dark bg-gray-300 btn-active-danger" type="button" id="kt_table_reset">
                        <i class="ki-duotone ki-cross-circle fs-3">
                            <i class="path1"></i>
                            <i class="path2"></i>
                        </i> Resetear Filtro
                    </button>
                    <x-datatable.buttons :create-link="route('admin.users.create')" />
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex flex-row-fluid flex-wrap gap-7">
                    <div class="d-flex flex-column min-w-225px">
                        <label class="fs-6 form-label fw-bold text-dark">Búsqueda</label>
                        <div class="position-relative w-md-325px me-md-2">
                            <i class="ki-duotone ki-magnifier fs-3 position-absolute top-50 translate-middle ms-6">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                            <input type="text" data-table-filter="search" class="form-control form-control-solid ps-10" placeholder="Buscar por nombre o email">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card card-flush shadow-sm">
            <div class="card-body p-0">
                <x-datatable table-name="kt_table_users">
                    <th class="text-center w-50px">#</th>
                    <th class="text-start min-w-300px">Nombre</th>
                    <th class="text-start min-w-200px">Correo</th>
                    <th class="text-end min-w-100px">Acciones</th>
                </x-datatable>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>

        function makeSearch(){
            let searchValue = document.querySelector('[data-table-filter="search"]').value
            let searchObject = {}

            if(searchValue != "") searchObject['search'] = searchValue;

            localStorage.setItem('userFilter', JSON.stringify(searchObject));

            dt.search(JSON.stringify(searchObject)).draw();
        }

        function loadFilters(){
            if(localStorage.hasOwnProperty('userFilter')){
                let data = JSON.parse(localStorage.getItem('userFilter'))

                if(data.hasOwnProperty('search'))
                    document.querySelector('[data-table-filter=search]').value = data.search
            }
            dt.draw();
        }

        KTUtil.onDOMContentLoaded(function () {

            <x-datatable.scripts table-name="kt_table_users" order="[[0, 'asc']]" ajax-url="{{route('admin.users.ajax')}}">
                <x-slot name="columns">
                    { "searchable": false, "orderable": true,  "className": 'text-center', data: 'id' },
                    { "searchable": true,  "orderable": true,  "className": 'text-start',  data: 'name' },
                    { "searchable": true,  "orderable": true,  "className": 'text-start',  data: 'email' },
                    { "searchable": false, "orderable": false, "className": 'text-end',    data: null },
                </x-slot>
                <x-slot name="config">
                    deferLoading: 0,
                </x-slot>
                <x-slot name="columnDefinition">
                    {
                        targets: 1,
                        render: function (data, type, row) {
                            return  `
                                <div class="d-flex align-items-center">
                                    <a href="/admin/users/${row.id}/edit" class="text-dark text-hover-primary">${data}</a>
                                </div>
                            `;
                        },
                    },
                    {
                        targets: 2,
                        render: function (data, type, row) {
                            return  `
                                <div class="d-flex align-items-center">
                                    <a href="/admin/users/${row.id}/edit" class="text-dark text-hover-primary">${data}</a>
                                </div>
                            `;
                        },
                    }
                </x-slot>
                <x-slot name="actions">
                    <div class="menu-item px-3">
                        <a href="/admin/users/${row.id}/edit" class="menu-link px-3">Editar</a>
                    </div>
                    <div class="menu-item px-3">
                        <a href="/admin/users/${row.id}/destroy" class="menu-link px-3" data-table-action="delete">Eliminar</a>
                    </div>
                </x-slot>
            </x-datatable.scripts>

            dt.on('draw', function () {
                KTMenu.createInstances();
            });

            document.querySelector('[data-table-filter="search"]').addEventListener('keyup', debounce((e) => {
                makeSearch();
            }, 500));

            document.querySelector('#kt_table_reset').addEventListener('click', function(e){
                e.preventDefault();

                localStorage.removeItem('userFilter');
                document.querySelector('[data-table-filter=search]').value = ""

                dt.search("").draw();
            })

            loadFilters();

            <x-datatable.extra-script variable-name="dt" table-name="kt_table_users"/>
        })

    </script>
@endpush