@extends('front.layouts.main')

@section('title') {{ __('Kua agent - Step 2') }} @endsection

@section('content')
<main class="kua-agent-steps-page" style="padding-top: 20px;">

    <div class="container">
        <div class="radio-btn-wrapper d-flex justify-content-end" style="padding-bottom:20px;">
            {{-- English --}}
            <div class="custom-control custom-radio radio-as-btn m-0 p-0">
                <input
                    type="radio"
                    class="custom-control-input"
                    id="langEn"
                    name="app_lang"
                    value="en"
                    data-url="{{ route('locale.switch', ['lang' => 'en']) }}"
                    @if(app()->getLocale() === 'en') checked @endif>
                <label class="custom-control-label" for="langEn">English</label>
            </div>

            {{-- Kiswahili --}}
            <div class="custom-control custom-radio radio-as-btn p-0">
                <input
                    type="radio"
                    class="custom-control-input"
                    id="langSw"
                    name="app_lang"
                    value="sw"
                    data-url="{{ route('locale.switch', ['lang' => 'sw']) }}"
                    @if(app()->getLocale() === 'sw') checked @endif>
                <label class="custom-control-label" for="langSw">Swahili</label>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="main-content">
                    <form class="form-steps" id="frmStep2" method="post" autocomplete="off"
                          action="{{ route('kua-agent.storeRegister2') }}" enctype="multipart/form-data">
                        @csrf

                        <ul class="steps steps-two d-flex justify-content-center">
                            <li class="text-center @if(request()->routeIs('kua-agent.register1')) active @endif"
                                id="agent_identification_agreement">
                                <span class="bold small-font-size">1</span>
                                <p class="xs-font-size">{{ __('Agent Identification & Agreement') }}</p>
                            </li>
                            <li class="text-center @if(request()->routeIs('kua-agent.register2')) active @endif"
                                id="experience_work_history">
                                <span class="bold small-font-size">2</span>
                                <p class="xs-font-size">{{ __('Experience & Work History (Agent-Specific)') }}</p>
                            </li>
                            <li class="text-center @if(request()->routeIs('kua-agent.register3')) active @endif"
                                id="income_declaration_conflict_of_interest_check">
                                <span class="bold small-font-size">3</span>
                                <p class="xs-font-size">{{ __('Income Declaration & Conflict of Interest Check') }}</p>
                            </li>
                            <li class="text-center @if(request()->routeIs('kua-agent.register4')) active @endif"
                                id="geographical_availability_work_preference">
                                <span class="bold small-font-size">4</span>
                                <p class="xs-font-size">{{ __('Geographical Availability & Work Preference') }}</p>
                            </li>
                            <li class="text-center @if(request()->routeIs('kua-agent.register5')) active @endif"
                                id="personal_background">
                                <span class="bold small-font-size">5</span>
                                <p class="xs-font-size">{{ __('Personal Background') }}</p>
                            </li>
                        </ul>

                        <fieldset class="text-center">
                            <div class="box white form-card text-left education-info-ajax" id="experience_work_history">
                                @php
                                    $oldInput = old();
                                    $sessionStep2 = session('kua_agent.step2', []);
                                    $oldData = (!empty(array_filter($oldInput, fn($v) => $v !== null && $v !== ''))
                                                ? $oldInput
                                                : $sessionStep2);
                                @endphp
                                @include('front.modules.kua_agent.register.sections.experience_work_history', [
                                    'products' => $productCategories,
                                    'oldData' => $oldData
                                ])
                            </div>

                            <div class="d-flex justify-content-between mt-4">
                                @if(request()->routeIs('kua-agent.register2'))
                                  <a href="{{ route('kua-agent.register1') }}" class="btn btn-secondary btn-privous">
                                      {{ __('Previous') }}
                                  </a>
                                @elseif(request()->routeIs('kua-agent.register3'))
                                  <a href="{{ route('kua-agent.register2') }}" class="btn btn-secondary btn-privous">
                                      {{ __('Previous') }}
                                  </a>
                                @elseif(request()->routeIs('kua-agent.register4'))
                                  <a href="{{ route('kua-agent.register3') }}" class="btn btn-secondary btn-privous">
                                      {{ __('Previous') }}
                                  </a>
                                @elseif(request()->routeIs('kua-agent.register5'))
                                  <a href="{{ route('kua-agent.register4') }}" class="btn btn-secondary btn-privous">
                                      {{ __('Previous') }}
                                  </a>
                                @endif

                                <input type="submit" name="next" class="action-button btn btn-em submit"
                                       value="{{ __('Save & Next') }}" />
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('pageJs')
<script>
     document.querySelectorAll('input[name="app_lang"]').forEach(function (radio) {
        radio.addEventListener('change', function () {
            const url = this.getAttribute('data-url');
            if (url) {
                window.location.href = url;
            }
        });
    });
$(document).ready(function() {
    $('#frmStep2').on('submit', function(e) {
        e.preventDefault();
        var form = this;
        var formData = new FormData(form);

        // Disable submit button and show loading
        var btn = $(form).find('input[type="submit"], button[type="submit"]');
        btn.prop('disabled', true);
        var originalText = btn.val() || btn.text();
        btn.data('original-text', originalText);
        btn.val ? btn.val(@json(__('Loading...'))) : btn.text(@json(__('Loading...')));

        $.ajax({
            url: $(form).attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
            success: function() {
                window.location.href = "{{ route('kua-agent.register3') }}";
            },
            error: function(xhr) {
                var errors = xhr.responseJSON.errors;
                $('.invalid-feedback').remove();
                $('.is-invalid').removeClass('is-invalid');

                $.each(errors, function(key, value) {
                    var input = $('[name="' + key + '"]');
                    if (key === 'products_sold') input = $('[name="products_sold"]');

                    var select2Container = (key === 'products_sold') ? input.next('.select2') : $();
                    if (select2Container.length) {
                        select2Container.after('<div class="invalid-feedback d-block">' + value[0] + '</div>');
                    } else {
                        input.addClass('is-invalid');
                        input.after('<div class="invalid-feedback d-block">' + value[0] + '</div>');
                    }
                });

                // Re-enable submit button
                btn.prop('disabled', false);
                btn.val ? btn.val(originalText) : btn.text(originalText);
            }
        });
    });
});
</script>
@endpush