@extends('auth.layout.app')
@section('title', __("Register"))  <!-- Set the page title dynamically -->

@section('cardTitle', __('Register'))  <!-- Set the card title -->

@section('cardText', __('Hi, welcome to :site_name.', ['site_name' => config('config.site_name')]))  <!-- Set the card text -->

@section('content')
    <form class="form-body" action="{{ route('register') }}" method="POST">
        @csrf
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label for="name" class="form-label">{{__('Name')}}</label>
                <div class="ms-auto position-relative">
                    <div class="position-absolute top-50 translate-middle-y search-icon px-3">
                        <i class="fa-regular fa-user"></i>
                    </div>
                    <input type="text"
                           class="form-control radius-30 ps-5 {{ $errors->has('name') ? 'is-invalid' : '' }}"
                           id="name" name="name" value="{{old('name')}}" placeholder="{{__('Name')}}" required>
                </div>
                <p class="text-danger">
                    @error('name')
                    {{ $message }}
                    @enderror
                </p>
            </div>
            <div class="col-12  col-md-6">
                <label for="username" class="form-label">{{__('Username')}}</label>
                <div class="ms-auto position-relative">
                    <div class="position-absolute top-50 translate-middle-y search-icon px-3">
                        <i class="fa-regular fa-user"></i>
                    </div>
                    <input type="text"
                           class="form-control radius-30 ps-5 {{ $errors->has('username') ? 'is-invalid' : '' }}"
                           id="username" value="{{old('username')}}" name="username" placeholder="{{__('Username')}}" required>
                </div>
                <p class="text-danger">
                    @error('username')
                    {{ $message }}
                    @enderror
                </p>
            </div>
            <div class="col-12">
                <label for="phone" class="form-label">{{__('Phone No')}}</label>
                <div class="ms-auto position-relative">
                    <div class="position-absolute top-50 translate-middle-y search-icon px-3">
                        <i class="fa fa-phone"></i>
                    </div>
                    <input type="text"
                           class="form-control radius-30 ps-5 pe-5 {{ $errors->has('phone') ? 'is-invalid' : '' }}"
                           id="phone" value="{{old('phone')}}" name="phone" placeholder="{{__('923169994838')}}" required>
                    <button type="button"
                            class="btn btn-sm btn-secondary position-absolute end-0 top-50 translate-middle-y me-2"
                            id="sendOtpBtn">{{ __('Send Code') }}</button>
                </div>
                <p class="text-danger">@error('phone'){{ $message }}@enderror</p>
                <p class="text-danger mt-2" id="otpError" style="display: none;"></p>
            </div>

            <div class="col-12 mt-3 d-none" id="otpSection">
                <label for="otp_code" class="form-label">{{__('Enter OTP')}}</label>
                <div class="ms-auto position-relative">
                    <div class="ms-auto position-relative">
                        <div class="position-absolute top-50 translate-middle-y search-icon px-3">
                            <i class="fa fa-key"></i>
                        </div>
                        <input type="text"
                               class="form-control radius-30 ps-5"
                               id="otp_code" name="otp_code" placeholder="{{__('OTP Code')}}">
                        <button type="button"
                                class="btn btn-sm btn-secondary position-absolute end-0 top-50 translate-middle-y me-2"
                                id="verifyOtpBtn">{{ __('Verify Code') }}</button>
                    </div>
                    <button type="button" class="btn btn-link p-0 mt-1"
                            id="resendOtpBtn">{{ __('Resend Code') }}</button>
                </div>
                <p class="text-success" id="otpSuccess" style="display: none;"></p>

                <button type="button" class="btn btn-link p-0 mt-2 text-danger" id="changeNumberBtn">
                    {{ __('Change Phone Number') }}
                </button>

            </div>

            <div class="col-12 col-md-6">
                <label for="username" class="form-label">{{__('Email')}}</label>
                <div class="ms-auto position-relative">
                    <div class="position-absolute top-50 translate-middle-y search-icon px-3">
                        {{-- email icon --}}
                        <i class="fa-regular fa-envelope"></i>
                    </div>
                    <input type="text"
                           class="form-control radius-30 ps-5 {{ $errors->has('email') ? 'is-invalid' : '' }}"
                           id="email" value="{{old('email')}}" name="email" placeholder="{{__('Email')}}" required>
                </div>
                <p class="text-danger">
                    @error('email')
                    {{ $message }}
                    @enderror
                </p>
            </div>
            <div class="col-12 col-md-6">
                <label for="password" class="form-label">{{__('Enter Password')}}</label>
                <div class="ms-auto position-relative">
                    <div class="position-absolute top-50 translate-middle-y search-icon px-3"><i
                            class="fa-solid fa-lock"></i></div>
                    <input type="password" name="password" class="form-control radius-30 ps-5"
                           id="password" placeholder="{{__('Enter Password')}}" required>

                </div>

            </div>

            <div class="col-12 d-none" id="registerSection">
                <div class="d-grid">
                    <button type="submit" class="btn btn-primary radius-30">{{__('Register')}}</button>
                </div>
            </div>
            <div class="col-12">
                <p class="mb-0">{{__('Already have account?')}} <a
                        href="{{ route('login') }}">{{__('Sign in here')}}</a></p>
            </div>
        </div>
    </form>
@endsection

@section('custom-js')
    <script>
        $(document).ready(function () {
            function showMessage(type, message) {
                if (type === 'error') {
                    $('#otpError').text(message).show();
                    $('#otpSuccess').hide();
                } else if (type === 'success') {
                    $('#otpSuccess').text(message).show();
                    $('#otpError').hide();
                }
            }

            // Send OTP
            $('#sendOtpBtn').on('click', function () {
                let phone = $('#phone').val();
                $('#otpError, #otpSuccess').hide();

                if (!phone) {
                    showMessage('error', 'Please enter your phone number.');
                    return;
                }

                // Save original button state
                let originalText = $('#sendOtpBtn').html();
                let resendOtpBtn = $('#resendOtpBtn').html();

                // Set loading state
                $('#sendOtpBtn')
                    .prop('disabled', true)
                    .html('<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Sending...');

                $('#resendOtpBtn')
                    .prop('disabled', true)
                    .html('<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Resending...');

                $.ajax({
                    url: "{{ route('send.otp') }}",
                    method: "POST",
                    data: {
                        phone: phone,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (response) {
                        $('#otpSection').removeClass('d-none');
                        $('#sendOtpBtn').hide(); // Hide after successful send
                        showMessage('success', response.message);
                        $('#phone').prop('readonly', true);
                    },
                    error: function (xhr) {
                        const msg = xhr.responseJSON?.message || 'Failed to send OTP.';
                        showMessage('error', msg);
                    },
                    complete: function () {
                        // Re-enable the button in case of failure
                        $('#sendOtpBtn')
                            .prop('disabled', false)
                            .html(originalText);

                        // Restore button regardless of success or error
                        $('#resendOtpBtn')
                            .prop('disabled', false)
                            .html(resendOtpBtn);
                    }
                });
            });

            // Resend OTP
            $('#resendOtpBtn').on('click', function () {
                $('#sendOtpBtn').click();
            });


            $('#changeNumberBtn').on('click', function () {
                // Show the send button again
                $('#sendOtpBtn').show().prop('disabled', false).html('Send Code');

                // Hide OTP section and Register button
                $('#otpSection').addClass('d-none');
                $('#registerSection').addClass('d-none');

                // Clear OTP input and messages
                $('#otp_code').val('');
                $('#otpError, #otpSuccess').hide();
                $('#phone').prop('readonly', false);

                // Also clear OTP session via optional AJAX
                // (Optional, only if you want to invalidate OTP server-side)
            });

            // Verify OTP
            $('#verifyOtpBtn').on('click', function () {
                let otp = $('#otp_code').val();
                let phone = $('#phone').val();

                if (!otp) {
                    showMessage('error', 'Please enter the OTP code.');
                    return;
                }

                let originalText = $('#verifyOtpBtn').html();

                $('#verifyOtpBtn')
                    .prop('disabled', true)
                    .html('<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Verifying...');

                $('#otp_code').prop('disabled', true);

                $.ajax({
                    url: "{{ route('verify.otp') }}",
                    method: "POST",
                    data: {
                        otp_code: otp,
                        phone: phone,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (response) {
                        showMessage('success', response.message);
                        $('#registerSection').removeClass('d-none');
                        $('#otpSection').addClass('d-none');
                        $('#otp_code').val('');
                        setTimeout(function () {
                            $('#otpError, #otpSuccess').hide();
                        }, 1000); // Add a delay of 500ms (or you can adjust the time as needed)
                    },
                    error: function (xhr) {
                        const msg = xhr.responseJSON?.message || 'OTP verification failed.';
                        showMessage('error', msg);
                        $('#registerSection').addClass('d-none');
                    },
                    complete: function () {
                        // Re-enable the button in case of failure
                        $('#verifyOtpBtn')
                            .prop('disabled', false)
                            .html(originalText);
                        $('#otp_code').prop('disabled', true);
                    }
                });
            });
        });
    </script>
@endsection