@php
    $trainingId = (int)($trainingId ?? 0);
    $modalId = $modalId ?? ('TrainingStepEditModal_'.$trainingId);
    $lockParticipantsManage = (bool) ($lockParticipantsManage ?? false);
    $participantsLockReason = trim((string) ($participantsLockReason ?? ''));
    if ($participantsLockReason === '') {
        $participantsLockReason = 'Dodawanie uczestnikow jest aktualnie zablokowane.';
    }
    $training = null;
    $testRecord = null;

    if ($trainingId > 0) {
        $training = DB::table('t051_szkolenia')->where('id', $trainingId)->first();

        if (\Illuminate\Support\Facades\Schema::hasTable('t057_testy')) {
            $testRecord = DB::table('t057_testy')
                ->where('id_szkolenie', $trainingId)
                ->orderBy('id', 'asc')
                ->first();
        }
    }

    $stepSaveRoute = \Illuminate\Support\Facades\Route::has('m_szkol_proces_szkolenia_form_step_save')
        ? route('m_szkol_proces_szkolenia_form_step_save')
        : (\Illuminate\Support\Facades\Route::has('m_odo_proces_szkolenia_form_step_save') ? route('m_odo_proces_szkolenia_form_step_save') : '#');

    $materialsUrl = url('/szkolenia/admin/trainings/'.$trainingId);
    $testUrl = !empty($testRecord)
        ? url('/szkolenia/admin/tests/'.$testRecord->id.'/edit')
        : url('/szkolenia/admin/tests/create/'.$trainingId);

    $forma0Checked = (int)($training->forma_szkolenia ?? -1) === 0;
    $forma1Checked = (int)($training->forma_szkolenia ?? -1) === 1;
@endphp

@if($training)
<div class="modal fade wizard-step-edit-modal" id="{{ $modalId }}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog my_modal_alert" role="document" style="max-width: 760px;">
        <div class="alert-primary" style="border-radius: 15px; pointer-events: auto; width: 760px;">
            <form method="POST" action="{{ $stepSaveRoute }}" id="{{ $modalId }}_form">
                @csrf
                <input type="hidden" name="id" value="{{ $trainingId }}">
                <input type="hidden" name="user_id" value="{{ Auth::id() }}">
                <input type="hidden" name="step_number" value="1" data-role="step-number">

                <div class="modal-header card-header" style="border-radius: 15px 15px 0 0;">
                    <div style="margin-right: 1vw;">
                        <i class="fa fa-tasks fa-2x"></i>
                    </div>
                    <div class="my-auto ml-1">
                        Edycja kroku stepera:
                        <strong data-role="step-title">Krok 1</strong>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body text-lg-center wizard-step-edit-body" style="max-height: 70vh; overflow-y: auto; overflow-x: visible;">
                    {{-- Krok 1: Forma + miejsce --}}
                    <div class="step-edit-section" data-step="1">
                        <div class="form-group form-inline" style="align-items: flex-start;">
                            <label class="my_FormLabelCheckbox col-md-4">Forma szkolenia:</label>
                            <div class="form-check form-check-inline my_GroupCheckBoxes2">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input wizard-forma-choice" type="checkbox" id="{{ $modalId }}_forma_1" value="forma_0" name="checkbox_FormaSzkolenia[]" {{ $forma0Checked ? 'checked' : '' }}>
                                    <label class="form-check-label" for="{{ $modalId }}_forma_1">e-Learning</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input wizard-forma-choice" type="checkbox" id="{{ $modalId }}_forma_2" value="forma_1" name="checkbox_FormaSzkolenia[]" {{ $forma1Checked ? 'checked' : '' }}>
                                    <label class="form-check-label" for="{{ $modalId }}_forma_2">Stacjonarne</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label col-form-label-sm text-md-right">Miejsce szkolenia:</label>
                            <div class="col-md-7">
                                <div class="d-flex align-items-center">
                                    <input type="text" class="form-control wizard-miejsce-input" name="miejsce_szkolenia" value="{{ $training->miejsce_szkolenia ?? '' }}" placeholder="Miejsce szkolenia">
                                    <input type="hidden" class="wizard-miejsce-hidden" value="">
                                    <div class="form-check ml-2 mb-0" style="white-space: nowrap;">
                                        <input class="form-check-input mt-1 wizard-internal-place-toggle" type="checkbox" id="{{ $modalId }}_miejsce_wewnetrzne">
                                        <label class="form-check-label" for="{{ $modalId }}_miejsce_wewnetrzne">Szkolenie Wewn&#281;trzne</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Krok 2: Temat + cel --}}
                    <div class="step-edit-section d-none" data-step="2">
                        <div class="form-group row">
                            <label class="col-md-4 col-form-label col-form-label-sm text-md-right">Temat szkolenia:</label>
                            <div class="col-md-6">
                                <textarea name="temat_szkolenia" class="form-control" rows="2" style="resize: none;">{{ $training->temat ?? '' }}</textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-4 col-form-label col-form-label-sm text-md-right">Cel szkolenia:</label>
                            <div class="col-md-6">
                                <textarea name="cel_szkolenia_opis" class="form-control" rows="3" style="resize: none;">{{ $training->cel_szkolenia_opis ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>

                    {{-- Krok 3: Harmonogram --}}
                    <div class="step-edit-section d-none" data-step="3">
                        <div class="form-group row" style="display: flex;">
                            <label class="col-md-4 col-form-label col-form-label-sm text-md-right">Data rozpoczęcia szkolenia:</label>
                            <div class="col-md-3 row" style="margin-left: unset;">
                                <input class="form-control form-control-sm datepicker wizard-step-datepicker" type="text" name="data_szkolenia" value="{{ !empty($training->data) ? date('Y-m-d', strtotime($training->data)) : '' }}" style="width: 90px; z-index: 1;">
                                <div class="input-group-append">
                                    <span class="input-group-text end_date_calendar" aria-hidden="true"><i class="far fa-calendar-alt"></i></span>
                                </div>
                            </div>
                            <label class="col-md-1 col-form-label col-form-label-sm text-md-right">Godzina:</label>
                            <div class="col-md-2">
                                <input type="time" class="form-control" name="godzina_start" value="{{ !empty($training->godzina_start) ? substr((string)$training->godzina_start, 0, 5) : '08:00' }}">
                            </div>
                        </div>
                        <div class="form-group row" style="display: flex;">
                            <label class="col-md-4 col-form-label col-form-label-sm text-md-right">Data zakończenia szkolenia:</label>
                            <div class="col-md-3 row" style="margin-left: unset;">
                                <input class="form-control form-control-sm datepicker wizard-step-datepicker" type="text" name="data_do" value="{{ !empty($training->data_do) ? date('Y-m-d', strtotime($training->data_do)) : '' }}" style="width: 90px; z-index: 1;">
                                <div class="input-group-append">
                                    <span class="input-group-text end_date_calendar" aria-hidden="true"><i class="far fa-calendar-alt"></i></span>
                                </div>
                            </div>
                            <label class="col-md-1 col-form-label col-form-label-sm text-md-right">Godzina:</label>
                            <div class="col-md-2">
                                <input type="time" class="form-control" name="godzina_stop" value="{{ !empty($training->godzina_stop) ? substr((string)$training->godzina_stop, 0, 5) : '16:00' }}">
                            </div>
                        </div>
                    </div>

                    {{-- Krok 4: Materiały --}}
                    <div class="step-edit-section d-none" data-step="4">
                        <div class="alert alert-info mb-0 text-left">
                            Ten krok realizujesz przez dodanie materiałów szkoleniowych.
                            <div class="mt-2">
                                <a href="{{ $materialsUrl }}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-folder-open mr-1"></i>Przejdź do materiałów
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- Krok 5: Test --}}
                    <div class="step-edit-section d-none" data-step="5">
                        <div class="alert alert-info mb-0 text-left">
                            Ten krok realizujesz przez skonfigurowanie aktywnego testu.
                            <div class="mt-2">
                                <a href="{{ $testUrl }}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-vial mr-1"></i>Przejdź do testu
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- Krok 6: Uczestnicy --}}
                    <div class="step-edit-section d-none" data-step="6">
                        <div class="alert alert-info mb-0 text-left">
                            Ten krok realizujesz przez dodanie uczestnikow do szkolenia.
                            <div class="mt-2">
                                @if($lockParticipantsManage)
                                    <button type="button" class="btn btn-sm btn-outline-secondary" title="{{ $participantsLockReason }}" disabled>
                                        <i class="fas fa-users mr-1"></i>Dodaj uczestnikow
                                    </button>
                                @else
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="openModalForm('ModalForm_add_to_training_multi')">
                                        <i class="fas fa-users mr-1"></i>Dodaj uczestnikow
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer" style="justify-content: center !important;">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Anuluj</button>
                    <button type="submit" class="btn btn-primary" data-role="step-save-btn">Zapisz</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@once
    <style>
        /* Ten modal musi być zawsze nad backdropem i nad lokalnymi warstwami widoku. */
        .wizard-step-edit-modal {
            z-index: 20000 !important;
        }
        .modal-backdrop.wizard-step-edit-backdrop {
            z-index: 19990 !important;
        }
        /* Picker czasu i kalendarz musza być nad modalem kroku stepera. */
        .clockpicker-popover,
        .popover.clockpicker-popover,
        .bootstrap-datetimepicker-widget,
        .ui-timepicker-container,
        .ui-datepicker {
            z-index: 21050 !important;
        }
        /* Nie przycinaj rozwijanych widgetow w body modala. */
        .wizard-step-edit-body {
            overflow: visible !important;
        }
    </style>
@endonce

@once
    @push('scripts')
        <script>
            function normalizeWizardPlaceValue(v) {
                return (v || '')
                    .toString()
                    .trim()
                    .toLowerCase()
                    .replace(/[\u0105\u0107\u0119\u0142\u0144\u00f3\u015b\u017a\u017c]/g, function (m) {
                        return {
                            '\u0105': 'a',
                            '\u0107': 'c',
                            '\u0119': 'e',
                            '\u0142': 'l',
                            '\u0144': 'n',
                            '\u00f3': 'o',
                            '\u015b': 's',
                            '\u017a': 'z',
                            '\u017c': 'z'
                        }[m] || m;
                    });
            }

            function syncWizardInternalPlace($scope, useInitialDetection) {
                var INTERNAL_PLACE_VALUE = 'Szkolenie Wewn\u0119trzne';
                var $input = $scope.find('.wizard-miejsce-input');
                var $hidden = $scope.find('.wizard-miejsce-hidden');
                var $toggle = $scope.find('.wizard-internal-place-toggle');

                if (!$input.length || !$hidden.length || !$toggle.length) {
                    return;
                }

                if (useInitialDetection === true) {
                    $toggle.prop('checked', normalizeWizardPlaceValue($input.val()) === 'szkolenie wewnętrzne');
                }

                if ($toggle.is(':checked')) {
                    $input.val(INTERNAL_PLACE_VALUE).prop('disabled', true).removeAttr('name');
                    $hidden.attr('name', 'miejsce_szkolenia').val(INTERNAL_PLACE_VALUE);
                } else {
                    $input.prop('disabled', false).attr('name', 'miejsce_szkolenia');
                    $hidden.removeAttr('name').val('');
                    if (useInitialDetection !== true) {
                        $input.val('');
                    }
                }
            }

            function openTrainingStepEditModal(trainingId, stepNo) {
                var modalId = '#TrainingStepEditModal_' + String(trainingId || '');
                var $modal = window.jQuery(modalId);
                if (!$modal.length) {
                    return;
                }

                // Przeniesienie do body eliminuje konflikty stacking-context (z-index pod spodem).
                if (!$modal.parent().is('body')) {
                    $modal.appendTo('body');
                }

                var labels = {
                    1: 'Krok 1 - Forma i miejsce',
                    2: 'Krok 2 - Temat i cel',
                    3: 'Krok 3 - Harmonogram',
                    4: 'Krok 4 - Materiały',
                    5: 'Krok 5 - Test',
                    6: 'Krok 6 - Uczestnicy'
                };

                var step = parseInt(stepNo, 10) || 1;
                $modal.find('[data-role=\"step-number\"]').val(step);
                $modal.find('[data-role=\"step-title\"]').text(labels[step] || ('Krok ' + step));

                $modal.find('.step-edit-section').addClass('d-none');
                $modal.find('.step-edit-section[data-step=\"' + step + '\"]').removeClass('d-none');
                syncWizardInternalPlace($modal.find('.step-edit-section[data-step=\"1\"]'), true);

                var editableStep = step >= 1 && step <= 3;
                $modal.find('[data-role=\"step-save-btn\"]').toggle(editableStep);

                var $datepickers = $modal.find('.wizard-step-datepicker');
                if (window.jQuery.fn.datepicker) {
                    $datepickers.each(function () {
                        var $el = window.jQuery(this);
                        if (!$el.data('datepicker')) {
                            $el.datepicker({
                                language: 'pl',
                                format: 'yyyy-mm-dd',
                                autoclose: true
                            });
                        }
                    });
                }

                // Oznaczamy ostatni backdrop specjalna klasa z nizszym z-index od modala.
                $modal.off('shown.bs.modal.wizardStepZ').on('shown.bs.modal.wizardStepZ', function () {
                    window.jQuery('.modal-backdrop').last().addClass('wizard-step-edit-backdrop');
                });

                $modal.modal('show');
            }

            window.jQuery(document).on('change', '.wizard-forma-choice', function () {
                var $group = window.jQuery(this).closest('.form-check, .my_GroupCheckBoxes2, .step-edit-section');
                window.jQuery(this).closest('.step-edit-section').find('.wizard-forma-choice').not(this).prop('checked', false);
            });

            window.jQuery(document).on('change', '.wizard-internal-place-toggle', function () {
                syncWizardInternalPlace(window.jQuery(this).closest('.step-edit-section'), false);
            });
        </script>
    @endpush
@endonce