@extends('office.layouts.master')

@section('title', __('lang.office_otp_title'))

@section('content')
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5 col-xl-4">
            <div class="card rounded-4 shadow-sm p-4 p-md-5">
                <div class="text-center mb-4">
                    <div class="bg-primary d-inline-flex align-items-center justify-content-center rounded-3 mb-3" style="width: 52px; height: 52px;">
                        <i class="bi bi-shield-check text-white fs-4"></i>
                    </div>
                    <h1 class="h4 fw-bold mb-1">{{ __('lang.office_otp_title') }}</h1>
                    <p class="text-muted small mb-0">{{ __('lang.office_otp_description') }}</p>
                    <p class="text-muted small mb-0 mt-1" dir="ltr">{{ $identifier }}</p>
                </div>

                @if (session('status'))
                    <x-alert variant="success" class="py-2 mb-3 text-center small">{{ session('status') }}</x-alert>
                @endif

                <form method="POST" action="{{ route('office.profile.contact.verify.submit') }}" id="otp-form">
                    @csrf
                    <input type="hidden" name="code" id="otp-combined">

                    <div class="mb-2">
                        <div class="d-flex justify-content-center otp-inputs-group" dir="ltr">
                            @for ($i = 0; $i < 6; $i++)
                                <input
                                    type="text"
                                    maxlength="1"
                                    inputmode="numeric"
                                    pattern="[0-9]*"
                                    autocomplete="one-time-code"
                                    class="otp-input form-control text-center fw-bold fs-5 rounded-3 border-2 {{ $errors->has('code') ? 'otp-input-invalid' : '' }}"
                                    data-index="{{ $i }}"
                                    id="otp-{{ $i }}"
                                    aria-label="{{ __('lang.office_otp_label') }} {{ $i + 1 }}"
                                >
                            @endfor
                        </div>
                    </div>

                    @error('code')
                        <p class="text-danger text-center small mb-0 mt-2">{{ $message }}</p>
                    @enderror

                    <div class="text-center my-4">
                        <span id="timer-wrap" class="text-muted small">
                            <span id="timer">0:60</span>
                            <span class="mx-1">{{ __('lang.office_resend_otp') }}</span>
                        </span>
                        <button type="button" id="resend-btn" class="btn btn-link p-0 text-decoration-none small d-none" onclick="document.getElementById('resend-form').submit()">
                            {{ __('lang.office_resend_otp') }}
                        </button>
                    </div>

                    <button type="submit" id="verify-btn" class="btn btn-primary w-100 fw-bold rounded-3 py-2" disabled>
                        {{ __('lang.office_verify_and_save') }}
                    </button>
                </form>

                <form method="POST" action="{{ route('office.profile.contact.resend') }}" id="resend-form" class="d-none">
                    @csrf
                </form>

                <div class="text-center mt-4">
                    <a href="{{ route('office.profile.edit') }}" class="text-muted small text-decoration-none">{{ __('lang.cancel') }}</a>
                </div>
            </div>
        </div>
    </div>

    @push('styles')
        <style>
            .otp-inputs-group { gap: 12px; }
            .otp-input {
                width: 48px;
                height: 54px;
                padding: 0 !important;
                text-align: center !important;
                direction: ltr !important;
                line-height: 54px !important;
                transition: border-color .2s ease, box-shadow .2s ease;
            }
            @media (max-width: 390px) {
                .otp-inputs-group { gap: 8px; }
                .otp-input { width: 38px; height: 46px; line-height: 46px !important; font-size: 16px !important; }
            }
            .otp-input:focus {
                border-color: var(--bs-primary) !important;
                box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25) !important;
            }
            .otp-input-invalid, .otp-input-invalid:focus {
                border-color: #dc3545 !important;
                box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .2) !important;
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const inputs = document.querySelectorAll('.otp-input');
                const combinedInput = document.getElementById('otp-combined');
                const verifyBtn = document.getElementById('verify-btn');
                const timerEl = document.getElementById('timer');
                const timerWrap = document.getElementById('timer-wrap');
                const resendBtn = document.getElementById('resend-btn');

                function clearInvalidState() {
                    inputs.forEach((input) => input.classList.remove('otp-input-invalid'));
                }

                function updateCombinedInput() {
                    let otp = '';
                    inputs.forEach((input) => { otp += input.value; });
                    combinedInput.value = otp;
                    verifyBtn.disabled = otp.length !== 6;
                }

                inputs[0]?.focus();

                inputs.forEach((input, index) => {
                    input.addEventListener('input', function (e) {
                        clearInvalidState();
                        const value = e.target.value.replace(/\D/g, '');
                        e.target.value = value.slice(-1);

                        if (e.target.value.length === 1 && index < inputs.length - 1) {
                            inputs[index + 1].focus();
                        }

                        updateCombinedInput();
                    });

                    input.addEventListener('paste', function (e) {
                        e.preventDefault();
                        clearInvalidState();
                        const pasteData = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, 6);
                        pasteData.split('').forEach((char, i) => {
                            if (inputs[i]) inputs[i].value = char;
                        });
                        updateCombinedInput();
                        const lastFilled = Math.min(pasteData.length - 1, inputs.length - 1);
                        inputs[lastFilled]?.focus();
                    });

                    input.addEventListener('keydown', function (e) {
                        if (e.key === 'Backspace' && !e.target.value && index > 0) {
                            inputs[index - 1].focus();
                        }
                    });
                });

                let timerSeconds = 60;
                const countdown = setInterval(() => {
                    timerSeconds--;
                    const minutes = Math.floor(timerSeconds / 60);
                    const seconds = timerSeconds % 60;
                    timerEl.textContent = `${minutes}:${String(seconds).padStart(2, '0')}`;

                    if (timerSeconds <= 0) {
                        clearInterval(countdown);
                        timerWrap.classList.add('d-none');
                        resendBtn.classList.remove('d-none');
                    }
                }, 1000);
            });
        </script>
    @endpush
@endsection