@extends('layouts.app')
@section('title', 'المستخدمين')
@section('page_title', 'المستخدمين والموظفين')
@section('page_subtitle', 'إدارة حسابات الموظفين والأدوار والأرقام الداخلية')

@section('page_actions')
    @if (auth()->user()->hasPermission('users.create'))
        <button class="btn btn-primary" id="btnAdd"><i class="bi bi-plus-lg"></i> مستخدم جديد</button>
    @endif
@endsection

@section('content')
<div class="card mb-3">
    <div class="card-body">
        <div class="row g-2">
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterTeam">
                    <option value="">كل الفرق</option>
                    @foreach ($teams as $team)
                        <option value="{{ $team->id }}">{{ $team->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterStatus">
                    <option value="">كل الحالات</option>
                    <option value="active">نشط</option>
                    <option value="inactive">موقوف</option>
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterAgentStatus">
                    <option value="">كل حالات العمل</option>
                    @foreach (\App\Models\User::STATUSES as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <button class="btn btn-sm btn-outline-secondary w-100" id="btnReset"><i class="bi bi-arrow-counterclockwise"></i> إعادة ضبط</button>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body table-responsive">
        <table class="table table-hover table-striped w-100" id="usersTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>الاسم</th>
                    <th>اسم المستخدم</th>
                    <th>الرقم الداخلي</th>
                    <th>الفريق</th>
                    <th>الأدوار</th>
                    <th>حالة العمل</th>
                    <th>الحساب</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@include('users.partials.modal')
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const table = MR.table('#usersTable', '{{ route('users.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'name', name: 'name' },
        { data: 'username', name: 'username' },
        { data: 'extension', name: 'extension', defaultContent: '—' },
        { data: 'team_label', name: 'team_name' },
        { data: 'roles_label', orderable: false, searchable: false },
        { data: 'agent_status_badge', name: 'agent_status' },
        { data: 'status_badge', orderable: false, searchable: false },
        { data: 'actions', orderable: false, searchable: false }
    ], {
        filters: function () {
            return {
                team_id: $('#filterTeam').val(),
                status: $('#filterStatus').val(),
                agent_status: $('#filterAgentStatus').val()
            };
        }
    });

    $('#filterTeam, #filterStatus, #filterAgentStatus').on('change', function () { table.ajax.reload(); });
    $('#btnReset').on('click', function () {
        $('#filterTeam, #filterStatus, #filterAgentStatus').val('');
        table.ajax.reload();
    });

    const $modal = $('#userModal');
    const $form = $('#userForm');

    $('#btnAdd').on('click', function () {
        $form[0].reset();
        $form.data('url', '{{ route('users.store') }}').data('method', 'POST');
        $form.find('[name="roles[]"]').prop('checked', false);
        $('#userModalTitle').text('إضافة مستخدم');
        $modal.modal('show');
    });

    $('#usersTable').on('click', '[data-action=edit]', function () {
        const id = $(this).data('id');
        $.getJSON('{{ url('users') }}/' + id, function (res) {
            $form[0].reset();
            MR.fill($form, res.user);
            $form.find('[name="roles[]"]').prop('checked', false);
            res.roles.forEach(function (roleId) {
                $form.find('[name="roles[]"][value="' + roleId + '"]').prop('checked', true);
            });
            $form.data('url', '{{ url('users') }}/' + id).data('method', 'PUT');
            $('#userModalTitle').text('تعديل مستخدم');
            $modal.modal('show');
        });
    });

    $('#usersTable').on('click', '[data-action=delete]', function () {
        MR.remove($(this).data('url'), function () { table.ajax.reload(null, false); });
    });

    $('#usersTable').on('click', '[data-action=toggle]', function () {
        MR.post($(this).data('url'), {}, function () { table.ajax.reload(null, false); });
    });

    $form.on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function () { $modal.modal('hide'); table.ajax.reload(null, false); } });
    });
});
</script>
@endpush