@extends('front.layouts.main')

@section('title') {{ __('Agent Identification & Agreement') }} - Step 1 @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="frmStep1" method="post" autocomplete="off"
                        action="{{ route('kua-agent.storeRegister1',['plan' => Request::get('plan')]) }}">
                        @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">
                                @include ('front.modules.kua_agent.register.sections.agent_identification_agreement')
                            </div>

                            <div class="d-flex justify-content-end mt-4">
                                <input type="submit" name="next" class=" btn-em btn submitBtn" value="{{ __('Save & Next') }}" />
                            </div>

                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('pageJs')
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
    // --- Signature Pad Setup ---
    var canvas = document.getElementById('signaturePad');
    var signaturePad = null;
    if (canvas && window.SignaturePad) {
        signaturePad = new SignaturePad(canvas, {
            backgroundColor: '#f8fafc',
            penColor: '#888',
        });
        // Resize canvas to fit container
        function resizeCanvas() {
            var ratio = Math.max(window.devicePixelRatio || 1, 1);
            canvas.width = canvas.offsetWidth * ratio;
            canvas.height = canvas.offsetHeight * ratio;
            canvas.getContext('2d').scale(ratio, ratio);
            signaturePad.clear();
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
        // Save signature to hidden input on end
        signaturePad.onEnd = function() {
            if (!signaturePad.isEmpty()) {
                $('#digital_signature_draw').val(signaturePad.toDataURL('image/png'));
            }
        };
        // Draw button (focuses canvas)
        $('#drawSignatureBtn').on('click', function() {
            canvas.focus();
        });
        // Clear button
        $('#clearSignatureBtn').on('click', function() {
            signaturePad.clear();
            $('#digital_signature_draw').val('');
        });
        // If old value exists, load it
        var oldSig = $('#digital_signature_draw').val();
        if (oldSig) {
            var img = new window.Image();
            img.onload = function() {
                signaturePad.clear();
                var ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            };
            img.src = oldSig;
        }
    }

    // --- AJAX Form Submit ---
    $('#frmStep1').on('submit', function(e) {
        e.preventDefault();

        // Always update hidden input with latest signature before submit
        if (signaturePad && !signaturePad.isEmpty()) {
            $('#digital_signature_draw').val(signaturePad.toDataURL('image/png'));
        }

        // Remove any old digital_signature field if present
        $(this).find('input[name="digital_signature"]').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('Loading...') : btn.text('Loading...');

        $.ajax({
            url: $(form).attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            },
            success: function(response) {
                // Redirect to next step on success
                window.location.href = "{{ route('kua-agent.register2') }}";
            },
            error: function(xhr) {
                // Show validation errors
                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);
            }
        });
    });

    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;
            }
        });
    });
});
</script>
@endpush