@extends(config('admin_theme.layout', 'admin.layout.master'))
@section('title')
    {{ $current_route->{'name_' . trans('admin.lang')} }}
@stop
@section('page-breadcrumb')
    @include(config('admin_theme.view_prefix', 'admin').'.layout.breadcrumb_view')
@stop
@section('page-content')
    <div class="dashboard__section__overview d-md-flex justify-content-between pt-4">
        <div class="dashboard__section-tile">
            <h3>{{ $current_route->{'name_' . trans('admin.lang')} }}</h3>
        </div>
        <div class="dashboard__section-buttons d-flex align-items-center gap-3 pt-4 pt-md-0">
            @if($tenant->package == 3 || (in_array($tenant->package, [1, 2]) && $exist_users_count < $tenant->users_count))
                @can('admin.users.add')
                    @if(App\Helpers\Helpers::checkAccountLink(1))
                        <div class="dashboard__btn-fill">
                            <a href="{{ route('users.add') }}">
                                <img src="{{ asset('assets/modern/images/add_w.svg') }}" alt=""/>
                                @lang('admin.add')
                            </a>
                        </div>
                    @else
                        {{ App\Helpers\Helpers::viewAccountLinkMsg() }}
                    @endif
                @endcan
            @else
                <p class="alert alert-danger">@lang('admin.exceeded_users')</p>
            @endif
        </div>
    </div>
    @include(config('admin_theme.view_prefix', 'admin').'.layout.error')
    <div class="users">
        <div class="users__table pt-3">
            <div class="table__container">
                <div class="table__responsive">
                    <table id="users_table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>@lang('admin.name')</th>
                            <th>@lang('admin.status')</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@stop
@section('modal')
    @include(config('admin_theme.view_prefix', 'admin').'.layout.ajax')
@stop
@section('js')
    <script>
        $(document).ready(function () {
            let usersTable = $('#users_table').DataTable({
                dom: "<'row mb-0'<'col-sm-6'f><'col-sm-6 text-end'B>>" +
                    "<'table__responsive't>" +
                    "<'pagination__strech d-flex flex-column flex-md-row justify-content-between align-items-center'<'page__numbers'i><'d-flex mt-3 mt-md-0'p>>",
                processing: true,
                serverSide: true,
                responsive: true,
                lengthChange: false,
                autoWidth: false,
                searching: false,
                ajax: {
                    url: "{{ route('users.list') }}",
                    data: function (data) {
                        data.name = $('input[name="name"]').val();
                    }
                },
                order: [[1, 'asc']],
                columnDefs: [{targets: '_all', defaultContent: ''}],
                columns: [
                    {data: ''},
                    {data: 'name'},
                    {data: 'status'},
                    {data: 'actions', orderable: false}
                ],
                fnDrawCallback: function () {
                    usersTable.column(0).nodes().each(function (cell, i) {
                        cell.innerHTML = parseInt(usersTable.page.info().start) + i + 1;
                    });
                }
            });
            $(document).on('click', '.status', function () {
                let item = $(this);
                $.post("{{ route('users.status') }}", {
                    id: item.data('href'),
                    _token: $('meta[name="csrf-token"]').attr('content')
                }, function (data) {
                    item.toggleClass('td__green', data.type === 'yes')
                        .toggleClass('td__red', data.type !== 'yes')
                        .html(data.type === 'yes' ? "@lang('admin.enable')" : "@lang('admin.disable')");
                    toastr[data.status](data.message);
                });
            });
            $('#confirm').on('show.bs.modal', function (event) {
                $('#delete_id').val($(event.relatedTarget).data('href'));
            });
            $(document).on('click', '.delete', function () {
                $.post("{{ route('users.delete') }}", {
                    id: $('#delete_id').val(),
                    _token: $('meta[name="csrf-token"]').attr('content')
                }, function (data) {
                    toastr[data.status](data.message);
                    usersTable.draw();
                });
            });
        });
    </script>
@stop