@extends('citizen-portal.master')
@section('title')
    নাগরিক তথ্য যাচাই
@endsection
@section('body')
    <main class="main-centered">
        <div class="verify-container">
            <h1 class="verify-heading">নাগরিক তথ্য যাচাই করুন</h1>
            <p class="verify-subheading">নিবন্ধন করার পূর্বে আপনার তথ্য আমাদের ডাটাবেজে আছে কিনা তা যাচাই করুন।</p>

            <div class="form-group">
                <label for="idType">শনাক্তকরণ ধরন</label>
                <select id="idType">
                    <option value="nid">জাতীয় পরিচয়পত্র</option>
                    <option value="birth">জন্মনিবন্ধন</option>
                </select>
            </div>

            <div class="form-group" id="idNumberField">
                <label for="idNumber">জাতীয় পরিচয়পত্র নম্বর</label>
                <input type="text" id="idNumber" placeholder="আপনার নম্বরটি লিখুন">
                <div class="validation-message" id="validationMessage"></div>
            </div>

            <button class="verify-button" id="verifyBtn"><i class="fas fa-search"></i> যাচাই করুন</button>

            <div id="result-section">
                <div id="user-info-section" style="display: none;">
                    <div class="info-item"><span class="info-label">নাম:</span><span id="info-name"></span></div>
                    <div class="info-item"><span class="info-label">পিতার নাম:</span><span id="info-father-name"></span></div>
                    <div class="info-item"><span class="info-label">মাতার নাম:</span><span id="info-mother-name"></span></div>
                </div>
                <p id="resultMessage"></p>
                <button class="register-button" id="registerBtn" style="display: none;">রেজিস্ট্রেশন করুন</button>
            </div>
        </div>
    </main>

    <div id="otpModal" class="modal-overlay">
        <div class="modal-content">
            <button class="modal-close-btn" id="closeOtpModal">&times;</button>
            <h3>রেজিস্ট্রেশন সম্পূর্ণ করুন</h3>
            <p>আপনার পূর্বে নিবন্ধিত মোবাইল নম্বরে একটি OTP পাঠানো হবে। নিচের বক্সে থাকা নাম্বারটি মিলিয়ে নিন সঠিক হলে OTP পাঠান বাটনে ক্লিক করুন।</p>
            <div class="phone-display"><i class="fas fa-mobile-alt"></i><span id="maskedPhone"></span></div>
            <div id="otp-initial-view"><button class="verify-button" id="sendOtpBtn">OTP পাঠান</button></div>
            <div id="otp-input-view" style="display: none;">
                <div class="form-group" style="text-align: center;"><label for="otpInput">OTP কোড লিখুন</label><input type="text" id="otpInput" placeholder="----" maxlength="4"><div class="validation-message" id="otpError"></div></div>
                <button class="verify-button" id="verifyOtpBtn">যাচাই করুন</button>
            </div>
        </div>
    </div>

    <div id="successModal" class="modal-overlay">
        <div class="modal-content">
            <button class="modal-close-btn" id="closeSuccessModal">&times;</button>
            <i class="fas fa-check-circle icon-success"></i>
            <h3>রেজিস্ট্রেশন সফল</h3>
            <p>আপনার পূর্বের তথ্য ব্যবহার করে রেজিস্ট্রেশন সফলভাবে সম্পন্ন হয়েছে।</p>
        </div>
    </div>
@endsection
@push('style')
    <style>
        .main-centered {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
            padding: 2rem;
        }

        .verify-container {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: var(--shadow);
            padding: 2.5rem 3rem;
            max-width: 600px;
            width: 100%;
            text-align: center;
            border-top: 5px solid var(--accent-color);
        }

        .verify-heading {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 1rem;
        }

        .verify-subheading {
            color: var(--text-muted);
            margin-bottom: 2.5rem;
            font-size: 1rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        .form-group select,
        .form-group input[type="text"] {
            width: 100%;
            padding: 0.8rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .form-group select:focus,
        .form-group input[type="text"]:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }

        .verify-button {
            width: 100%;
            padding: 0.9rem;
            font-size: 1.1rem;
            color: #fff;
            background-color: var(--accent-color);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin-top: 1rem;
            transition: background-color 0.3s, transform 0.2s;
        }

        .verify-button:hover {
            background-color: var(--accent-hover);
            transform: translateY(-2px);
        }

        .validation-message {
            color: #ef4444;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: none;
        }

        #result-section {
            margin-top: 2rem;
            padding: 1.5rem;
            border-radius: 8px;
            display: none;
            text-align: left;
        }

        #result-section.found {
            background-color: #e6f7ff;
            border: 1px solid #91d5ff;
        }

        #user-info-section {
            margin-bottom: 1.5rem;
        }

        #user-info-section .info-item {
            display: flex;
            margin-bottom: 0.5rem;
        }

        #user-info-section .info-label {
            font-weight: 600;
            color: var(--text-color);
            width: 100px;
        }

        #result-section p {
            margin: 0 0 1rem 0;
            color: #333;
            font-size: 1rem;
            text-align: center;
        }

        .register-button {
            padding: 0.7rem 1.5rem;
            font-size: 1rem;
            color: #fff;
            background-color: #22c55e;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            display: block;
            margin: 0 auto;
        }

        /* Modal Styles */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
        .modal-overlay.visible { opacity: 1; visibility: visible; }
        .modal-content { position: relative; background: white; padding: 2rem; border-radius: 12px; text-align: center; max-width: 400px; transform: scale(0.9); transition: transform 0.3s ease; }
        .modal-overlay.visible .modal-content { transform: scale(1); }
        .modal-close-btn { position: absolute; top: 10px; right: 15px; font-size: 1.8rem; color: #aaa; background: none; border: none; cursor: pointer; }
        .modal-content .icon-success { font-size: 3rem; color: #22c55e; margin-bottom: 1rem; }
        .modal-content h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
        .phone-display { background-color: #f1f5f9; padding: 0.8rem 1rem; border-radius: 8px; margin: 1.5rem 0; font-size: 1.2rem; font-weight: 600; color: var(--text-color); display: flex; align-items: center; justify-content: center; gap: 10px; }
        #otpInput { text-align: center; font-size: 1.5rem; letter-spacing: 0.5rem; max-width: 150px; margin: 0 auto; }
        #otpError { text-align: center; }

    </style>
@endpush
@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const idTypeSelect = document.getElementById('idType');
            const idNumberField = document.getElementById('idNumberField');
            const idNumberInput = document.getElementById('idNumber');
            const idNumberLabel = idNumberField.querySelector('label');
            const validationMessage = document.getElementById('validationMessage');
            const verifyBtn = document.getElementById('verifyBtn');
            const resultSection = document.getElementById('result-section');
            const userInfoSection = document.getElementById('user-info-section');
            const infoName = document.getElementById('info-name');
            const infoFatherName = document.getElementById('info-father-name');
            const infoMotherName = document.getElementById('info-mother-name');
            const resultMessage = document.getElementById('resultMessage');
            const registerBtn = document.getElementById('registerBtn');

            const otpModal = document.getElementById('otpModal');
            const closeOtpModalBtn = document.getElementById('closeOtpModal');
            const maskedPhone = document.getElementById('maskedPhone');
            const sendOtpBtn = document.getElementById('sendOtpBtn');
            const otpInputView = document.getElementById('otp-input-view');
            const otpInitialView = document.getElementById('otp-initial-view');
            const otpInput = document.getElementById('otpInput');
            const otpError = document.getElementById('otpError');
            const verifyOtpBtn = document.getElementById('verifyOtpBtn');

            const successModal = document.getElementById('successModal');
            const closeSuccessModalBtn = document.getElementById('closeSuccessModal');

            const bengaliDigits = {'০':'0','১':'1','২':'2','৩':'3','৪':'4','৫':'5','৬':'6','৭':'7','৮':'8','৯':'9'};

            function updateInputAttributes() {
                const selectedType = idTypeSelect.value;
                idNumberInput.value = '';
                validationMessage.style.display = 'none';
                resultSection.style.display = 'none';

                if (selectedType === 'nid') {
                    idNumberLabel.textContent = 'জাতীয় পরিচয়পত্র নম্বর';
                    idNumberInput.placeholder = 'আপনার ১০, ১৩ বা ১৭ সংখ্যার নম্বরটি লিখুন';
                } else {
                    idNumberLabel.textContent = 'জন্মনিবন্ধন নম্বর';
                    idNumberInput.placeholder = 'আপনার ১৭ সংখ্যার নম্বরটি লিখুন';
                }
            }

            function validateInput(showError = false) {
                const value = idNumberInput.value.trim();
                const selectedType = idTypeSelect.value;
                let isValid = false;
                let message = '';

                if (value === '') {
                    message = 'অনুগ্রহ করে আপনার নম্বরটি লিখুন।';
                } else if (selectedType === 'nid') {
                    if ([10, 13, 17].includes(value.length)) {
                        isValid = true;
                    } else {
                        message = 'জাতীয় পরিচয়পত্র নম্বর অবশ্যই ১০, ১৩, অথবা ১৭ সংখ্যার হতে হবে।';
                    }
                } else { // brn
                    if (value.length === 17) {
                        isValid = true;
                    } else {
                        message = 'জন্মনিবন্ধন নম্বর অবশ্যই ১৭ সংখ্যার হতে হবে।';
                    }
                }

                if (isValid) {
                    validationMessage.style.display = 'none';
                } else if(showError) {
                    validationMessage.textContent = message;
                    validationMessage.style.display = 'block';
                }
                return isValid;
            }

            idTypeSelect.addEventListener('change', updateInputAttributes);

            idNumberInput.addEventListener('input', () => {
                let engValue = idNumberInput.value.replace(/[০-৯]/g, m => bengaliDigits[m]);
                idNumberInput.value = engValue.replace(/[^0-9]/g, '');
                validateInput(false);
            });
            function maskBDPhone(phone) {
                if (!phone) return phone;
                const digits = phone.toString().replace(/\D/g, ''); // remove non-digits
                if (digits.length <= 5) return phone; // too short to mask

                const first = digits.slice(0, 3);
                const last = digits.slice(-2);
                const masked = '*'.repeat(digits.length - 5); // middle part masked

                return first + masked + last;
            }

            let phoneNumber;
            verifyBtn.addEventListener('click', () => {
                if (!validateInput(true)) {
                    return;
                }
                let idType = idTypeSelect.value;
                let idNumber = idNumberInput.value;

                $.ajax({
                    type:"POST",
                    url:"{{route('citizen-portal.citizen-verify')}}",
                    data:{idType, idNumber, _token:'{{ csrf_token() }}'},
                    success: function(res){
                        if (res.success) {
                            infoName.textContent = res.data.bangla_name;
                            infoFatherName.textContent = res.data.bn_father_name;
                            infoMotherName.textContent = res.data.bn_mother_name;
                            phoneNumber = maskBDPhone(res.data.phone);
                            userInfoSection.style.display = 'block';
                            const idType = res.idType === 'nid' ? 'জাতীয় পরিচয়পত্র' : 'জন্মনিবন্ধন';
                            resultMessage.textContent = `আপনার ${idType} নম্বরটি আমাদের ডাটাবেজে পাওয়া গেছে। রেজিস্ট্রেশন সম্পূর্ণ করতে নিচের বাটনে ক্লিক করুন।`;
                            registerBtn.style.display = 'block';
                            resultSection.className = 'found';
                            resultSection.style.display = 'block';
                        } else {
                            window.location.href = res.route;
                        }
                    }
                });
            });

            registerBtn.addEventListener('click', () => {
                maskedPhone.textContent = phoneNumber;
                otpInitialView.style.display = 'block';
                otpInputView.style.display = 'none';
                otpInput.value = '';
                otpError.style.display = 'none';
                otpModal.classList.add('visible');
            });
            let otp_secret;
            sendOtpBtn.addEventListener('click', () => {
                let idType = idTypeSelect.value;
                let idNumber = idNumberInput.value;
                $.ajax({
                    type:"POST",
                    url:"{{route('citizen-portal.send-otp')}}",
                    data:{idType, idNumber, _token:'{{ csrf_token() }}'},
                    success: function(res){
                        if(res.success){
                            otp_secret = res.otp_secret;
                            otpInitialView.style.display = 'none';
                            otpInputView.style.display = 'block';
                            otpInput.focus();
                        }else {

                        }

                    }
                });

            });

            otpInput.addEventListener('input', () => {
                let engValue = otpInput.value.replace(/[০-৯]/g, m => bengaliDigits[m]);
                otpInput.value = engValue.replace(/[^0-9]/g, '');
            });

            verifyOtpBtn.addEventListener('click', () => {
                const otpCode = otpInput.value;
                // The correct OTP for testing is 5555
                let idType = idTypeSelect.value;
                let idNumber = idNumberInput.value;
                $.ajax({
                    type:"POST",
                    url:"{{route('citizen-portal.check-otp')}}",
                    data:{idType, idNumber, otp_secret, otpCode, _token:'{{ csrf_token() }}'},
                    success: function(res){
                        if (res.success) {
                            otpModal.classList.remove('visible');
                            successModal.classList.add('visible');
                            setTimeout(() => {
                                successModal.classList.remove('visible');
                                window.location.href = '{{ route('citizen-portal.dashboard') }}';
                            }, 3000);
                        } else {
                            otpError.textContent = 'ভুল OTP কোড। আবার চেষ্টা করুন।';
                            otpError.style.display = 'block';
                        }
                    }
                });

            });

            closeOtpModalBtn.addEventListener('click', () => otpModal.classList.remove('visible'));
            closeSuccessModalBtn.addEventListener('click', () => successModal.classList.remove('visible'));

            // Initial setup
            updateInputAttributes();
        });
    </script>
@endpush