@extends('layouts.frontend.master_auth')
@section('title', 'Verify Phone')

@push('css')
    <style>
        .otp-input {
            width: 52px;
            height: 52px;
            border: 1px solid #E5E7EB;
            border-radius: 8px;
            text-align: center;
            font-size: 1.25rem;
        }
        .otp-input:focus {
            border-color: #009245;
            outline: none;
            box-shadow: 0 0 0 1px #009245;
        }
        .otp-input.error-input {
            border-color: #dc2626;
        }
        .error {
            color: #dc2626;
            font-size: 0.75rem;
            margin-top: 0.25rem;
            display: none;
        }
        .custom-hover:hover {
            background-color: black !important;
        }
        .timer-container {
            width: 100%;
        }

        .timer-display {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
        }

        .timer-box {
            background: #F3F4F6;
            border-radius: 8px;
            padding: 8px 12px;
            min-width: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .timer-box span:first-child {
            font-size: 24px;
            color: #059669;
            line-height: 1;
        }

        .timer-label {
            font-size: 12px;
            color: #6B7280;
            margin-top: 4px;
        }

        .timer-separator {
            font-size: 24px;
            font-weight: 600;
            color: #059669;
            margin: 0 4px;
            padding-bottom: 16px;
        }

        /* Animation for last 30 seconds */
        .timer-warning .timer-box span:first-child {
            color: #DC2626;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
@endpush

@section('content')
    <div class="flex flex-col items-center justify-center min-h-screen bg-white">
        <div class="mb-4">
            <img src="{{ asset('frontend/logo/bau-logo.png') }}" alt="Logo" class="w-12 h-12">
        </div>

        <h2 class="text-2xl font-semibold text-gray-900 mb-8">Register a new account</h2>

        <div class="w-full max-w-md p-8 bg-white rounded-xl shadow-sm border border-gray-100">
            <h3 class="text-[#009245] text-2xl font-semibold mb-2">Verify phone number</h3>

            <p class="text-gray-600 text-sm mb-4">
                Verification code Send to {{$phone}} number. Enter the code to verify the phone.
            </p>
            <div class="mb-8 p-3 rounded border border-yellow-200 bg-yellow-50 text-yellow-800">
                For now, use OTP: <span class="font-mono font-semibold">123456</span>
            </div>

            <div class="flex items-center justify-center mb-6">
                <div class="timer-container text-center">
                    <div class="timer-display flex items-center justify-center gap-2 mb-2">
                        <div class="timer-box">
                            <span id="minutes">02</span>
                            <span class="timer-label">minutes</span>
                        </div>
                        <span class="timer-separator">:</span>
                        <div class="timer-box">
                            <span id="seconds">00</span>
                            <span class="timer-label">seconds</span>
                        </div>
                    </div>
                    <p class="text-sm text-gray-500">Time remaining to verify</p>
                </div>
            </div>

            <form method="POST" action="{{ route('verify.otp') }}" id="otpForm" novalidate>
                @csrf
                <div class="flex gap-2 justify-between mb-4">
                    <div class="flex flex-col">
                        <input type="text" class="otp-input" maxlength="1" name="otp1" id="otp1">
                    </div>
                    <div class="flex flex-col">
                        <input type="text" class="otp-input" maxlength="1" name="otp2" id="otp2">
                    </div>
                    <div class="flex flex-col">
                        <input type="text" class="otp-input" maxlength="1" name="otp3" id="otp3">
                    </div>
                    <div class="flex flex-col">
                        <input type="text" class="otp-input" maxlength="1" name="otp4" id="otp4">
                    </div>
                    <div class="flex flex-col">
                        <input type="text" class="otp-input" maxlength="1" name="otp5" id="otp5">
                    </div>
                    <div class="flex flex-col">
                        <input type="text" class="otp-input" maxlength="1" name="otp6" id="otp6">
                    </div>
                </div>

                <div class="text-center mb-8">
                    <a href="#" class="text-green-600 hover:underline text-sm" id="resendOtp">Didn't receive a code?</a>
                </div>

                <input type="hidden" id="phone" value="{{ $phone }}">
                <input type="hidden" id="isForgetPassword" value="{{$forgetPassword}}">

                <button type="submit" class="w-full py-3 text-white bg-green-600 rounded-lg custom-hover">
                    Verify
                </button>
            </form>
        </div>
    </div>
@endsection

@push('js')
    <x-generic-validation-error-toastr/>
    @push('js')
        <x-generic-validation-error-toastr/>
        <script>
            $(document).ready(function() {
                let timer;
                const TIMER_DURATION = 120;
                let timeLeft = TIMER_DURATION;
                const $resendBtn = $('#resendOtp');
                const $timerDisplay = $('.timer-display');
                const $minutes = $('#minutes');
                const $seconds = $('#seconds');

                function startTimer() {
                    timeLeft = TIMER_DURATION;
                    $resendBtn.addClass('pointer-events-none text-gray-400').removeClass('text-green-600 hover:underline');
                    $timerDisplay.removeClass('timer-warning');

                    clearInterval(timer);
                    timer = setInterval(() => {
                        timeLeft--;
                        const minutes = Math.floor(timeLeft / 60);
                        const seconds = timeLeft % 60;

                        $minutes.text(String(minutes).padStart(2, '0'));
                        $seconds.text(String(seconds).padStart(2, '0'));

                        if (timeLeft <= 30) {
                            $timerDisplay.addClass('timer-warning');
                        }

                        if (timeLeft <= 0) {
                            clearInterval(timer);
                            $resendBtn.html('Resend code')
                                .removeClass('pointer-events-none text-gray-400')
                                .addClass('text-green-600 hover:underline');
                            $timerDisplay.removeClass('timer-warning');
                        }
                    }, 1000);
                }

                const validator = $('#otpForm').validate({
                    rules: {
                        otp1: { required: true, digits: true },
                        otp2: { required: true, digits: true },
                        otp3: { required: true, digits: true },
                        otp4: { required: true, digits: true },
                        otp5: { required: true, digits: true },
                        otp6: { required: true, digits: true }
                    },
                    errorPlacement: function(error, element) {},
                    highlight: function(element) {
                        $(element).addClass('error-input');
                    },
                    unhighlight: function(element) {
                        $(element).removeClass('error-input');
                    }
                });

                $('.otp-input').on('input', function(e) {
                    const $this = $(this);
                    let value = $this.val().trim();

                    if (!/^\d*$/.test(value)) {
                        $this.val('');
                        return;
                    }

                    if (value.length > 1) {
                        const digits = value.split('').slice(0, 6);
                        const $inputs = $('.otp-input');
                        $inputs.each(function(index) {
                            if (index < digits.length) {
                                $(this).val(digits[index]);
                            } else {
                                $(this).val('');
                            }
                        });
                        const nextIndex = Math.min(digits.length, $inputs.length - 1);
                        $inputs.eq(nextIndex).focus();
                        return;
                    }

                    if (value.length > 0) {
                        $this.val(value.slice(-1));
                        const $next = $this.closest('div').next().find('.otp-input');
                        if ($next.length) {
                            $next.focus();
                        }
                    }
                });

                $('.otp-input').on('keydown', function(e) {
                    const $this = $(this);

                    if (/^\d$/.test(e.key)) {
                        e.preventDefault();
                        $this.val(e.key);
                        const $next = $this.closest('div').next().find('.otp-input');
                        if ($next.length) {
                            $next.focus();
                        }
                    }
                });

                $('.otp-input').on('paste', function(e) {
                    e.preventDefault();
                    const pastedData = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
                    const digits = pastedData.replace(/\D/g, '').split('').slice(0, 6);
                    const $inputs = $('.otp-input');
                    $inputs.each(function(index) {
                        $(this).val(digits[index] || '');
                    });
                    const nextIndex = Math.min(digits.length, $inputs.length - 1);
                    $inputs.eq(nextIndex).focus();
                });

                $('#otpForm').on('submit', function(e) {
                    e.preventDefault();

                    if (!validator.form()) {
                        $('.otp-input').each(function() {
                            if (!$(this).val()) {
                                $(this).addClass('error-input');
                            }
                        });
                        return;
                    }

                    const otp = $('.otp-input').map(function() {
                        return $(this).val();
                    }).get().join('');

                    if (otp.length === 6) {
                        const submitBtn = $("button[type='submit']");
                        submitBtn.prop("disabled", true).html('<i class="fas fa-spinner fa-spin"></i> Verifying...');


                        $.ajax({
                            url: this.action,
                            type: "POST",
                            data: $(this).serialize()
                            + '&phone=' + encodeURIComponent($('#phone').val())
                            + '&forgetPassword=' + encodeURIComponent($('#isForgetPassword').val()),

                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                if (response.success) {
                                    toastr.success(response.message);
                                    if (response.redirectTo) {
                                        window.location.href = response.redirectTo;
                                    }
                                } else {
                                    toastr.error(response.message || 'Verification failed');
                                    submitBtn.prop("disabled", false).html('Verify');
                                }
                            },
                            error: function(xhr) {
                                const response = xhr.responseJSON;
                                if (response.errors) {
                                    Object.keys(response.errors).forEach(function(key) {
                                        toastr.error(response.errors[key][0]);
                                    });
                                } else if (response.message) {
                                    toastr.error(response.message);
                                } else {
                                    toastr.error('Verification failed. Please try again.');
                                }
                                submitBtn.prop("disabled", false).html('Verify');
                            }
                        });
                    }
                });

                $('#resendOtp').on('click', function(e) {
                    e.preventDefault();

                    if (timeLeft > 0) return;
                    let phone = $('#phone').val();

                    $.ajax({
                        url: '{{ route("resend.otp") }}',
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            phone: phone,
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message || 'OTP resent successfully');
                                startTimer();
                                $('.otp-input').val('').removeClass('error-input');
                                $('#otp1').focus();
                            } else {
                                toastr.error(response.message || 'Failed to resend OTP');
                            }
                        },
                        error: function(xhr) {
                            const response = xhr.responseJSON;
                            toastr.error(response?.message || 'Failed to resend OTP');
                        }
                    });
                });

                startTimer();

                toastr.options = {
                    closeButton: true,
                    progressBar: true,
                    positionClass: "toast-top-right",
                    timeOut: 5000
                };
            });
        </script>
    @endpush
@endpush