@extends('user.layouts.app')

@section('title', 'إدارة البين كود')

@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/pin-code_modal.css') }}">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/security-pages.css') }}">
@endsection

@section('content')
    <div class="content-wrapper" x-data="pinCodeManager">
        <div class="page-header">
            <x-lucide-shield width="28" height="28" />
            <div class="page-header--title">
                <h1>إدارة البين كود</h1>
                <p>حماية إضافية لحسابك وعملياتك المالية</p>
            </div>
        </div>

        <!-- معلومات الأمان -->
        <div class="security-info">
            <h3><x-lucide-info width="18" height="18" class="me-2" />ما هو البين كود؟</h3>
            <p>البين كود هو رقم سري مكون من 4 أرقام يضيف طبقة حماية إضافية لحسابك. سيُطلب منك إدخاله عند تنفيذ العمليات
                المالية المهمة.</p>
        </div>

        <div class="row gy-3 equal-height-row">
            <!-- المميزات -->
            <div class="col-md-6 col-12">
                <div class="security-card">
                    <div class="security-header">
                        <div class="security-icon">
                            <x-lucide-shield-check width="24" height="24" />
                        </div>
                        <h4>مميزات البين كود</h4>
                    </div>

                    <ul class="feature-list">
                        <li>
                            <x-lucide-check-circle width="16" height="16" />
                            حماية إضافية للعمليات المالية
                        </li>
                        <li>
                            <x-lucide-check-circle width="16" height="16" />
                            منع الوصول غير المصرح به
                        </li>
                        <li>
                            <x-lucide-check-circle width="16" height="16" />
                            سهولة في الاستخدام
                        </li>
                        <li>
                            <x-lucide-check-circle width="16" height="16" />
                            إمكانية التغيير في أي وقت
                        </li>
                        <li>
                            <x-lucide-check-circle width="16" height="16" />
                            تأمين معاملاتك الرقمية
                        </li>
                    </ul>
                </div>
            </div>

            <!-- نصائح الأمان -->
            <div class="col-md-6 col-12">
                <div class="security-card">
                    <div class="security-header">
                        <div class="security-icon">
                            <x-lucide-triangle-alert width="24" height="24" />
                        </div>
                        <h5>نصائح مهمة للأمان</h5>
                    </div>
                    <ul class="feature-list">
                        <li>
                            <span>•</span>
                            اختر رقم بين كود صعب التخمين وتجنب الأرقام التسلسلية أو المتكررة
                        </li>
                        <li>
                            <span>•</span>
                            لا تشارك البين كود مع أي شخص آخر تحت أي ظرف
                        </li>
                        <li>
                            <span>•</span>
                            تأكد من إدخال البين كود في مكان آمن وبعيداً عن أعين الآخرين
                        </li>
                        <li>
                            <span>•</span>
                            قم بتغيير البين كود بشكل دوري لضمان أقصى حماية
                        </li>
                        <li>
                            <span>•</span>
                            في حالة الشك بتسريب البين كود، قم بتغييره فوراً
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <!-- حالة البين كود -->
        <div class="row gy-3">
            <div class="security-card col-md-6 col-12 mx-auto">
                <div class="security-header">
                    <div class="security-icon">
                        <x-lucide-key width="24" height="24" />
                    </div>

                    <div class="flex-grow-1 ">
                        <h4 class="mb-2">حالة البين كود</h4>
                        <div class="pin-status">
                            <span>الحالة:</span>
                            @if ($hasPinCode)
                                <span class="status-badge status-active">
                                    <x-lucide-check-circle width="14" height="14" />
                                    مُفعل
                                </span>
                            @else
                                <span class="status-badge status-inactive">
                                    <x-lucide-x-circle width="14" height="14" />
                                    غير مُفعل
                                </span>
                            @endif
                        </div>

                        @if ($hasPinCode)
                            <p class="security-muted-text">تم إنشاء البين كود الخاص بك بنجاح. حسابك محمي الآن بطبقة أمان
                                إضافية.
                            </p>
                        @else
                            <p class="security-muted-text">لم يتم إنشاء بين كود بعد. يُنصح بشدة بإنشاء بين كود لحماية حسابك.
                            </p>
                        @endif
                    </div>

                </div>
                @if ($hasPinCode)
                    <div class="action-buttons">
                        <button type="button" class="btn-custom-primary" @click="showUpdateModal()">
                            <x-lucide-pencil width="16" height="16" />
                            تغيير البين كود
                        </button>
                        <button type="button" class="btn-custom-secondary" @click="showDeleteModal()">
                            <x-lucide-trash-2 width="16" height="16" />
                            حذف البين كود
                        </button>
                    </div>
                @else
                    <div class="action-buttons">
                        <button type="button" class="btn-custom-primary" @click="showCreateModal()">
                            <x-lucide-plus-circle width="16" height="16" />
                            إنشاء بين كود
                        </button>
                    </div>
                @endif
            </div>
        </div>

    </div>
    <!-- مودال إنشاء البين كود -->
    <x-pin-create-with-password-modal id="create-pin-with-password-modal" title="إنشاء البين كود الجديد" />

    <!-- مودال تأكيد إنشاء البين كود -->
    <x-pin-code id="confirm-create-pin-modal" title="تأكيد البين كود الجديد" :header="'<div class=\'alert alert-info text-center mb-0\'>أعد إدخال البين كود للتأكيد</div>'"
        :pinDigit1Name="'pin_code_confirmation_digit_1'" :pinDigit2Name="'pin_code_confirmation_digit_2'"
        :pinDigit3Name="'pin_code_confirmation_digit_3'" :pinDigit4Name="'pin_code_confirmation_digit_4'"
        submitAction="confirmCreate" />

    <!-- مودال تغيير البين كود -->
    <x-pin-code id="current-pin-modal" title="أدخل البين كود الحالي" :header="'<div class=\'alert alert-warning text-center mb-0\'>أدخل البين كود الحالي أولاً</div>'"
        :pinDigit1Name="'current_pin_digit_1'" :pinDigit2Name="'current_pin_digit_2'" :pinDigit3Name="'current_pin_digit_3'"
        :pinDigit4Name="'current_pin_digit_4'" submitAction="verifyCurrentPin" />

    <!-- مودال البين كود الجديد للتغيير -->
    <x-pin-code id="new-pin-modal" title="أدخل البين كود الجديد" :pinDigit1Name="'new_pin_digit_1'" :pinDigit2Name="'new_pin_digit_2'" :pinDigit3Name="'new_pin_digit_3'"
        :pinDigit4Name="'new_pin_digit_4'" submitAction="setNewPin" />

    <!-- مودال تأكيد البين كود الجديد للتغيير -->
    <x-pin-code id="confirm-new-pin-modal" title="تأكيد البين كود الجديد" :header="'<div class=\'alert alert-info text-center mb-0\'>أعد إدخال البين كود الجديد للتأكيد</div>'"
        :pinDigit1Name="'confirm_new_pin_digit_1'" :pinDigit2Name="'confirm_new_pin_digit_2'"
        :pinDigit3Name="'confirm_new_pin_digit_3'" :pinDigit4Name="'confirm_new_pin_digit_4'"
        submitAction="confirmNewPin" /> <!-- مودال حذف البين كود -->

@endsection

@section('js')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('pinCodeManager', () => ({ // متغيرات حفظ البين كود المؤقتة
                tempPinCode: '',
                tempNewPinCode: '',
                currentPinCode: '', // إظهار مودال إنشاء البين كود
                showCreateModal() {
                    this.clearAllInputs();
                    $('#create-pin-with-password-modal').modal('show');
                },

                // إظهار مودال تغيير البين كود
                showUpdateModal() {
                    this.clearAllInputs();
                    $('#current-pin-modal').modal('show');
                },

                clearAllInputs() {
                    document.querySelectorAll('.pin-digit').forEach(input => {
                        input.value = '';
                    });

                    // مسح حقل كلمة المرور في مودال الحذف
                    const deletePasswordField = document.getElementById('delete-password');
                    if (deletePasswordField) {
                        deletePasswordField.value = '';
                    }

                    // مسح حقل كلمة المرور في مودال الإنشاء
                    const createPasswordField = document.getElementById('create-password');
                    if (createPasswordField) {
                        createPasswordField.value = '';
                    }
                },

                // جمع البين كود من المدخلات
                collectPinCode(formId) {
                    const form = document.getElementById(formId);
                    const inputs = form.querySelectorAll('.pin-digit');
                    let pinCode = '';
                    inputs.forEach(input => {
                        pinCode += input.value;
                    });
                    return pinCode;
                },

                // التحقق من اكتمال البين كود
                isPinCodeComplete(formId) {
                    const pinCode = this.collectPinCode(formId);
                    return pinCode.length === 4;
                }, // إنشاء بين كود جديد بكلمة المرور
                async createPinWithPassword() {
                    if (!this.isPinCodeComplete('create-pin-with-password-modal-form')) {
                        swal({
                            title: 'يجب إدخال 4 أرقام',
                            type: 'warning',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }

                    const password = document.getElementById('create-password').value;
                    if (!password) {
                        swal({
                            title: 'يجب إدخال كلمة المرور',
                            type: 'warning',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }

                    this.tempPinCode = this.collectPinCode('create-pin-with-password-modal-form');
                    $('#create-pin-with-password-modal').modal('hide');
                    setTimeout(() => {
                        $('#confirm-create-pin-modal').modal('show');
                    }, 300);
                },

                // إنشاء بين كود جديد (الدالة القديمة - لن تستخدم)
                async createPinCode() {
                    if (!this.isPinCodeComplete('create-pin-modal-form')) {
                        swal({
                            title: 'يجب إدخال 4 أرقام',
                            type: 'warning',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }

                    this.tempPinCode = this.collectPinCode('create-pin-modal-form');
                    $('#create-pin-modal').modal('hide');
                    setTimeout(() => {
                        $('#confirm-create-pin-modal').modal('show');
                    }, 300);
                },

                // تأكيد إنشاء البين كود
                async confirmCreatePinCode() {
                    if (!this.isPinCodeComplete('confirm-create-pin-modal-form')) {
                        swal({
                            title: 'يجب إدخال 4 أرقام',
                            type: 'warning',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }

                    const confirmPinCode = this.collectPinCode('confirm-create-pin-modal-form');

                    if (this.tempPinCode !== confirmPinCode) {
                        swal({
                            title: 'البين كود غير متطابق',
                            text: 'يرجى التأكد من إدخال نفس البين كود',
                            type: 'error',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }
                    try {
                        const formData = new FormData();
                        formData.append('pin_code', this.tempPinCode);
                        formData.append('pin_code_confirmation', confirmPinCode);

                        // إضافة كلمة المرور من المودال السابق
                        const password = document.getElementById('create-password').value;
                        formData.append('password', password);

                        formData.append('_token', document.querySelector('meta[name="csrf-token"]')
                            .getAttribute('content'));

                        const response = await axios.post('{{ route('security.pin.create') }}',
                            formData);

                        $('#confirm-create-pin-modal').modal('hide');

                        swal({
                            title: 'تم إنشاء البين كود بنجاح',
                            text: 'تم تفعيل البين كود لحسابك',
                            type: 'success',
                            confirmButtonText: 'موافق',
                        }).then(() => {
                            location.reload();
                        });

                    } catch (error) {
                        let errorMessage = 'حدث خطأ أثناء إنشاء البين كود';
                        if (error.response && error.response.data && error.response.data.message) {
                            errorMessage = error.response.data.message;
                        }

                        swal({
                            title: 'خطأ',
                            text: errorMessage,
                            type: 'error',
                            confirmButtonText: 'موافق',
                        });
                    }
                }, // التحقق من البين كود الحالي
                async verifyCurrentPin() {
                    if (!this.isPinCodeComplete('current-pin-modal-form')) {
                        swal({
                            title: 'يجب إدخال 4 أرقام',
                            type: 'warning',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }

                    const currentPin = this.collectPinCode('current-pin-modal-form');

                    try {
                        const formData = new FormData();
                        formData.append('pin_code', currentPin);
                        formData.append('_token', document.querySelector('meta[name="csrf-token"]')
                            .getAttribute('content'));

                        const response = await axios.post('{{ route('security.pin.verify') }}',
                            formData);

                        // حفظ البين كود الحالي للاستخدام في التحديث
                        this.currentPinCode = currentPin;

                        $('#current-pin-modal').modal('hide');
                        setTimeout(() => {
                            $('#new-pin-modal').modal('show');
                        }, 300);

                    } catch (error) {
                        swal({
                            title: 'البين كود غير صحيح',
                            text: 'يرجى إدخال البين كود الصحيح',
                            type: 'error',
                            confirmButtonText: 'موافق',
                        });
                    }
                },

                // تحديد البين كود الجديد
                async setNewPin() {
                    if (!this.isPinCodeComplete('new-pin-modal-form')) {
                        swal({
                            title: 'يجب إدخال 4 أرقام',
                            type: 'warning',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }

                    this.tempNewPinCode = this.collectPinCode('new-pin-modal-form');
                    $('#new-pin-modal').modal('hide');
                    setTimeout(() => {
                        $('#confirm-new-pin-modal').modal('show');
                    }, 300);
                }, // تأكيد البين كود الجديد
                async confirmNewPin() {
                    if (!this.isPinCodeComplete('confirm-new-pin-modal-form')) {
                        swal({
                            title: 'يجب إدخال 4 أرقام',
                            type: 'warning',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }

                    const confirmNewPin = this.collectPinCode('confirm-new-pin-modal-form');

                    if (this.tempNewPinCode !== confirmNewPin) {
                        swal({
                            title: 'البين كود غير متطابق',
                            text: 'يرجى التأكد من إدخال نفس البين كود الجديد',
                            type: 'error',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }

                    try {
                        const formData = new FormData();
                        formData.append('current_pin_code', this.currentPinCode);
                        formData.append('new_pin_code', this.tempNewPinCode);
                        formData.append('new_pin_code_confirmation', confirmNewPin);
                        formData.append('_token', document.querySelector('meta[name="csrf-token"]')
                            .getAttribute('content'));

                        const response = await axios.post('{{ route('security.pin.update') }}',
                            formData);

                        $('#confirm-new-pin-modal').modal('hide');

                        swal({
                            title: 'تم تغيير البين كود بنجاح',
                            text: 'تم تحديث البين كود الخاص بك',
                            type: 'success',
                            confirmButtonText: 'موافق',
                        }).then(() => {
                            location.reload();
                        });

                    } catch (error) {
                        let errorMessage = 'حدث خطأ أثناء تغيير البين كود';
                        if (error.response && error.response.data && error.response.data.message) {
                            errorMessage = error.response.data.message;
                        }

                        swal({
                            title: 'خطأ',
                            text: errorMessage,
                            type: 'error',
                            confirmButtonText: 'موافق',
                        });
                    }
                }, // تأكيد حذف البين كود

            }));
        }); // معالج الأحداث للبين كود
        document.addEventListener('DOMContentLoaded', function() {
            // معالج النقر على أزرار التأكيد
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('pin-submit-btn')) {
                    const action = e.target.getAttribute('data-action');
                    const alpineComponent = Alpine.$data(document.querySelector(
                        '[x-data="pinCodeManager"]'));
                    switch (action) {
                        case 'create':
                            alpineComponent.createPinCode();
                            break;
                        case 'createPinWithPassword':
                            alpineComponent.createPinWithPassword();
                            break;
                        case 'confirmCreate':
                            alpineComponent.confirmCreatePinCode();
                            break;
                        case 'verifyCurrentPin':
                            alpineComponent.verifyCurrentPin();
                            break;
                        case 'setNewPin':
                            alpineComponent.setNewPin();
                            break;
                        case 'confirmNewPin':
                            alpineComponent.confirmNewPin();
                            break;
                        case 'confirmDelete':
                            alpineComponent.confirmDelete();
                            break;
                    }
                }
            });
        });
    </script>
@endsection