@extends('front.layouts.main')

@section('title') {{ __('Kua agent - Step 4') }} @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="frmStep4" method="post" autocomplete="off"
                        action="{{ route('kua-agent.storeRegister4') }}" 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 consultancy-experience-info-ajax"
                                id="geographical_availability_work_preference">
                                @php
                                    $oldInput = old();
                                    $sessionStep4 = session('kua_agent.step4', []);
                                @endphp
                                <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    // Restore region_of_work and other fields from sessionStorage if present
                                    if (window.sessionStorage) {
                                        var region = sessionStorage.getItem('region_of_work');
                                        if (region) {
                                            var select = document.getElementById('region_of_work');
                                            if (select) select.value = region;
                                        }
                                        var roaming = sessionStorage.getItem('open_to_roaming');
                                        if (roaming) {
                                            var radio = document.querySelector('input[name="open_to_roaming"][value="' + roaming + '"]');
                                            if (radio) radio.checked = true;
                                        }
                                        var smartphone = sessionStorage.getItem('has_smartphone');
                                        if (smartphone) {
                                            var radio = document.querySelector('input[name="has_smartphone"][value="' + smartphone + '"]');
                                            if (radio) radio.checked = true;
                                        }
                                        var transport = sessionStorage.getItem('has_transport');
                                        if (transport) {
                                            var radio = document.querySelector('input[name="has_transport"][value="' + transport + '"]');
                                            if (radio) radio.checked = true;
                                        }
                                    }
                                });
                                </script>
                                @php
                                    $oldData = (!empty(array_filter($oldInput, function($v) { return $v !== null && $v !== ''; })) ? $oldInput : $sessionStep4);

                                    if (empty($oldData['region_of_work'] ?? '') && isset($kuaAgentProfile) && $kuaAgentProfile && !empty($kuaAgentProfile->regions_available)) {
                                        $regionVal = $kuaAgentProfile->regions_available;
                                        if (is_array($regionVal)) {
                                            $oldData['region_of_work'] = count($regionVal) ? $regionVal[0] : '';
                                        } elseif (is_string($regionVal) && strpos($regionVal, '[') === 0) {
                                            $arr = json_decode($regionVal, true);
                                            $oldData['region_of_work'] = (is_array($arr) && count($arr)) ? $arr[0] : '';
                                        } else {
                                            $oldData['region_of_work'] = $regionVal;
                                        }
                                    }

                                    if (empty($oldData['open_to_roaming'] ?? '') && isset($kuaAgentProfile) && $kuaAgentProfile && isset($kuaAgentProfile->open_to_roaming)) {
                                        $oldData['open_to_roaming'] = $kuaAgentProfile->open_to_roaming;
                                    }
                                    if (empty($oldData['has_smartphone'] ?? '') && isset($kuaAgentProfile) && $kuaAgentProfile && isset($kuaAgentProfile->has_smartphone)) {
                                        $oldData['has_smartphone'] = $kuaAgentProfile->has_smartphone;
                                    }
                                    if (empty($oldData['has_transport'] ?? '') && isset($kuaAgentProfile) && $kuaAgentProfile && isset($kuaAgentProfile->has_transport)) {
                                        $oldData['has_transport'] = $kuaAgentProfile->has_transport;
                                    }
                                @endphp

                                @include('front.modules.kua_agent.register.sections.geographical_availability_work_preference', [
                                    'regions' => $regions,
                                    'oldData' => $oldData
                                ])
                            </div>

                            <div class="d-flex justify-content-between mt-4">
                                <a href="{{ route('kua-agent.register3') }}"
                                    class="btn btn-secondary btn-privous">{{ __('Previous') }}</a>
                                <input type="submit" name="next" class="action-button btn btn-em submit"
                                    value="{{ __('Save & Next') }}" />
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
@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() {
    $('#frmStep4').on('submit', function(e) {
        // Client-side validation for region_of_work
        var region = $('#region_of_work').val();
        if (!region) {
            e.preventDefault();
            $('#region_of_work').addClass('is-invalid');
            if ($('#region_of_work').next('.invalid-feedback').length === 0) {
                var msg = @json(__('Please select a region you are available to work in.'));
                $('#region_of_work').after('<div class="invalid-feedback d-block">'+ msg +'</div>');
            }
            var $region = $('#region_of_work');
            if ($region.length && $region.offset()) {
                $('html, body').animate({ scrollTop: $region.offset().top - 100 }, 300);
            }
            return false;
        } else {
            $('#region_of_work').removeClass('is-invalid');
            $('#region_of_work').next('.invalid-feedback').remove();
        }

        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.register5') }}";
            },
            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 + '"]');
                    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);
            }
        });
        return false;
    });
});
</script>
@endpush