@extends('layouts.master')

@section('title', 'المستخدمين')
@section('pages') {{ __('dashboard.home') }} @endsection

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@endsection

@section('content')
    <div class="container-fluid">

        <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
            <h5 class="mb-0">إدارة المستخدمين</h5>
            <button class="btn btn-primary" id="addUserBtn">
                <i class="fas fa-plus mx-2"></i>إضافة مستخدم
            </button>
        </div>

        <div class="card p-3 mb-3">
            <div class="row g-2">
                <div class="col-md-4">
                    <input type="text" id="f_name" class="form-control" placeholder="ابحث بالاسم...">
                </div>
                <div class="col-md-4">
                    <select id="f_branch" class="form-select">
                        <option value="">— كل الفروع —</option>
                        @foreach ($branches as $b)
                            <option value="{{ $b->id }}">{{ $b->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 d-grid d-md-flex gap-2">
                    <button class="btn btn-secondary" id="f_reset">إعادة تعيين</button>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table id="users-table" class="table table-bordered text-center w-100">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>الاسم</th>
                        <th>البريد</th>
                        <th>الفرع</th>
                        <th>الأدوار</th>
                        <th>إجراءات</th>
                    </tr>
                </thead>
            </table>
        </div>

    </div>

    {{-- Modal --}}
    <div class="modal fade" id="userModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="userForm">
                    @csrf
                    <input type="hidden" id="user_id">

                    <div class="modal-header">
                        <h5 class="modal-title">إضافة / تعديل مستخدم</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        <div class="mb-3">
                            <label>الاسم</label>
                            <input type="text" id="user_name" class="form-control">
                            <small class="text-danger d-none" id="nameError">الاسم لا يقل عن 3 أحرف</small>
                        </div>

                        <div class="mb-3">
                            <label>البريد الإلكتروني</label>
                            <input type="email" id="user_email" class="form-control">
                            <small class="text-danger d-none" id="emailError">بريد إلكتروني غير صالح</small>
                        </div>

                        <div class="mb-3">
                            <label>كلمة المرور</label>
                            <input type="password" id="user_password" class="form-control">
                            <small class="text-danger d-none" id="passwordError">لا تقل عن 6 أحرف</small>
                        </div>

                        <div class="mb-3">
                            <label>الفرع</label>
                            <select id="user_branch" class="form-select">
                                <option value="">اختر الفرع</option>
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <hr>
                        <label>الأدوار</label>
                        <div class="row">
                            @foreach ($roles as $role)
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input role-check"
                                            id="role{{ $role->id }}" value="{{ $role->id }}">
                                        <label class="form-check-label" for="role{{ $role->id }}">
                                            {{ $role->name }}
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-success" type="submit">حفظ</button>
                        <button class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script>
        $(function() {

            /* ================= DataTable ================= */
            let table = $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('users.list') }}",
                    data: d => {
                        d.name = $('#f_name').val();
                        d.branch_id = $('#f_branch').val();
                    }
                },
                language: {!! json_encode(__('datatable')) !!},
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'email'
                    },
                    {
                        data: 'branch'
                    },
                    {
                        data: 'roles',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            $('#f_name,#f_branch').on('keyup change', () => table.ajax.reload());
            $('#f_reset').on('click', () => {
                $('#f_name,#f_branch').val('');
                table.ajax.reload();
            });

            let modal = new bootstrap.Modal($('#userModal')[0]);

            /* ================= Live Validation ================= */
            const nameInput = $('#user_name');
            const emailInput = $('#user_email');
            const passwordInput = $('#user_password');

            const nameError = $('#nameError');
            const emailError = $('#emailError');
            const passwordError = $('#passwordError');

            const submitBtn = $('#userForm button[type="submit"]');

            function validateName() {
                if (nameInput.val().trim().length < 3) {
                    nameError.removeClass('d-none');
                    nameInput.addClass('is-invalid');
                    return false;
                }
                nameError.addClass('d-none');
                nameInput.removeClass('is-invalid');
                return true;
            }

            function validateEmail() {
                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!re.test(emailInput.val())) {
                    emailError.removeClass('d-none');
                    emailInput.addClass('is-invalid');
                    return false;
                }
                emailError.addClass('d-none');
                emailInput.removeClass('is-invalid');
                return true;
            }

            function validatePassword() {
                const val = passwordInput.val();
                if ($('#user_id').val() && val === '') {
                    passwordError.addClass('d-none');
                    passwordInput.removeClass('is-invalid');
                    return true;
                }
                if (val.length > 0 && val.length < 6) {
                    passwordError.removeClass('d-none');
                    passwordInput.addClass('is-invalid');
                    return false;
                }
                passwordError.addClass('d-none');
                passwordInput.removeClass('is-invalid');
                return true;
            }

            function validateForm() {
                const ok = validateName() & validateEmail() & validatePassword();
                submitBtn.prop('disabled', !ok);
                return !!ok;
            }

            nameInput.on('keyup change', validateForm);
            emailInput.on('keyup change', validateForm);
            passwordInput.on('keyup change', validateForm);

            /* ================= Add ================= */
            $('#addUserBtn').click(() => {
                $('#userForm')[0].reset();
                $('#user_id').val('');
                $('.role-check').prop('checked', false);
                $('.is-invalid').removeClass('is-invalid');
                $('small.text-danger').addClass('d-none');
                submitBtn.prop('disabled', false);
                modal.show();
            });

            /* ================= Edit ================= */
            $(document).on('click', '.editUser', function() {
                const id = $(this).data('id');

                fetch(`/users/${id}/edit`, {
                        headers: {
                            'Accept': 'application/json'
                        }
                    })
                    .then(r => r.json())
                    .then(d => {
                        $('#user_id').val(d.user.id);
                        nameInput.val(d.user.name);
                        emailInput.val(d.user.email);
                        $('#user_branch').val(d.user.branch_id ?? '');

                        $('.role-check').prop('checked', false);
                        (d.roles || []).forEach(rid => $('#role' + rid).prop('checked', true));

                        passwordInput.val('');
                        submitBtn.prop('disabled', false);
                        modal.show();
                    })
                    .catch(() => toastr.error('تعذر تحميل بيانات المستخدم'));
            });

            /* ================= Submit ================= */
            $('#userForm').submit(function(e) {
                e.preventDefault();
                if (!validateForm()) {
                    toastr.error('يرجى تصحيح الأخطاء');
                    return;
                }

                const id = $('#user_id').val();
                const url = id ? `/users/${id}` : `/users`;
                const method = id ? 'PUT' : 'POST';

                const roles = [];
                $('.role-check:checked').each(function() {
                    roles.push($(this).val());
                });

                fetch(url, {
                        method,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            name: nameInput.val(),
                            email: emailInput.val(),
                            password: passwordInput.val(),
                            branch_id: $('#user_branch').val(),
                            roles
                        })
                    })
                    .then(async r => {
                        if (!r.ok) {
                            if (r.status === 422) {
                                const d = await r.json();
                                toastr.error(Object.values(d.errors).flat().join('<br>'));
                                return;
                            }
                            toastr.error('فشل الحفظ');
                            return;
                        }
                        modal.hide();
                        table.ajax.reload(null, false);
                        toastr.success('تم الحفظ بنجاح');
                    });
            });

        });
    </script>
@endsection