@extends('front.layouts.master-auth')

@section('css')
<style>
.pv-page-inner{max-width:560px;width:100%;margin-inline:auto;padding:0 16px;box-sizing:border-box;}
.pv-card{background:#fff;padding:15px;border-radius:0;box-shadow:none;}
.pv-card--success{text-align:center;border-top:4px solid #22c55e;display:flex;flex-direction:column;align-items:center;gap:10px;}
.pv-card--success h2{font-size:1.4rem;font-weight:700;color:#15803d;margin:0;}
.pv-card--success p{color:#374151;font-size:1rem;margin:0;}
.pv-card--success small{color:#94a3b8;}
.pv-card--pending{border-top:4px solid #f59e0b;background:#fffbeb;margin-bottom:16px;}
.pv-card--rejected{border-top:4px solid #ef4444;background:#fff5f5;margin-bottom:16px;}
.pv-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;color:#1e293b;}
.pv-header h1{font-size:1.3rem;font-weight:700;margin:0;}
.pv-subtitle{color:#64748b;margin-bottom:20px;font-size:.95rem;}
.pv-wa-number-link{color:#15803d;font-weight:700;text-decoration:underline;unicode-bidi:embed;}
.pv-wa-number-link:hover{color:#60d049;}
.pv-alert{border-radius:0;padding:12px 16px;margin-bottom:16px;font-size:.9rem;}
.pv-alert--danger{background:#fee2e2;color:#991b1b;}
.pv-alert--info{background:#e0f2fe;color:#0c4a6e;margin-top:16px;}
.pv-steps-hint__list{margin:0;padding-inline-start:1.25rem;list-style:decimal;}
.pv-steps-hint__list li{margin-bottom:10px;line-height:1.55;}
.pv-steps-hint__list li:last-child{margin-bottom:0;}
.pv-form-group{margin-bottom:20px;}
.pv-form-group label{display:block;font-size:.9rem;font-weight:600;color:#374151;margin-bottom:8px;}
.pv-phone-row{display:flex;flex-wrap:nowrap;gap:10px;align-items:flex-start;width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
.pv-dial-wrap{flex:0 1 220px;min-width:0;max-width:46%;}
.pv-dial-wrap .select2-container{width:100%!important;max-width:100%;}
.pv-dial-wrap .select2-container .select2-selection--single{min-height:46px!important;height:auto!important;box-sizing:border-box!important;}
.pv-dial-wrap .select2-container--default .select2-selection--single{border-radius:0;border:1.5px solid #e2e8f0;display:flex!important;align-items:center!important;}
.pv-dial-wrap .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.35!important;padding:8px 12px;font-size:.85rem;}
.pv-dial-wrap .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px!important;top:0!important;}
.pv-dial-wrap .select2-container--default.select2-container--focus .select2-selection--single,
.pv-dial-wrap .select2-container--default.select2-container--open .select2-selection--single{border-color:#60d049;}
.pv-input{flex:1 1 0;min-width:0;max-width:100%;width:0;box-sizing:border-box;border:1.5px solid #e2e8f0;border-radius:0;padding:10px 14px;font-size:.95rem;outline:none;line-height:1.3;min-height:46px;}
.pv-input:focus{border-color:#60d049;box-shadow:none;}
.pv-code-box{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:#f8fafc;border:2px dashed #60d049;margin:16px 0;color:#15803d;cursor:pointer;user-select:none;transition:background-color .15s ease;}
.pv-code-box:hover{background:#f0fdf4;}
.pv-code-box__code{font-size:1.8rem;font-weight:800;letter-spacing:2px;font-family:monospace;line-height:1.2;}
.pv-code-box__icon{display:flex;align-items:center;flex-shrink:0;color:#60d049;opacity:.9;}
.pv-code-box:hover .pv-code-box__icon{opacity:1;}
.pv-expiry{text-align:center;color:#64748b;font-size:.85rem;margin-bottom:12px;}
.iv-submit-wrap{display:flex;justify-content:flex-start;margin-top:8px;}
.iv-btn-submit{width:auto;padding:10px 22px;background-color:var(--primary-color,#14965A);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background-color .2s ease,opacity .2s ease;border-radius:0;box-shadow:none;line-height:1.2;text-decoration:none;}
.iv-btn-submit:hover:not(:disabled){background-color:var(--secondery-color,#19B36B);color:#fff;}
.iv-btn-submit:disabled{opacity:.88;cursor:wait;}
.iv-btn-submit.is-loading{opacity:.88;cursor:wait;pointer-events:none;}
.pv-btn-ghost{background:none;border:none;color:#60d049;font-size:.9rem;cursor:pointer;font-weight:600;padding:8px;border-radius:0;}
.pv-btn-ghost:disabled{color:#94a3b8;cursor:not-allowed;}
@media (max-width:480px){
    .pv-phone-row{flex-direction:column;align-items:stretch;}
    .pv-dial-wrap{flex:1 1 auto;max-width:none;width:100%;}
    .pv-input{width:100%;flex:1 1 auto;}
}
</style>
@endsection

@section('content')
<section class="page-content">
<div class="container pv-page-inner">

    @if($user->phone_verified_at)
        <div class="pv-card pv-card--success">
            <svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 20 20" fill="none">
                <circle cx="10" cy="10" r="10" fill="#22c55e"/>
                <path d="M6 10L9 13L14 7" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <h2>@lang('front.phone_verified_badge') ✓</h2>
            <p>{{ $user->phone_dial_code }} {{ $user->phone }}</p>
            <small>@lang('front.phone_verification_verified_at'): {{ \Carbon\Carbon::parse($user->phone_verified_at)->translatedFormat('d F Y') }}</small>
        </div>

    @elseif($codeRequest && $codeRequest->isAwaitingWhatsApp())
        <div class="pv-card" id="pv-code-card">
            <div class="pv-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                <h1>@lang('front.phone_verification_code_title')</h1>
            </div>
            <p class="pv-subtitle">
                @lang('front.phone_verification_code_subtitle_prefix')
                @if($businessWhatsApp && $codeRequest->buildWaMeUrl() !== '#')
                    <a href="{{ $codeRequest->buildWaMeUrl() }}" target="_blank" rel="noopener" class="pv-wa-number-link" dir="ltr">{{ $businessWhatsApp }}</a>
                @else
                    {{ $businessWhatsApp }}
                @endif
            </p>

            @include('front.user.phone-verification._code_box', ['id' => 'pv-code-display', 'code' => $codeRequest->verification_code, 'onCopy' => 'copyCode()'])

            <p class="pv-expiry" id="pv-expiry" data-expires="{{ $codeRequest->expires_at->toIso8601String() }}"></p>

            @include('front.user.phone-verification._whatsapp_steps_hint')

            <div class="iv-submit-wrap" style="margin-top:16px;">
                <button type="button" id="btn-confirm-sent" class="iv-btn-submit" disabled>
                    <span id="btn-confirm-text" class="iv-btn-submit__label">@lang('front.phone_verification_confirm_sent')</span>
                    <span id="btn-confirm-loading" class="iv-btn-submit__label" style="display:none;">@lang('front.phone_verification_confirming')</span>
                </button>
            </div>
            <div id="pv-confirm-error" class="pv-alert pv-alert--danger" style="display:none;margin-top:12px;"></div>
        </div>

    @elseif($request && $request->isPending())
        @include('front.user.phone-verification._status_card', ['request' => $request])

    @else
        @if($latest && $latest->isRejected())
            @include('front.user.phone-verification._status_card', ['request' => $latest])
        @endif

        <div class="pv-card" id="pv-wrapper">
            <div id="step-1">
                <div class="pv-header">
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.26 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.17 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.16 6.16l1.27-.85a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                    <h1>@lang('front.phone_verification_title')</h1>
                </div>
                <p class="pv-subtitle">@lang('front.phone_verification_manual_subtitle')</p>

                <div id="pv-error" class="pv-alert pv-alert--danger" style="display:none;"></div>

                <div class="pv-form-group">
                    <label for="dial_code">@lang('front.phone_verification_dial_label')</label>
                    <div class="pv-phone-row">
                        <div class="pv-dial-wrap">
                            <select id="dial_code" name="dial_code" class="form-control select2 pv-dial-select">
                                @foreach($countries->where('dial_code', '!=', null)->sortBy('sort_order') as $country)
                                    <option value="{{ $country->dial_code }}"
                                        @selected(
                                            ($user->country_id && (int) $user->country_id === (int) $country->id)
                                            || (! $user->country_id && $defaultDialCode === $country->dial_code)
                                        )>
                                        {{ $country->dial_code }} — {{ $country->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <input type="tel" id="phone_input" name="phone" class="pv-input" placeholder="@lang('front.phone_verification_phone_placeholder')"
                               value="{{ old('phone', $user->phone) }}" maxlength="15" autocomplete="tel-national">
                    </div>
                </div>

                <div class="iv-submit-wrap">
                    <button type="button" id="btn-send-otp" class="iv-btn-submit" @if(($resendCooldownRemaining ?? 0) > 0) disabled @endif>
                        <span id="btn-send-text" class="iv-btn-submit__label">@lang('front.phone_verification_get_code')</span>
                        <span id="btn-send-loading" class="iv-btn-submit__label" style="display:none;">@lang('front.phone_verification_sending')</span>
                        @if(($resendCooldownRemaining ?? 0) > 0)
                            <span id="send-cooldown-countdown"> (@lang('front.phone_verification_resend_wait', ['seconds' => $resendCooldownRemaining]))</span>
                        @else
                            <span id="send-cooldown-countdown"></span>
                        @endif
                    </button>
                </div>
            </div>

            <div id="step-2" style="display:none;">
                <div class="pv-header">
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    <h1>@lang('front.phone_verification_code_title')</h1>
                </div>
                <p class="pv-subtitle" id="code-sent-msg"></p>

                <div id="pv-error-2" class="pv-alert pv-alert--danger" style="display:none;"></div>

                @include('front.user.phone-verification._code_box', ['id' => 'pv-code-display-step2', 'code' => '', 'onCopy' => 'copyCodeStep2()'])

                <p class="pv-expiry" id="pv-expiry-step2"></p>

                @include('front.user.phone-verification._whatsapp_steps_hint')

                <div style="text-align:center;margin-top:16px;">
                    <button id="btn-resend" class="pv-btn-ghost" disabled>
                        @lang('front.phone_verification_new_code')
                        <span id="resend-countdown"></span>
                    </button>
                </div>

                <button class="pv-btn-ghost" onclick="backToStep1()" style="width:100%;margin-top:8px;">
                    @lang('front.phone_verification_change_number')
                </button>
            </div>
        </div>
    @endif
</div>
</section>
@endsection

@section('js-body')
<script>
const PV_I18N = {!! json_encode([
    'fillPhone' => __('front.phone_verification_fill_phone'),
    'codeFor' => __('front.phone_verification_code_for', ['whatsapp' => $businessWhatsApp ?? '']),
    'codeExpired' => __('front.phone_verification_code_expired'),
    'codeValidFor' => __('front.phone_verification_code_valid_for'),
    'errorGeneric' => __('front.phone_verification_error_generic'),
    'errorNetwork' => __('front.phone_verification_error_network'),
    'codeCopied' => __('front.phone_verification_code_copied'),
    'codeCopyFailed' => __('front.phone_verification_code_copy_failed'),
    'confirmDialogTitle' => __('front.phone_verification_confirm_dialog_title', [
        'whatsapp' => filled($businessWhatsApp ?? null)
            ? '<bdi dir="ltr">' . e($businessWhatsApp) . '</bdi>'
            : '',
    ]),
    'confirmDialogText' => __('front.phone_verification_confirm_dialog_text'),
    'confirmDialogYes' => __('front.phone_verification_confirm_dialog_yes'),
    'confirmDialogNo' => __('front.phone_verification_confirm_dialog_no'),
    'resendWait' => __('front.phone_verification_resend_wait'),
    'resendCooldown' => __('front.phone_verification_resend_cooldown'),
]) !!};
let cooldownTimer = null;
let expiryTimer = null;
let currentCode = @json($codeRequest->verification_code ?? '');
let resendCooldownRemaining = @json($resendCooldownRemaining ?? 0);

function confirmWhatsAppSent() {
    Swal.fire({
        title: PV_I18N.confirmDialogTitle,
        text: PV_I18N.confirmDialogText,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: PV_I18N.confirmDialogYes,
        cancelButtonText: PV_I18N.confirmDialogNo,
        confirmButtonColor: '#14965A',
        cancelButtonColor: '#6c757d',
    }).then(function (result) {
        if (!result.isConfirmed) return;
        setBtnLoading('btn-confirm-sent', 'btn-confirm-text', 'btn-confirm-loading', true);
        submitConfirmSent();
    });
}

function submitConfirmSent() {
    const errEl = document.getElementById('pv-confirm-error');
    if (errEl) errEl.style.display = 'none';

    fetch("{{ route('user.phone-verification.confirm-sent') }}", {
        method: 'POST',
        headers: {'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'},
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            window.location.reload();
            return;
        }
        setBtnLoading('btn-confirm-sent', 'btn-confirm-text', 'btn-confirm-loading', false);
        if (errEl) {
            errEl.textContent = data.message ?? PV_I18N.errorGeneric;
            errEl.style.display = 'block';
        }
    })
    .catch(() => {
        setBtnLoading('btn-confirm-sent', 'btn-confirm-text', 'btn-confirm-loading', false);
        if (errEl) {
            errEl.textContent = PV_I18N.errorNetwork;
            errEl.style.display = 'block';
        }
    });
}

function submitRequest() {
    const dial  = document.getElementById('dial_code')?.value;
    const phone = document.getElementById('phone_input')?.value?.trim();

    if (!dial || !phone) {
        showError('pv-error', PV_I18N.fillPhone);
        return;
    }

    setBtnLoading('btn-send-otp', 'btn-send-text', 'btn-send-loading', true);

    fetch("{{ route('user.phone-verification.send') }}", {
        method: 'POST',
        headers: {'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'},
        body: JSON.stringify({dial_code: dial, phone: phone}),
    })
    .then(r => r.json())
    .then(data => {
        setBtnLoading('btn-send-otp', 'btn-send-text', 'btn-send-loading', false);
        if (data.success) {
            window.location.reload();
            return;
        } else {
            showError('pv-error', data.message ?? PV_I18N.errorGeneric);
            if (data.cooldown) {
                startSendCooldown(data.cooldown);
            }
        }
    })
    .catch(() => {
        setBtnLoading('btn-send-otp', 'btn-send-text', 'btn-send-loading', false);
        showError('pv-error', PV_I18N.errorNetwork);
    });
}

function backToStep1() {
    document.getElementById('step-2').style.display = 'none';
    document.getElementById('step-1').style.display = 'block';
    if (cooldownTimer) clearInterval(cooldownTimer);
    if (expiryTimer) clearInterval(expiryTimer);
}

function startCooldown(seconds) {
    const btn = document.getElementById('btn-resend');
    const countdown = document.getElementById('resend-countdown');
    if (!btn) return;
    btn.disabled = true;
    let remaining = seconds;
    countdown.textContent = ` (${remaining}ث)`;
    cooldownTimer = setInterval(() => {
        remaining--;
        if (remaining <= 0) {
            clearInterval(cooldownTimer);
            countdown.textContent = '';
            btn.disabled = false;
        } else {
            countdown.textContent = ` (${remaining}ث)`;
        }
    }, 1000);
}

function formatResendWait(seconds) {
    return PV_I18N.resendWait.replace(':seconds', String(seconds));
}

function startSendCooldown(seconds) {
    const btn = document.getElementById('btn-send-otp');
    const countdown = document.getElementById('send-cooldown-countdown');
    if (!btn) return;
    if (cooldownTimer) clearInterval(cooldownTimer);
    btn.disabled = true;
    let remaining = seconds;
    if (countdown) countdown.textContent = ' (' + formatResendWait(remaining) + ')';
    cooldownTimer = setInterval(() => {
        remaining--;
        if (remaining <= 0) {
            clearInterval(cooldownTimer);
            if (countdown) countdown.textContent = '';
            btn.disabled = false;
        } else if (countdown) {
            countdown.textContent = ' (' + formatResendWait(remaining) + ')';
        }
    }, 1000);
}

function startExpiryCountdown(elId, expiresAt) {
    const el = document.getElementById(elId);
    if (!el || !expiresAt) return;
    const end = new Date(expiresAt).getTime();
    function tick() {
        const diff = end - Date.now();
        if (diff <= 0) {
            el.textContent = PV_I18N.codeExpired;
            clearInterval(expiryTimer);
            return;
        }
        const mins = Math.floor(diff / 60000);
        const secs = Math.floor((diff % 60000) / 1000);
        el.textContent = PV_I18N.codeValidFor.replace(':time', `${mins}:${String(secs).padStart(2,'0')}`);
    }
    tick();
    expiryTimer = setInterval(tick, 1000);
}

function copyVerificationCode(code) {
    if (!code) return;
    if (typeof copyTextAndNotify === 'function') {
        copyTextAndNotify(code, PV_I18N.codeCopied, PV_I18N.codeCopyFailed);
        return;
    }
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(code).catch(function() {});
    }
}

function getCodeFromBox(boxId) {
    const box = document.getElementById(boxId);
    return box?.querySelector('.pv-code-box__code')?.textContent?.trim() || box?.textContent?.trim() || '';
}

function copyCode() {
    copyVerificationCode(getCodeFromBox('pv-code-display'));
}

function copyCodeStep2() {
    copyVerificationCode(currentCode);
}

function showError(id, msg) {
    const el = document.getElementById(id);
    if (!el) return;
    el.textContent = msg;
    el.style.display = 'block';
}

function setBtnLoading(btnId, textId, loadId, loading) {
    const btn = document.getElementById(btnId);
    const textEl = document.getElementById(textId);
    const loadEl = document.getElementById(loadId);
    if (!btn || !textEl || !loadEl) return;
    btn.disabled = loading;
    btn.classList.toggle('is-loading', loading);
    btn.setAttribute('aria-busy', loading ? 'true' : 'false');
    textEl.style.display = loading ? 'none' : '';
    loadEl.style.display = loading ? 'inline' : 'none';
}

document.addEventListener('DOMContentLoaded', function() {
    const confirmBtn = document.getElementById('btn-confirm-sent');
    if (confirmBtn) {
        confirmBtn.addEventListener('click', confirmWhatsAppSent);
        confirmBtn.disabled = false;
    }

    const sendBtn = document.getElementById('btn-send-otp');
    if (sendBtn) {
        sendBtn.addEventListener('click', submitRequest);
    }

    const resendBtn = document.getElementById('btn-resend');
    if (resendBtn) {
        resendBtn.addEventListener('click', submitRequest);
    }

    if (resendCooldownRemaining > 0) {
        startSendCooldown(resendCooldownRemaining);
    }

    const expiryEl = document.getElementById('pv-expiry');
    if (expiryEl && expiryEl.dataset.expires) {
        startExpiryCountdown('pv-expiry', expiryEl.dataset.expires);
    }

    if (typeof jQuery !== 'undefined' && jQuery.fn.select2) {
        const $dial = jQuery('#dial_code');
        if ($dial.length && !$dial.data('select2')) {
            $dial.select2({
                width: '100%',
                placeholder: '@lang('front.phone_verification_search_country')',
                language: { noResults: () => '@lang('front.phone_verification_no_results')', searching: () => '@lang('front.phone_verification_searching')' },
                minimumResultsForSearch: 0,
                dropdownParent: jQuery(document.body)
            });
        }
    }
});
</script>
@endsection