@extends('admin.layouts.master')

@section('css')
    @include('admin.helper.formscss')
@endsection

@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"> المستخدمين </h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection
@section('content')
    <!-- row -->
    <div id='blogId'>
        <div>
            <!-- row -->
            <div class="row">
                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
                    <!--div-->
                    <form id='newjob' novalidate>
                        @csrf
                        <div class="card">
                            <div class="card-body">
                                <div class="row row-sm">
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">الاسم</label>
                                        <input required class="form-control" name="name" type="text">
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">البريد الإلكتروني</label>
                                        <input required class="form-control" name="email" type="email"
                                            pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
                                            title="يرجى إدخال بريد إلكتروني صحيح">
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">رقم الهاتف</label>
                                        <input required class="form-control" name="mobile" type="tel">
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">المحل</label>
                                        <input required class="form-control" name="store" type="text">
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">الحد الأدنى للرصيد</label>
                                        <input class="form-control" name="min_balance" type="number" step="0.01"
                                            value="0">
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">كلمة المرور</label>
                                        <input required class="form-control" name="password" type="password" minlength="6"
                                            title="كلمة المرور يجب أن تكون 6 أحرف على الأقل">
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">تأكيد كلمة المرور</label>
                                        <input required class="form-control" name="password_confirmation" type="password"
                                            minlength="6" title="يرجى تأكيد كلمة المرور">
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">العملية الديناميكية</label>
                                        <select name="isApi" class="form-control">
                                            <option value="1" selected>تنشيط</option>
                                            <option value="0">تعطيل</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">فئة الأرباح</label>
                                        <select name="profit_rate" class="form-control" required>
                                            @foreach (Config('app.rates') as $rate)
                                                <option value="{{ $rate }}"> {{ $rate }} </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">العملة</label>
                                        <select name="currency_id" class="form-control" required>
                                            <option value="">اختر عملة</option>
                                            @foreach (\App\Models\Currency::all() as $currency)
                                                <option value="{{ $currency->id }}">{{ $currency->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">معدل التحويل</label>
                                        <input class="form-control" name="transfer_rate" type="number" step="0.01"
                                            value="0">
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">حالة المستخدم</label>
                                        <select name="isActive" class="form-control">
                                            <option value="1" selected>نشط</option>
                                            <option value="0">غير نشط</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">يمكنه طلب رصيد</label>
                                        <select name="canRequestBalance" class="form-control">
                                            <option value="0" selected>لا</option>
                                            <option value="1">نعم</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">يمكنه تحويل رصيد</label>
                                        <select name="canTransferBalance" class="form-control">
                                            <option value="0" selected>لا</option>
                                            <option value="1">نعم</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <!-- تمت إزالة حقل التحقق بناءً على الطلب؛ التحقق يُدار فقط من صفحة الفهرس -->
                                    </div>
                                </div>
                                <div class="text-center"> <button type="submit" @click="createUser"
                                        class="col-5 btn btn-primary mt-3 mb-0">
                                        حفظ</button>
                                    <button onclick="location.href='{{ route('admin.users.index') }}'"
                                        class="col-5 btn btn-secondary mt-3 mb-0" type="button"> رجوع</button>

                                </div>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
            <!-- row closed -->
        </div>
        <!-- Container closed -->
    </div>
    <!-- main-content closed -->
@endsection
{{-- href="{{route('sup.edit',$Supplier_edit->id)}}" --}}

@section('js')
    @include('admin.helper.formscripts')
    @include('vue')
    <script>
        // Click on a <p> element to alert a text
        app = new Vue({
            'el': '#blogId',
            data: {
                blockes: [],
                game_id: '',
                service_id: '',
                services: [],
                discounts: [],
                dis_game_id: '',
                password: '',
                percent: ''
            },
            methods: {
                createUser: function(e) {
                    e.preventDefault();

                    // التحقق من تطابق كلمات السر
                    const password = document.querySelector('input[name="password"]').value;
                    const passwordConfirmation = document.querySelector('input[name="password_confirmation"]')
                        .value;

                    if (password !== passwordConfirmation) {
                        swal({
                            title: 'كلمات المرور غير متطابقة',
                            type: 'error',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }

                    // التحقق من ملء جميع الحقول المطلوبة
                    const form = document.getElementById('newjob');
                    if (!form.checkValidity()) {
                        form.reportValidity();
                        return;
                    }

                    let formData = new FormData(form);

                    Swal.fire({
                        title: 'جارٍ الحفظ...',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading(),
                    });

                    adawe('{{ route('admin.users.store') }}', formData)
                        .then(() => {
                            Swal.fire({
                                title: 'تم الحفظ بنجاح',
                                type: 'success',
                                confirmButtonText: 'موافق',
                            }).then(() => {
                                window.location.href = '{{ route('admin.users.index') }}';
                            });
                        })
                        .catch(error => {
                            console.error(error);
                            Swal.fire({
                                title: 'حدث خطأ أثناء الحفظ',
                                type: 'error',
                                confirmButtonText: 'موافق',
                            });
                        });
                }
            },
            created() {
                // إضافة مستمع للتحقق من تطابق كلمات السر
                this.$nextTick(() => {
                    const passwordInput = document.querySelector('input[name="password"]');
                    const confirmPasswordInput = document.querySelector(
                        'input[name="password_confirmation"]');

                    if (confirmPasswordInput) {
                        confirmPasswordInput.addEventListener('input', function() {
                            const password = passwordInput.value;
                            const confirmPassword = this.value;

                            if (confirmPassword && password !== confirmPassword) {
                                this.setCustomValidity('كلمات السر غير متطابقة');
                                this.style.borderColor = '#dc3545';
                            } else {
                                this.setCustomValidity('');
                                this.style.borderColor = '';
                            }
                        });
                    }
                });
            }
        });
    </script>
@endsection