@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>

            <div class="row">
                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">

                    <form id='newuser'>
                        <div class="card">
                            <div class="card-body">
                                <div class="main-content-label mg-b-5">
                                    ادخال اكواد
                                </div>
                                <div class="row row-sm">
                                    <div class="col-lg-4 mt-2">
                                        <label class="mt-0"> مجموعه <span class="text-danger">*</span></label>
                                        <select name="groub_id" id='groub_id' class="form-control select2" required>
                                            <option value=""> اختر المجموعة </option>
                                            @foreach ($groups as $group)
                                                <option value="{{ $group->id }}">{{ $group->name }}</option>
                                            @endforeach
                                        </select>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                    <div class="col-lg-12 mt-3">
                                        <label class="form-label">الأكواد <span class="text-danger">*</span></label>
                                        <small class="form-text text-muted">يرجى إدخال كود واحد في كل سطر</small>
                                        <textarea class="form-control" name="codes[]" rows="10" placeholder="أدخل الأكواد هنا، كل كود في سطر منفصل..."
                                            required></textarea>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary mt-3 mb-0"> إضافة </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- row closed -->
        </div>
        <!-- Container closed -->
    </div>
    <!-- main-content closed -->
@endsection

@section('js')
    @include('vue')
    @include('admin.helper.formscripts')
    <script>
        $(function() {
            // تفعيل Select2
            $('.select2').select2({
                placeholder: "اختر المجموعة",
                allowClear: true
            });

            $('#newuser').on('submit', function(e) {
                e.preventDefault();

                // إزالة رسائل الخطأ السابقة
                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').text('');

                // التحقق من البيانات المطلوبة
                let isValid = true;
                const groubId = $('#groub_id').val();
                const codes = $('textarea[name="codes[]"]').val().trim();

                if (!groubId) {
                    $('#groub_id').addClass('is-invalid');
                    $('#groub_id').siblings('.invalid-feedback').text('يرجى اختيار المجموعة');
                    isValid = false;
                }

                if (!codes) {
                    $('textarea[name="codes[]"]').addClass('is-invalid');
                    $('textarea[name="codes[]"]').siblings('.invalid-feedback').text('يرجى إدخال الأكواد');
                    isValid = false;
                }

                if (!isValid) {
                    return;
                }

                // إظهار loading
                const submitBtn = $(this).find('button[type="submit"]');
                const originalText = submitBtn.text();
                submitBtn.prop('disabled', true).html(
                    `{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!} جاري الحفظ...`);

                let formData = new FormData(document.getElementById('newuser'));

                axios.post('{{ route('admin.codes.store') }}', formData)
                    .then(response => {
                        if (response.status === 200) {
                            if (response.data.err === true) {
                                Swal.fire({
                                    title: 'خطأ',
                                    text: response.data.msg || response.data.message ||
                                        "حدث خطأ",
                                    icon: 'error',
                                    confirmButtonText: 'موافق',
                                });
                            } else {
                                Swal.fire({
                                    title: 'نجح',
                                    text: response.data.msg || response.data.message ||
                                        "تم الحفظ بنجاح",
                                    icon: 'success',
                                    confirmButtonText: 'موافق',
                                }).then(() => {
                                    // إعادة تعيين النموذج
                                    document.getElementById('newuser').reset();
                                    $('.select2').val(null).trigger('change');
                                });
                            }
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);

                        if (error.response && error.response.status === 422) {
                            // أخطاء التحقق
                            const errors = error.response.data.errors;
                            for (const field in errors) {
                                const fieldElement = $(`[name="${field}"]`);
                                fieldElement.addClass('is-invalid');
                                fieldElement.siblings('.invalid-feedback').text(errors[field][0]);
                            }
                        } else {
                            Swal.fire({
                                title: 'خطأ',
                                text: 'حدث خطأ غير متوقع، يرجى المحاولة مرة أخرى',
                                icon: 'error',
                                confirmButtonText: 'موافق',
                            });
                        }
                    })
                    .finally(() => {
                        // إعادة الزر لحالته الطبيعية
                        submitBtn.prop('disabled', false).text(originalText);
                    });
            });
        });
    </script>
@endsection