@extends('vendors.layouts.master')


@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 class="d-flex my-xl-auto right-content">
            <div class="mb-3 mb-xl-0">
                <div class="btn-list">
                    <a href="{{ route('vendor.users.index') }}" class="btn btn-info">
                        <x-lucide-arrow-left /> العودة للقائمة
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection
@section('content')
    <!-- row -->
    <div id='blogId'>
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mg-b-0">بيانات المستخدم الجديد</h4>
                        </div>
                    </div>

                    <div class="card-body">
                        <form id='newjob' novalidate>
                            @csrf
                            <div class="row row-sm">
                                <div class="col-lg-4 mt-3">
                                    <label class="form-label">الاسم <span class="text-danger">*</span></label>
                                    <input required class="form-control" name="name" type="text">
                                </div>
                                <div class="col-lg-4 mt-3">
                                    <label class="form-label">البريد الإلكتروني <span class="text-danger">*</span></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">رقم الهاتف <span class="text-danger">*</span></label>
                                    <input required class="form-control" name="mobile" type="tel">
                                </div>
                                <div class="col-lg-4 mt-3">
                                    <label class="form-label">المحل</label>
                                    <input class="form-control" name="store" type="text">
                                </div>

                               
                                <div class="col-lg-4 mt-3">
                                    <label class="form-label">كلمة المرور <span class="text-danger">*</span></label>
                                    <input required class="form-control" name="password" type="password" minlength="8"
                                        title="كلمة المرور يجب أن تكون 8 أحرف على الأقل">
                                </div>
                                <div class="col-lg-4 mt-3">
                                    <label class="form-label">تأكيد كلمة المرور <span class="text-danger">*</span></label>
                                    <input required class="form-control" name="password_confirmation" type="password"
                                        minlength="8" title="يرجى تأكيد كلمة المرور">
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-12">
                                    <div class="alert alert-info">
                                        <x-lucide-info />
                                        <strong>ملاحظة:</strong> سيتم ربط هذا المستخدم تلقائياً بحسابك كتاجر وسيكون تحت
                                        إدارتك.
                                        <br>
                                        <strong>رصيدك الحالي:</strong> {{ number_format(Auth::user()->balance, 2) }}
                                        {{ Auth::user()->currency->symbol ?? '' }}
                                        <br>
                                        <small class="text-muted">سيتم خصم الرصيد الابتدائي من رصيدك إذا تم تحديده</small>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center mt-4">
                                <button type="submit" @click="createUser" class="col-5 btn btn-primary mt-3 mb-0">
                                    <x-lucide-save /> إنشاء المستخدم
                                </button>
                                <button onclick="location.href='{{ route('vendor.users.index') }}'"
                                    class="col-5 btn btn-secondary mt-3 mb-0" type="button">
                                    <x-lucide-x /> إلغاء
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('vue')
    <script>
        app = new Vue({
            'el': '#blogId',
            data: {
                password: '',
                passwordConfirmation: ''
            },
            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.fire({
                            title: 'كلمات المرور غير متطابقة',
                            icon: 'error',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }

                    if (password.length < 8) {
                        Swal.fire({
                            title: 'كلمة المرور يجب أن تكون 8 أحرف على الأقل',
                            icon: 'error',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }

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

                    let formData = new FormData(form);
                    formData.append('_ajax', '1');

                    Swal.fire({
                        title: 'جارٍ الحفظ...',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading(),
                    });
                    
                axios.post('{{ route('vendor.users.store') }}', formData).then(response => {
                    if (response.status !== 200) {} else {
                            if (response.data.err == true || response.data.success == false) {
                                swal({
                                    title: response.data.msg || response.data.message || "Default title",
                                    type: 'warning',
                                    confirmButtonText: 'موافق',
                                });
                            } else {
                                swal({
                                    title: response.data.msg || response.data.message || "Default title",
                                    type: 'success',
                                    confirmButtonText: 'موافق',
                                    allowOutsideClick: false,
                                });
                                return response.data.err;
                            }
                        }
                    }).catch(error => {
                        console.log(error.response)
                        let errorMessage = 'هناك خطأ ما غير متوقع';

                        if (error.response) {
                            if (error.response.data.message) {
                                errorMessage = error.response.data.message;
                                const firstError = Object.values(error.response.data.errors)[0];
                                if (firstError && firstError.length > 0) {
                                    errorMessage = errorMessage  + ' - ' + firstError[0];
                                }
                            } else if (error.response.data.errors) {
                                const firstError = Object.values(error.response.data.errors)[0];
                                if (firstError && firstError.length > 0) {
                                    errorMessage = firstError[0];
                                }
                            }
                        }

                        swal({
                            title: errorMessage,
                            type: 'warning',
                            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