@extends('components.layout.master')

@section('title', 'Account Deletion')
@section('module-icon', 'fas fa-trash')

@section('breadcrumb')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('showCloseAccountPage') }}">Account Close</a></li>
        <li class="breadcrumb-item active">@yield('title')</li>
    </ol>
@endsection

<style>
    .otp-box {
        width: 45px;
        height: 45px;
        text-align: center;
        font-size: 18px;
    }
</style>

@section('content')
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="" id="amountForm">
                                @csrf

                                <!-- Mobile Number Input -->
                                <div class="col-lg-12">
                                    <div class="primary_input" id="stateDiv">
                                        <label class="primary_input_label">Mobile Number <span
                                                class="text-danger">*</span></label>
                                        <input class="form-control" type="text" name="mobile_number" id="mobile_number"
                                            autocomplete="off" placeholder="Enter Mobile Number"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0,10);">
                                        <span class="text-danger" id="mobile_number_error"></span>
                                    </div>
                                </div>

                                <!-- OTP Input Boxes -->
                                <div class="col-lg-4 mt-3" id="otpDiv" style="display: none;">
                                    <div class="primary_input">
                                        <label class="primary_input_label">Enter OTP <span
                                                class="text-danger">*</span></label>
                                        <div class="d-flex justify-content-between otp-input-group" style="gap: 10px;">
                                            @for ($i = 1; $i <= 6; $i++)
                                                <input type="text" class="form-control otp-box" maxlength="1"
                                                    inputmode="numeric" pattern="[0-9]*" id="otp-{{ $i }}">
                                            @endfor
                                        </div>
                                        <div class="text-center mt-2" id="otp-timer" style="font-weight: bold; color: red;">
                                        </div>
                                        <span class="text-danger" id="otp_error"></span>
                                    </div>
                                </div>

                                <!-- Submit Button -->
                                <div class="col-lg-12 mt-3" style="display: grid; place-items: center;">
                                    <button id="submitBtn" type="submit" class="btn btn-primary">Send OTP</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script>
        let otpSent = false;
        let otpCountdown;
        let countdownSeconds = 60;

        $(document).ready(function() {

            // OTP input auto navigation
            $('.otp-box').on('input', function() {
                if ($(this).val().length === 1) {
                    $(this).next('.otp-box').focus();
                }
            });

            $('.otp-box').on('keydown', function(e) {
                if (e.key === 'Backspace' && !$(this).val()) {
                    $(this).prev('.otp-box').focus();
                }
            });

            $('#amountForm').on('submit', function(e) {
                e.preventDefault();
                const mobile = $('#mobile_number').val().trim();

                if (!otpSent) {
                    // Send OTP
                    if (mobile.length !== 10) {
                        $('#mobile_number_error').text('Please enter a valid 10-digit mobile number.');
                        return;
                    }

                    $('#mobile_number_error').text('');

                    $.ajax({
                        url: '{{ route('sendAccountDeletionOtp') }}',
                        type: 'POST',
                        data: {
                            mobile_no: mobile,
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                        },
                        beforeSend: function() {
                            $('#submitBtn').prop('disabled', true).text('Sending...');
                        },
                        success: function(response) {
                            $('#submitBtn').prop('disabled', false).text('Verify OTP');

                            if (response.status == true) {
                                otpSent = true;
                                $('#otpDiv').slideDown();
                                $('#mobile_number').prop('disabled', true);
                                $('#submitBtn').removeClass().addClass('btn btn-success');

                                Swal.fire('OTP Sent', response.message || 'Check your phone.',
                                    'success');
                                startOtpTimer();
                            } else {
                                Swal.fire('oops', response.message || 'Failed to send OTP.',
                                    'error');
                            }
                        },
                        error: function() {
                            $('#submitBtn').prop('disabled', false).text('Send OTP');
                            Swal.fire('Error', 'Something went wrong. Try again.', 'error');
                        }
                    });

                } else {
                    // Verify OTP
                    let otp = '';
                    $('.otp-box').each(function() {
                        otp += $(this).val();
                    });

                    if (otp.length !== 6 || !/^\d{6}$/.test(otp)) {
                        $('#otp_error').text('Please enter a valid 6-digit OTP.');
                        return;
                    }

                    $('#otp_error').text('');

                    $.ajax({
                        url: '{{ route('verifyAccountDeletionOtp') }}',
                        type: 'POST',
                        data: {
                            mobile_no: mobile,
                            otp: otp,
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                        },
                        beforeSend: function() {
                            $('#submitBtn').prop('disabled', true).text('Verifying...');
                        },
                        success: function(response) {
                            $('#submitBtn').prop('disabled', false).text('Verify OTP');

                            if (response.status == true) {
                                Swal.fire('Success', response.message || 'OTP verified.',
                                        'success')
                                    .then(() => {
                                        location.reload();
                                    });
                            } else {
                                Swal.fire('Error', response.message ||
                                    'OTP verification failed.', 'error');
                            }
                        },
                        error: function() {
                            $('#submitBtn').prop('disabled', false).text('Verify OTP');
                            Swal.fire('Error', 'Something went wrong. Try again.', 'error');
                        }
                    });
                }
            });
        });

        function startOtpTimer() {
            $('#otp-timer').show();
            countdownSeconds = 60;
            updateTimerDisplay();

            otpCountdown = setInterval(() => {
                countdownSeconds--;
                updateTimerDisplay();

                if (countdownSeconds <= 0) {
                    clearInterval(otpCountdown);
                    $('#otpDiv').slideUp();
                    $('#otp-timer').hide();
                    otpSent = false;
                    $('#mobile_number').prop('disabled', false);
                    $('#submitBtn').removeClass().addClass('btn btn-primary').text('Send OTP');
                    $('.otp-box').val('');
                }
            }, 1000);
        }

        function updateTimerDisplay() {
            $('#otp-timer').text('OTP valid for: ' + countdownSeconds + ' seconds');
        }
    </script>
@endpush