@extends('portal.layouts.auth')

@section('content')

<style>
    .otp-input {
        height: 58px;
        padding: 0 10px;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        transition: all 0.2s ease-in-out;
    }
    .otp-input:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    .otp-input:focus-visible {
        outline: none;
    }
    .otp-input:hover {
        border-color: #007bff;
    }
    .otp-input:active {
        border-color: #007bff;
    }
    .otp-input:disabled {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #adb5bd;
    }
    .gap-2 {
        gap: .5rem;
    }
</style>
    <!-- Content -->

    <div class="authentication-wrapper authentication-2 ui-bg-cover ui-bg-overlay-container px-4" style="background-image: url({{asset('images/back.jpg')}});">
        <div class="ui-bg-overlay bg-dark opacity-25"></div>

        <div class="authentication-inner py-5">

            <div class="card">
                
                @include('layouts.includes.header-language')

                <div class="p-4 p-sm-4" style="padding-bottom: 1.5rem !important;">
                    <!-- Logo -->
                    <div class="d-flex justify-content-center align-items-center pb-2 mb-2">
                        <div class="">
                            <div class="w-100 position-relative">
                                    <a href="https://www.mivita.care"><img src="{{ asset('/images/logo_mivita.png') }}" alt="mivita.care" class=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- / Logo -->
                        <!-- Form -->
                        <form method="POST" class="my-3" action="{{ route('portal.login.verify-otp') }}" aria-label="{{ __('portal.login_button') }}" id="otp-form">
                            @csrf
                                <h4 class="text-center mb-4">{{ __('portal.verify_otp_title') }}</h4>
                                <div class="form-group">
                                    <label class="form-label text-center">{{ __('portal.verify_otp_description') }}</label>
                                    <div class="mb-3">
                                        <div class="d-flex align-items-center gap-2">
                                          <input type="text" class="form-control otp-input" maxlength="1" id="otp1" name="otp1" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[0] : '' }}">
                                          <input type="text" class="form-control otp-input" maxlength="1" id="otp2" name="otp2" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[1] : '' }}">
                                          <input type="text" class="form-control otp-input" maxlength="1" id="otp3" name="otp3" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[2] : '' }}">
                                          <input type="text" class="form-control otp-input" maxlength="1" id="otp4" name="otp4" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[3] : '' }}">
                                          <input type="text" class="form-control otp-input" maxlength="1" id="otp5" name="otp5" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[4] : '' }}">
                                          <input type="text" class="form-control otp-input" maxlength="1" id="otp6" name="otp6" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[5] : '' }}">
                                        </div>
                                      </div>
                                      {{-- Hidden field to combine OTP values --}}
                                      <input type="hidden" name="otp" id="otp" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value : '' }}">
                                      <input type="hidden" name="email" id="email" value="{{ $email }}">
                                </div>
                                @error('otp')
                                    <div class="text-danger text-center font-weight-bold mt-1">{{ $message }}</div>
                                @enderror
                            <div class="d-flex justify-content-between align-items-center m-0 mt-3">
                                <button type="submit" class="btn btn-primary btn-block">{{ __('portal.login_button') }}</button>
                            </div>
                           
                            <div class="d-flex justify-content-between align-items-center m-0 mt-4">
                                <p class="text-center small">
                                    {{ __('portal.verify_otp_resend') }}<br>
                                    <a class="btn btn-link btn-xs btn-secondary mt-2" href="{{ route('portal.login.form') }}">{{ __('portal.verify_otp_resend_link') }}</a>
                                </p>
                            </div>
                        </form>
                        <!-- / Form -->

                    <div class="mt-2 text-center justify-content-center">
                        <button type="button" class="btn btn-outline-primary mt-2 btn-sm update_modal_data_load" data-url="{{ route('portal.loading_modal') }}" data-data="data_protection" data-target="#modal-loading">{{__('register.data_protection')}}</button>
                        <button type="button" class="btn btn-outline-primary mt-2 btn-sm update_modal_data_load" data-url="{{ route('portal.loading_modal') }}" data-data="imprint" data-target="#modal-loading">{{__('imprint')}}</button>
                    </div>

                </div>

            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const inputs = document.querySelectorAll('.otp-input');
    const otpForm = document.getElementById('otp-form');
    const hiddenOtpField = document.getElementById('otp');

    inputs.forEach((input, index) => {
        input.addEventListener('input', (e) => {
            // Move to next input if current one is filled
            if (input.value.length === 1 && index < inputs.length - 1) {
                inputs[index + 1].focus();
            }
            combineOtpValues(); // Update hidden field on input
        });

        input.addEventListener('keydown', (e) => {
            // Move to previous input on backspace if current one is empty
            if (e.key === 'Backspace' && input.value.length === 0 && index > 0) {
                inputs[index - 1].focus();
            }
            combineOtpValues(); // Update hidden field on keydown
        });

        input.addEventListener('paste', (e) => {
            e.preventDefault();
            const pasteData = (e.clipboardData || window.clipboardData).getData('text');
            const digits = pasteData.replace(/\D/g, '').split(''); // Get only digits

            inputs.forEach((inputField, i) => {
                if (digits[i]) {
                    inputField.value = digits[i];
                    if (i < inputs.length - 1 && digits.length > 1) { // Move focus if pasting multiple digits
                         inputs[i + 1].focus();
                    }
                } else {
                    inputField.value = ''; // Clear if paste data is shorter
                }
            });
             if(digits.length >= inputs.length) {
                 inputs[inputs.length - 1].focus(); // Focus last field if paste is long enough
             }
            combineOtpValues(); // Update hidden field after paste
        });
    });

    // Combine OTP values into the hidden field before submitting
    function combineOtpValues() {
        let combinedValue = '';
        inputs.forEach(input => {
            combinedValue += input.value;
        });
        hiddenOtpField.value = combinedValue;
        console.log(hiddenOtpField.value);
    }

    // Ensure combined value is updated on form submit
    otpForm.addEventListener('submit', function(e) {
        combineOtpValues();
        // Basic validation: ensure all 6 digits are entered
        if (hiddenOtpField.value.length !== 6) {
             e.preventDefault(); // Prevent form submission
             // Optionally: show an error message to the user
             alert('Bitte geben Sie alle 6 Ziffern des OTP-Codes ein.');
        }
    });

     // Automatically focus the first input field if it's empty
     if(inputs[0].value === '') {
        inputs[0].focus();
     } else if(hiddenOtpField.value.length === 6) {
         // If prefilled, focus the submit button or last input
         inputs[inputs.length - 1].focus();
     }

});
</script>
@endsection