@extends('admin.layouts.master')

@section('title', __('admin.users'))
@section('page_title', __('admin.users'))

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin.dashboard') }}</a></li>
    <li class="breadcrumb-item active">{{ __('admin.users') }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-users"></i> {{ __('admin.users') }}</h3>
        <div class="card-tools">
            @can('users.create')
                <button type="button" class="btn btn-primary btn-sm" id="addUserBtn">
                    <i class="fas fa-plus"></i> {{ __('admin.add') }}
                </button>
            @endcan
        </div>
    </div>

    <div class="card-body">
        {{-- Filters --}}
        <div class="row mb-3">
            <div class="col-md-3">
                <label class="small mb-1">{{ __('admin.role') }}</label>
                <select class="form-control form-control-sm filter-input" id="filter_role">
                    <option value="">{{ __('admin.search') }}…</option>
                    @foreach($roles as $r)
                        <option value="{{ $r->id }}">{{ $r->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="small mb-1">{{ __('admin.status') }}</label>
                <select class="form-control form-control-sm filter-input" id="filter_status">
                    <option value="">—</option>
                    <option value="active">{{ __('admin.active') }}</option>
                    <option value="inactive">{{ __('admin.inactive') }}</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="small mb-1">{{ __('admin.branches') }}</label>
                <select class="form-control form-control-sm filter-input" id="filter_branch_id">
                    <option value="">—</option>
                    @foreach($branches as $b)
                        <option value="{{ $b->id }}">{{ $b->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="resetFilters">
                    <i class="fas fa-undo"></i> {{ __('admin.reset') }}
                </button>
            </div>
        </div>

        <div class="table-responsive">
            <table id="usersTable" class="table table-bordered table-striped table-hover" style="width:100%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>{{ __('admin.avatar') }}</th>
                        <th>{{ __('admin.name') }}</th>
                        <th>{{ __('admin.email') }}</th>
                        <th>{{ __('admin.phone') }}</th>
                        <th>{{ __('admin.role') }}</th>
                        <th>{{ __('admin.status') }}</th>
                        <th>Last login</th>
                        <th>{{ __('admin.actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

@include('admin.users._user_modal',     ['roles' => $roles, 'branches' => $branches])
@include('admin.users._password_modal')
@endsection

@push('scripts')
<script>
$(function () {
    const table = $('#usersTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.users.data') }}',
            data: function (d) {
                d.role      = $('#filter_role').val();
                d.status    = $('#filter_status').val();
                d.branch_id = $('#filter_branch_id').val();
            }
        },
        language: {
            url: '{{ app()->getLocale() === "ar" ? "https://cdn.datatables.net/plug-ins/1.13.7/i18n/ar.json" : "" }}'
        },
        columns: [
            { data: 'id',           name: 'id', width: '60px' },
            { data: 'avatar',       name: 'avatar', orderable: false, searchable: false, width: '60px' },
            { data: 'name',         name: 'name' },
            { data: 'email',        name: 'email' },
            { data: 'phone',        name: 'phone' },
            { data: 'roles_list',   name: 'roles_list', orderable: false, searchable: false },
            { data: 'status',       name: 'status' },
            { data: 'last_login_at',name: 'last_login_at' },
            { data: 'actions',      name: 'actions', orderable: false, searchable: false }
        ]
    });

    $('.filter-input').on('change', () => table.ajax.reload());
    $('#resetFilters').on('click', () => {
        $('.filter-input').val('').trigger('change');
    });

    // Add new user
    $('#addUserBtn').on('click', function () {
        $('#userForm').trigger('reset')[0].action = '{{ route('admin.users.store') }}';
        $('#userMethod').val('POST');
        $('#userId').val('');
        $('#avatarPreview').attr('src', 'https://ui-avatars.com/api/?name=?');
        $('#userPasswordRow').show();
        $('input[name=password]').prop('required', true);
        $('#userModalLabel').text('{{ __('admin.create', ['resource' => __('admin.users')]) }}');
        $('#userRoles').val(null).trigger('change');
        $('#userModal').modal('show');
    });

    // Edit user — fetch via AJAX
    $('#usersTable tbody').on('click', '.edit-user-btn', function () {
        const id = $(this).data('id');
        $.get('{{ url('admin/users') }}/' + id, function (u) {
            $('#userForm').trigger('reset');
            $('#userForm')[0].action = '{{ url('admin/users') }}/' + u.id;
            $('#userMethod').val('PUT');
            $('#userId').val(u.id);
            $('input[name=name]').val(u.name);
            $('input[name=email]').val(u.email);
            $('input[name=phone]').val(u.phone);
            $('select[name=status]').val(u.status);
            $('select[name=branch_id]').val(u.branch_id || '');
            $('#avatarPreview').attr('src', u.avatar);
            $('#userPasswordRow').hide();
            $('input[name=password]').prop('required', false);
            $('#userModalLabel').text('{{ __('admin.edit_resource', ['resource' => __('admin.users')]) }}');
            $('#userRoles').val(u.role_ids).trigger('change');
            $('#userModal').modal('show');
        }).fail(() => toastr.error('{{ __('admin.something_went_wrong') }}'));
    });

    // Avatar preview
    $('input[name=avatar]').on('change', function () {
        const f = this.files && this.files[0];
        if (!f) return;
        const r = new FileReader();
        r.onload = e => $('#avatarPreview').attr('src', e.target.result);
        r.readAsDataURL(f);
    });

    // Password modal
    $('#usersTable tbody').on('click', '.password-user-btn', function () {
        const id   = $(this).data('id');
        const name = $(this).data('name');
        $('#passwordForm')[0].action = '{{ url('admin/users') }}/' + id + '/password';
        $('#passwordForm').trigger('reset');
        $('#passwordModalUser').text(name);
        $('#passwordModal').modal('show');
    });

    // Toggle status
    $('#usersTable tbody').on('click', '.toggle-status-btn', function () {
        const url = $(this).data('url');
        const $f = $('<form method="POST">').attr('action', url);
        $f.append('@csrf @method('PATCH')');
        $('body').append($f); $f.submit();
    });

    // Delete
    $('#usersTable tbody').on('click', '.delete-user-btn', function () {
        const url = $(this).data('url');
        Swal.fire({
            title: '{{ __('admin.are_you_sure') }}',
            icon: 'warning', showCancelButton: true,
            confirmButtonColor: '#dc3545',
            confirmButtonText: '{{ __('admin.confirm') }}',
            cancelButtonText: '{{ __('admin.cancel') }}',
        }).then(r => {
            if (!r.isConfirmed) return;
            const $f = $('<form method="POST">').attr('action', url);
            $f.append('@csrf @method('DELETE')');
            $('body').append($f); $f.submit();
        });
    });

    // Select2 inside the modal
    $('#userRoles').select2({
        dropdownParent: $('#userModal'),
        placeholder: '{{ __('admin.role') }}',
        allowClear: true,
        width: '100%'
    });

    // Show server-side errors if any
    @if($errors->any())
        $('#userModal').modal('show');
    @endif
});
</script>
@endpush