@extends('user.layouts.app')
@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/level-system.css') }}">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/edit-profile.css') }}">
@endsection

{{-- TODO: تعديل الايرورز هنا تنزل ع الاليمنت نفسه  --}}
@section('content')
    <div class="content-wrapper" x-data="profile">
        @if (Route::has('profile.overview'))
            <a href="{{ route('profile.overview') }}" class="back-link">
                <x-lucide-arrow-right width="18" height="18" />
                <span>العودة لنظرة عامة</span>
            </a>
        @endif
        <div class="page-header">
            <x-lucide-hand-coins width="28" height="28" />
            <div class="page-header--title">
                <h1>يمكنك تغيير معلوماتك الشخصية من هنا</h1>
            </div>
        </div>

        <div class="row gy-3 gx-2">
            @php
                $isVerified = isset($user) && ($user->is_verified ?? false);
                $isPending = $hasPendingVerification ?? false;
                $locked = $isVerified || $isPending;
            @endphp
            <form class="form-container max-w-xl mx-auto" id="editprof">
                <div class="form-header">
                    <p>تغيير البيانات الشخصية </p>
                </div>
                @if ($locked)
                    <div class="notice-container">
                        @if ($isVerified)
                            حسابك موثق بالفعل، لا يمكن تعديل البيانات الأساسية ويمكنك فقط تغيير كلمة المرور.
                        @elseif($isPending)
                            لديك طلب توثيق قيد المراجعة، لا يمكن تعديل البيانات حتى انتهاء المراجعة ويمكنك فقط تغيير كلمة
                            المرور.
                        @endif
                    </div>
                @endif
                <div class="form-row">
                    <div class="input-group ">
                        <label for="name"> الاسم </label>
                        <div class="input-wrapper">
                            <input type="text" name="name" id="name" value="{{ Auth::user()->name }}"
                                @if ($locked) disabled @endif>
                        </div>
                    </div>
                    <div class="input-group ">
                        <label for="mobile"> الهاتف </label>
                        <div class="input-wrapper">
                            <input type="text" name="mobile" id="mobile" value="{{ Auth::user()->mobile }}"
                                @if ($locked) disabled @endif>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="input-group ">
                        <label for="store"> العنوان </label>
                        <div class="input-wrapper">
                            <input type="text" name="store" id="store" value="{{ Auth::user()->store }}"
                                @if ($locked) disabled @endif>
                        </div>
                    </div>
                </div>

                <div class="form-header" style="margin-top: 1.5rem;">
                    <p>معلومات الاتصال الإضافية</p>
                </div>

                <div class="form-row">
                    <div class="input-group">
                        <label for="whatsapp"> رقم الواتساب </label>
                        <div class="input-wrapper">
                            <input type="text" name="whatsapp" id="whatsapp" value="{{ Auth::user()->whatsapp }}"
                                placeholder="مثال: 963912345678" dir="ltr">
                        </div>
                    </div>
                    <div class="input-group">
                        <label for="telegram"> تليجرام </label>
                        <div class="input-wrapper">
                            <input type="text" name="telegram" id="telegram" value="{{ Auth::user()->telegram }}"
                                placeholder="اسم المستخدم أو الرقم" dir="ltr">
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="input-group">
                        <label for="backup_email"> بريد إلكتروني احتياطي </label>
                        <div class="input-wrapper">
                            <input type="email" name="backup_email" id="backup_email"
                                value="{{ Auth::user()->backup_email }}" placeholder="name@example.com" dir="ltr">
                        </div>
                    </div>
                </div>

                @if(!empty(Auth::user()->api_token))
                <div class="form-header" style="margin-top: 1.5rem;">
                    <p>إعدادات API</p>
                </div>

                <div class="form-row">
                    <div class="input-group">
                        <label for="webhook_url"> رابط الـ Webhook </label>
                        <div class="input-wrapper flex-col gap-1">
                            <input type="url" name="webhook_url" id="webhook_url"
                                value="{{ Auth::user()->webhook_url }}" placeholder="https://example.com/webhook" dir="ltr">
                            <span class="inline-hint">سيتم إرسال تحديثات الطلبات إلى هذا الرابط</span>
                        </div>
                    </div>
                </div>
                @endif

                @unless ($locked)
                    <button type="button" x-on:click="updateProfileInformation()" class="submit-btn"> حفظ</button>
                @endunless
            </form>

            @php $emailLocked = !is_null(Auth::user()->email_verified_at); @endphp
            @if ($emailLocked)
                <div id="email-verification-section" class="form-container max-w-xl mx-auto">
                    <div class="form-header">
                        <p>تغيير البريد الإلكتروني</p>
                    </div>
                    <div class="notice-container">البريد الإلكتروني مفعل بالفعل ولا يمكن تغييره</div>
                    <div class="form-row">
                        <div class="input-group ">
                            <label for="verified-email"> البريد الإلكتروني الحالي </label>
                            <div class="input-wrapper">
                                <input type="email" id="verified-email" value="{{ Auth::user()->email }}" disabled
                                    readonly>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div id="email-verification-section">
                    <form class="form-container max-w-xl mx-auto" id="changeEmailForm" x-ref="changeEmailForm">
                        <div class="form-header">
                            <p>تغيير البريد الإلكتروني</p>
                        </div>
                        <div class="form-row">
                            <div class="input-group">
                                <label for="new-email"> البريد الإلكتروني الجديد </label>
                                <div class="input-wrapper flex-col gap-1">
                                    <input type="email" id="new-email" name="email" value="{{ Auth::user()->email }}"
                                        autocomplete="off" placeholder="name@example.com" dir="ltr">
                                    <span class="inline-hint">سنرسل كود التفعيل إلى البريد الجديد</span>
                                </div>
                            </div>
                            <div class="input-group">
                                <label for="current-password-email"> كلمة المرور الحالية </label>
                                <div class="input-wrapper flex-col gap-1">
                                    <input type="password" id="current-password-email" name="current_password"
                                        value="" autocomplete="current-password" placeholder="••••••••">
                                    <span class="inline-hint">لحمايتك، نحتاج تأكيد الهوية</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex gap-2 mt-2">
                            <button type="button" x-on:click="updateUserEmail()" class="submit-btn btn-inline-slim"
                                :aria-busy="emailVerification.sending ? 'true' : 'false'"
                                :disabled="emailVerification.sending">
                                <span x-show="!emailVerification.sending" x-cloak>تغيير البريد الإلكتروني</span>
                                <span x-show="emailVerification.sending" x-cloak><x-lucide-loader-2 width="16" height="16" class="animate-spin" />
                                    جاري
                                    التحديث</span>
                            </button>
                            <template x-if="emailVerification.cooldownRemaining > 0">
                                <div class="status-badge" x-cloak>
                                    <x-lucide-clock width="14" height="14" />
                                    انتظار <span x-text="emailVerification.cooldownRemaining"></span> ث
                                </div>
                            </template>
                        </div>

                        <div class="divider my-4" style="border-top:1px dashed #ccc"></div>

                        <div class="form-row">
                            <div class="input-group">
                                <label for="verification-code"> كود التفعيل </label>
                                <div class="input-wrapper flex-col gap-1.5">
                                    <input type="text" id="verification-code" x-model="emailVerification.code"
                                        placeholder="أدخل الكود المكون من 9 أرقام" inputmode="numeric" pattern="[0-9]{9}"
                                        class="code-input" autocomplete="one-time-code" maxlength="9" minlength="9">
                                    <span class="inline-hint">إذا لم يصلك الكود خلال دقيقتين أعد الإرسال</span>
                                </div>
                            </div>
                            <div class="input-group">
                                <label>&nbsp;</label>
                                <div class="flex flex-col gap-2 items-start">
                                    <div class="flex gap-2 items-center">
                                        <button type="button" class="submit-btn btn-inline-slim"
                                            :class="{
                                                'disabled': emailVerification.sending || emailVerification
                                                    .cooldownRemaining >
                                                    0
                                            }"
                                            :disabled="emailVerification.sending || emailVerification.cooldownRemaining > 0"
                                            x-on:click="sendEmailCode()"
                                            :aria-busy="emailVerification.sending ? 'true' : 'false'">
                                            <span
                                                x-show="!emailVerification.sending && emailVerification.cooldownRemaining == 0"
                                                x-cloak>ارسال الكود</span>
                                            <span x-show="emailVerification.sending" x-cloak><x-lucide-loader-2 width="16" height="16" class="animate-spin" /> جارٍ الإرسال</span>
                                            <span
                                                x-show="!emailVerification.sending && emailVerification.cooldownRemaining > 0"
                                                x-cloak>انتظر (<span
                                                    x-text="emailVerification.cooldownRemaining"></span>)</span>
                                        </button>
                                        <button type="button" class="submit-btn btn-inline-slim"
                                            x-on:click="verifyEmailCode()"
                                            :disabled="emailVerification.verifying || !emailVerification.code || emailVerification
                                                .code
                                                .length !== 9"
                                            :aria-busy="emailVerification.verifying ? 'true' : 'false'">
                                            <span x-show="!emailVerification.verifying" x-cloak>تفعيل</span>
                                            <span x-show="emailVerification.verifying" x-cloak><x-lucide-loader-2 width="16" height="16" class="animate-spin" /> جاري التحقق</span>
                                        </button>
                                    </div>
                                    <template x-if="emailVerification.message">
                                        <div class="status-badge" x-cloak
                                            :class="{ 'error': emailVerification.error, 'success': !emailVerification.error }"
                                            x-text="emailVerification.message"></div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            @endif

            <form class="form-container max-w-xl mx-auto" id="editpassword">
                <div class="form-header">
                    <p>تغيير كلمة المرور </p>
                </div>

                <div class="form-row ">
                    <div class="input-group ">
                        <label for="current-password"> كلمة المرور الحالية </label>
                        <div class="input-wrapper">
                            <input type="password" id="current-password" name="current_password" value="">
                        </div>
                    </div>

                    <div class="input-group ">
                        <label for="new-password"> كلمة المرور الجديده </label>
                        <div class="input-wrapper">
                            <input type="password" id="new-password" name="new_password" value="">
                        </div>
                    </div>
                    <div class="input-group ">
                        <label for="confirm-password">تأكيد كلمة المرور الجديده </label>
                        <div class="input-wrapper">
                            <input type="password" id="confirm-password" name="new_password_confirmation"
                                value="">
                        </div>
                    </div>
                </div>

                <button type="button" x-on:click="updateUserPassword()" class="submit-btn ">
                    تغيير كلمة السر </button>
                {{-- <!--@if (auth()->user()->google2fa_secret == null)-->
                                    <!--<button @click="getqrr" type="button" class="btn btn-warning   btn-lg mt-5" data-toggle="modal"-->
                                    <!--data-target=".def"> تفعيل المصادقة الثنائية </button>-->
                                    <!--@else-->
                                    <!--<button @click="getqrr" type="button" class="btn btn-warning   btn-lg mt-5" data-toggle="modal"-->
                                    <!--data-target=".def"> تعديل المصادقة الثنائية </button>-->
                                    <!--
                                        @endif--> --}}
            </form>
        </div>

    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('profile', () => ({
                notifications: [],
                error: [],
                emailVerification: {
                    code: '',
                    sending: false,
                    verifying: false,
                    cooldownRemaining: 0,
                    message: '',
                    error: false,
                    cooldownTimer: null,
                },
                lockedState: {
                    locked: {{ $locked ? 'true' : 'false' }},
                    message: @json(
                        $isVerified
                            ? 'حسابك موثق بالفعل، لا يمكن تعديل البيانات الأساسية ويمكنك فقط تغيير كلمة المرور.'
                            : ($isPending
                                ? 'لديك طلب توثيق قيد المراجعة، لا يمكن تعديل البيانات حتى انتهاء المراجعة ويمكنك فقط تغيير كلمة المرور.'
                                : ''))
                },
                startCooldown(seconds) {
                    this.emailVerification.cooldownRemaining = seconds;
                    if (this.emailVerification.cooldownTimer) {
                        clearInterval(this.emailVerification.cooldownTimer);
                    }
                    this.emailVerification.cooldownTimer = setInterval(() => {
                        if (this.emailVerification.cooldownRemaining > 0) {
                            this.emailVerification.cooldownRemaining--;
                        } else {
                            clearInterval(this.emailVerification.cooldownTimer);
                        }
                    }, 1000);
                },
                sendEmailCode() {
                    const url = "{{ route('profile.email.sendCode') }}";
                    this.emailVerification.sending = true;
                    axios.post(url).then(res => {
                        this.emailVerification.error = !!res.data.err;
                        this.emailVerification.message = res.data.msg;
                        if (!res.data.err) {
                            const cd = res.data.cooldown_remaining ?? 0;
                            // Always enforce a 120s cooldown per rules, or server provided
                            this.startCooldown(cd > 0 ? cd : 120);
                        }
                    }).catch(err => {
                        this.emailVerification.error = true;
                        this.emailVerification.message = (err.response && (err.response.data
                            .msg || err.response.data.message)) || 'فشل الإرسال';
                    }).finally(() => {
                        this.emailVerification.sending = false;
                    });
                },
                verifyEmailCode() {
                    const url = "{{ route('profile.email.verify') }}";
                    this.emailVerification.verifying = true;
                    axios.post(url, {
                        code: this.emailVerification.code
                    }).then(res => {
                        this.emailVerification.error = !!res.data.err;
                        this.emailVerification.message = res.data.msg;
                        if (!res.data.err) {
                            // reload to reflect locked email UI
                            window.location.reload();
                        }
                    }).catch(err => {
                        this.emailVerification.error = true;
                        this.emailVerification.message = (err.response && (err.response.data
                            .msg || err.response.data.message)) || 'فشل التحقق';
                    }).finally(() => {
                        this.emailVerification.verifying = false;
                    });
                },
                updateProfileInformation() {
                    if (this.lockedState.locked) {
                        swal({
                            title: this.lockedState.message,
                            type: 'warning',
                            confirmButtonText: 'موافق',
                        });
                        return;
                    }
                    const url = "{{ route('profile.updatepost') }}";
                    const formData = new FormData(document.getElementById('editprof'));
                    axios.post(url, formData).then(response => {
                        swal({
                            title: response.data.msg,
                            type: response.data.err ? 'warning' : 'success',
                            confirmButtonText: 'موافق',
                        });
                    }).catch(error => {
                        if (error.response && error.response.data && error.response.data
                            .errors) {
                            $.each(error.response.data.errors, function(key, val) {
                                swal({
                                    title: val[0],
                                    type: 'warning',
                                    confirmButtonText: 'موافق',
                                });
                            });
                        } else if (error.response && error.response.data && error.response.data
                            .msg) {
                            swal({
                                title: error.response.data.msg,
                                type: 'warning',
                                confirmButtonText: 'موافق',
                            });
                        }
                    })
                },
                updateUserEmail() {
                    const url = "{{ route('profile.updateEmail') }}";
                    const formData = new FormData(document.getElementById('changeEmailForm'));
                    axios.post(url, formData).then(response => {
                        swal({
                            title: response.data.msg,
                            type: response.data.err ? 'warning' : 'success',
                            confirmButtonText: 'موافق',
                        });
                        if (!response.data.err) {
                            document.getElementById('changeEmailForm').reset();
                        }
                    }).catch(error => {
                        if (error.response && error.response.data) {
                            if (error.response.data.errors) {
                                $.each(error.response.data.errors, function(key, val) {
                                    swal({
                                        title: val[0],
                                        type: 'warning',
                                        confirmButtonText: 'موافق',
                                    });
                                });
                            } else if (error.response.data.msg) {
                                swal({
                                    title: error.response.data.msg,
                                    type: 'warning',
                                    confirmButtonText: 'موافق',
                                });
                            }
                        }
                    });
                },

                updateUserPassword() {
                    url = "{{ route('profile.updatepassword') }}";
                    let formData = new FormData(document.getElementById('editpassword'));
                    axios.post(url, formData).then(response => {
                        if (response.data.err == true) {
                            swal({
                                title: response.data.msg,
                                type: 'warning',
                                confirmButtonText: 'موافق',
                            });
                        } else {
                            swal({
                                title: response.data.msg,
                                type: 'success',
                                confirmButtonText: 'موافق',
                            });
                        }
                    }).catch(response => {
                        $.each(response.response.data.errors, function(key, val) {
                            swal({
                                title: val[0],
                                type: 'warning',
                                confirmButtonText: 'موافق',
                            });
                        });
                    })
                },

                validateInputField(el, msg) {
                    if (el == '') {
                        this.error.push({
                            'err': 'err'
                        });
                        swal({
                            title: msg,
                            type: 'warning',
                            confirmButtonText: 'موافق',
                        });
                        return 0;
                    }
                },


            }))
        })
    </script>
@endsection