@extends('backend.layouts.app')
@section('title', @$data['title'])

@section('style')
    <style>
        .nav-pills .nav-link {
            height: 40x !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 1rem !important;
            font-weight: 500 !important;
        }

        .button {
            height: 40px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 1rem !important;
            font-weight: 500 !important;
            padding-inline: 25px !important;
            min-width: 150px;
        }
    </style>
@endsection

@section('content')
    {!! breadcrumb([
        'title' => @$data['title'],
        route('admin.dashboard') => _trans('common.Dashboard'),
        '#' => @$data['title'],
    ]) !!}

    <form method="POST" action="{{ route('user.update', $data['user']->id) }}" class="card ot-card" enctype="multipart/form-data" autocomplete="off">
        @csrf
        @method('PATCH')

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class=" mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card-header bg-light">
            <nav class="nav nav-pills nav-fill">
                <a class="nav-link tab-pills bg-gradient" href="#">{{ _trans('common.Personal Info') }}</a>
                <a class="nav-link tab-pills bg-gradient" href="#">{{ _trans('common.Official Setup') }}</a>
                <a class="nav-link tab-pills bg-gradient" href="#">{{ _trans('common.Weekend & Holiday') }}</a>
                <a class="nav-link tab-pills bg-gradient" href="#">{{ _trans('common.Contract') }}</a>
            </nav>
        </div>
        <div class="card-body">
            @include('backend.user.employee.form.personal-step', ['user' => $data['user']])
            @include('backend.user.employee.form.official-step', ['user' => $data['user']])
            @include('backend.user.employee.form.weekend-holiday-step', ['user' => $data['user']])
            @include('backend.user.employee.form.contract-step', ['user' => $data['user']])
        </div>
        <div class="card-footer text-end">
            <div class="d-flex bg-light p-2">
                <button type="button" id="back_button" class="button btn btn-secondary bg-gradient border-0" onclick="back()">{{ _trans('common.Previous') }}</button>
                <button type="button" id="next_button" class="button btn btn-primary bg-gradient border-0 ms-auto">{{ _trans('common.Next') }}</button>
            </div>
        </div>
    </form>
    <input type="hidden" id="get_attendance_method_data" value="{{ route('user.getAttendanceMethod') }}">
    <input type="hidden" id="contract_update_url" value="{{ route('hrm.payroll_setup.user_setup_update', [$data['user']->id, 'contract']) }}">
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('#SelectionDiv').hide();

            $('input[name="password_type"]').on('change', function() {
                if ($(this).val() === 'custom') {
                    $('#SelectionDiv').show();
                } else {
                    $('#SelectionDiv').hide();
                }
            });
        });

        var current = 0;
        var tabs = $(".tab");
        var tabs_pill = $(".tab-pills");

        loadFormData(current);

        function loadFormData(n) {
            tabs_pill.removeClass("active");
            tabs.addClass("d-none");

            $(tabs_pill[n]).addClass("active");
            $(tabs[n]).removeClass("d-none");

            $("#back_button").attr("disabled", n == 0);
        if (n == tabs.length - 1) {
                $("#next_button")
                    .text("Submit")
                    .removeAttr("onclick")
            .attr("onclick", "saveAndSubmit()");
            } else {
                $("#next_button")
                    .text("Next")
                    .attr("type", "button")
                    .attr("onclick", "next()");
            }
        }

        function next() {
            if (current < tabs.length - 1) {
                current++;
                loadFormData(current);
            }
        }

        function back() {
            if (current > 0) {
                current--;
                loadFormData(current);
            }
        }

    // (se elimina función submit vacía; la definición real está más abajo)

        $(".tab-pills").on("click", function () {
            var index = $(this).index();
            current = index;
            loadFormData(current);
        });

        // Final submit: first update contract via existing route, then submit main form
    // Helper seguro para mostrar alertas sin depender de Swal
    function safeAlert(message, type = 'error') {
        if (window.Swal && typeof Swal.fire === 'function') {
            Swal.fire({ title: message, icon: type, timer: 3500 });
        } else {
            alert(message);
        }
    }

    async function saveAndSubmit() {
            try {
                const contractUrl = document.getElementById('contract_update_url')?.value;
                const form = document.querySelector('form.card.ot-card');
                const token = form.querySelector('input[name="_token"]').value;

                // Build FormData for contract payload only (match existing controller expectations)
                const fields = [
                    'contract_start_date',
                    'contract_end_date',
                    'basic_salary',
                    'payslip_type',
                    'late_check_in',
                    'early_check_out',
                    'extra_leave',
                    'monthly_leave',
                ];

                if (contractUrl) {
                    const fd = new FormData();
                    fd.append('_token', token);
                    fd.append('user_id', '{{ $data['user']->id }}');
                    fields.forEach((name) => {
                        const el = form.querySelector(`[name="${name}"]`);
                        if (el) fd.append(name, el.value ?? '');
                    });

                    // Prefer fetch to avoid full page redirect on AJAX response
                    const res = await fetch(contractUrl, {
                        method: 'POST',
                        headers: { 
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': token,
                            'Accept': 'application/json'
                        },
                        body: fd,
                        credentials: 'same-origin',
                    }).catch(() => null);

                    // Validar respuesta: debe ser JSON y result=true
                    let ok = false; let errorMsg = '';
                    if (!res) {
                        errorMsg = '{{ _trans('response.Something went wrong!') }}';
                    } else {
                        const ct = res.headers.get('content-type') || '';
                        if (ct.includes('application/json')) {
                            try {
                                const data = await res.json();
                                ok = !!(data && (data.result === true || data.success === true));
                                if (!ok) errorMsg = data?.message || '{{ _trans('response.Something went wrong!') }}';
                            } catch (_) {
                                errorMsg = '{{ _trans('response.Something went wrong!') }}';
                            }
                        } else {
                            // Probable redirección a login o HTML: tratar como fallo
                            errorMsg = '{{ _trans('response.Something went wrong!') }}';
                        }
                    }
                    if (!ok) {
                        safeAlert(errorMsg, 'error');
                        return; // Detener el submit principal si el contrato no se guardó
                    }
                }

                // Then submit the main employee update form
                form.submit();
            } catch (e) {
                // As fallback, submit main form even if contract call failed
                document.querySelector('form.card.ot-card').submit();
            }
        }
    </script>
@endsection