@extends('user.layouts.app')
@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/level-system.css') }}">
    <!-- Tagify CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    <div class="content-wrapper" x-data="apiSettings">
        <div class="page-header">
            @svg('lucide-settings', ['width' => '24', 'height' => '24'])
            <div class="page-header--title">
                <h1>إعدادات API</h1>
                <p>يمكنك إدارة إعدادات الـ API الخاصة بك من هنا</p>
            </div>
        </div>

        <div class="row gy-3 gx-2">
            <!-- إعدادات الويب هوك -->
            <form class="form-container max-w-xl mx-auto" id="webhookForm">
                <div class="form-header">
                    <p>إعدادات الويب هوك</p>
                </div>

                <div class="form-row">
                    <div class="input-group">
                        <label for="webhook_url">رابط الويب هوك</label>
                        <div class="input-wrapper">
                            <input type="url" name="webhook_url" id="webhook_url"
                                value="{{ Auth::user()->webhook_url ?? '' }}" placeholder="https://example.com/webhook">
                        </div>
                        <small class="text-muted">أدخل الرابط الذي سيتم إرسال الإشعارات إليه</small>
                    </div>
                </div>


                <button type="button" x-on:click="updateWebhookSettings()" class="submit-btn">
                    حفظ إعدادات الويب هوك
                </button>
            </form>

            <!-- إعدادات عناوين IP المسموحة -->
            <form class="form-container max-w-xl mx-auto" id="ipForm">
                <div class="form-header">
                    <p>عناوين IP المسموحة</p>
                </div>

                <div class="form-row">
                    <div class="input-group">
                        <label for="allowed_ips">عناوين IP</label>
                        <div class="input-wrapper">
                            <input type="text" name="allowed_ips" id="allowed_ips"
                                value="{{ implode(',', Auth::user()->whitelistIps->pluck('ip_address')->toArray()) }}"
                                placeholder="أضف عناوين IP...">
                        </div>
                        <small class="text-muted">
                            أضف عناوين IP المسموح لها بالوصول للـ API. اتركه فارغاً للسماح لجميع العناوين
                        </small>
                    </div>
                </div>



                <button type="button" x-on:click="updateIpSettings()" class="submit-btn">
                    حفظ إعدادات IP
                </button>
            </form>


        </div>
    </div>
@endsection

@section('js')
    <!-- Tagify JS -->
    <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.min.js"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('apiSettings', () => ({
                tagifyInput: null,

                init() {
                    // تهيئة Tagify للـ IP addresses
                    const input = document.querySelector('#allowed_ips');
                    this.tagifyInput = new Tagify(input, {
                        pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
                        placeholder: 'أضف عنوان IP (مثال: 192.168.1.1)',
                        delimiters: ',| ',
                        maxTags: 20,
                        whitelist: [],
                        dropdown: {
                            enabled: 0
                        },
                        validate: function(tagData) {
                            const ipRegex =
                                /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
                            return ipRegex.test(tagData.value);
                        }
                    });

                    // إضافة رسائل خطأ مخصصة للـ IP غير صحيح
                    this.tagifyInput.on('invalid', function(e) {
                        swal({
                            title: 'عنوان IP غير صحيح',
                            text: 'يرجى إدخال عنوان IP صحيح (مثال: 192.168.1.1)',
                            type: 'warning',
                            confirmButtonText: 'موافق',
                        });
                    });
                },

                updateWebhookSettings() {
                    const url = "{{ route('update.webhook') }}";
                    const formData = new FormData(document.getElementById('webhookForm'));

                    axios.post(url, formData).then(response => {
                        swal({
                            title: response.data.msg ||
                                'تم حفظ إعدادات الويب هوك بنجاح',
                            type: 'success',
                            confirmButtonText: 'موافق',
                        });
                    }).catch(response => {
                        this.handleErrors(response);
                    });
                },

                updateIpSettings() {
                    const url = "{{ route('update.ips') }}";
                    const formData = new FormData(document.getElementById('ipForm'));

                    // إضافة قيم Tagify للـ form data
                    const ipTags = this.tagifyInput.value.map(tag => tag.value);
                    formData.set('allowed_ips', JSON.stringify(ipTags));

                    axios.post(url, formData).then(response => {
                        swal({
                            title: response.data.msg || 'تم حفظ إعدادات IP بنجاح',
                            type: 'success',
                            confirmButtonText: 'موافق',
                        });
                    }).catch(response => {
                        this.handleErrors(response);
                    });
                },

                handleErrors(response) {
                    if (response.response && response.response.data && response.response.data.errors) {
                        $.each(response.response.data.errors, function(key, val) {
                            swal({
                                title: val[0],
                                type: 'warning',
                                confirmButtonText: 'موافق',
                            });
                        });
                    } else {
                        swal({
                            title: 'حدث خطأ غير متوقع',
                            type: 'error',
                            confirmButtonText: 'موافق',
                        });
                    }
                }
            }))
        });
    </script>
@endsection