@extends('layouts.app')

@section('content')
@php
    $canCreateAdmin = auth()->check() && auth()->user()->hasPermission('admin', 'create');
        $canEditAdmin = auth()->check() && auth()->user()->hasPermission('admin', 'edit');
        $canDeleteAdmin = auth()->check() && auth()->user()->hasPermission('admin', 'delete');
        $canUseBulkActions = $canDeleteAdmin || $canEditAdmin;
    
@endphp
<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Admin Management</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Admin List</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                @if ($canCreateAdmin)
                    <a href="{{ route('admin.admins.create') }}" class="btn btn-primary">Add Admin</a>
                @endif
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
 
                    <div class="card">
                <div class="card-body">
                    @if ($canUseBulkActions)
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <select id="bulk-action" class="form-select" style="max-width: 220px;">
                                <option value="">Select Bulk Action</option>
                                @if ($canEditAdmin)
                                    <option value="activate">Activate</option>
                                    <option value="deactivate">Deactivate</option>
                                @endif
                                @if ($canDeleteAdmin)
                                    <option value="delete">Delete</option>
                                @endif
                            </select>
                            <button type="button" class="btn btn-primary" id="apply-bulk-action">Apply</button>
                        </div>
                    @endif
                <div class="table-responsive">
                    <table id="admins-table" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="select-all-checkbox-in-table"></th>
                                <th>#</th>
                                <th>Profile Image</th>                              
                                <th>Name</th>
                                <th>Email</th>
                                <th>Account Type</th>
                                <th>Status</th>
                                <th>Online Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@include('includes.commonjs')
<script>
$(function() {
    initBulkActionModule({
        bulkActionUrl: "{{ route('admin.admins.bulk-action') }}",
        csrfToken: "{{ csrf_token() }}",
        namespace: 'admins-index',
        tableSelector: '#admins-table',
        selectors: {
            selectAll: '#select-all-checkbox-in-table',
            rowCheckbox: '.single-checkbox-in-table',
            bulkActionSelect: '#bulk-action',
            applyButton: '#apply-bulk-action',
            statusToggleButton: '.status-toggle-btn',
        },
        dataTableOptions: {
            processing: true,
            serverSide: true,
            order: [
                [1, 'asc']
            ],
            ajax: "{{ route('admin.admins.index') }}",
            columns: [
                {
                    data: 'select_checkbox',
                    name: 'select_checkbox',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'profile_image',
                    name: 'profile_image',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'account_type_badge',
                    name: 'account_type',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'status_toggle',
                    name: 'status_toggle',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'online_status_toggle',
                    name: 'online_status_toggle',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'actions',
                    name: 'actions',
                    orderable: false,
                    searchable: false
                },
            ]
        }
    });

    $(document).on('click', '.online-status-toggle-btn', function () {
        let button = $(this);
        let id = button.data('id');
        let token = "{{ csrf_token() }}";

        button.prop('disabled', true);

        $.ajax({
            url: "{{ route('admin.admins.online-status-toggle') }}",
            type: "POST",
            data: {
                _token: token,
                id: id
            },
            success: function (res) {
                if (res.success) {
                    toastr.success(res.message);
                    if ($.fn.DataTable.isDataTable('#admins-table')) {
                        $('#admins-table').DataTable().ajax.reload(null, false);
                    }
                } else {
                    toastr.error(res.message || 'Error updating status');
                }
            },
            error: function (xhr) {
                let message = xhr.responseJSON?.message || 'Error updating status';
                toastr.error(message);
            },
            complete: function () {
                button.prop('disabled', false);
            }
        });
    });
});
</script>
@endsection