{{-- Global Modal Window - CHANGE STATUS Record (Type 2) --}}

@php
    $header_icon = $header_icon ?? 'fas fa-share-square';
    $modal_title_status_2 = $modal_title_status_2 ?? 'Potwierdzenie operacji';
    $route_address_status_2 = $route_address_status_2 ?? ($route_address_status ?? ($route_address ?? null));
    $click_event_name_status_2 = $click_event_name_status_2 ?? ($click_event_name ?? '.open_modal_status_2');
    $status_2_submit_class = $status_2_submit_class ?? 'btn-primary';
    $status_2_submit_text = $status_2_submit_text ?? 'Potwierdz';
    $status_2_show_record_id = $status_2_show_record_id ?? true;
    $status_2_modal_width = $status_2_modal_width ?? 760;
    $status_2_confirm_prefix = $status_2_confirm_prefix ?? 'Potwierdzenie operacji:';
    $status_2_confirm_question = $status_2_confirm_question ?? null;
    $status_2_text_id = $status_2_text_id ?? 'modal_status_text_status';
    $form_id = $form_id ?? 'form_status_2';
@endphp

<style>
    #{{ $modal_id }} .col-form-label {
        font-size: 1rem !important;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
    }

    #{{ $modal_id }} input.form-control,
    #{{ $modal_id }} textarea.form-control,
    #{{ $modal_id }} select.form-control {
        font-size: 1.1rem !important;
        line-height: 1 !important;
        border-radius: .4rem !important;
    }

    #{{ $modal_id }} .table_modal_status {
        background: #e6edf5;
        border: 1px solid #d1dbe7;
        border-radius: .45rem;
        padding: .8rem .85rem .5rem .85rem;
    }

    #{{ $modal_id }} .table_modal_status .form-group.row {
        margin-bottom: .35rem;
    }

    #{{ $modal_id }} .my_p_info {
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
        color: #2a3f58;
        text-align: left !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #b9c7d8 !important;
        border-radius: 0 !important;
        width: 100%;
        margin: 0;
        padding: .4rem .15rem .35rem .2rem;
        min-height: 2.2rem;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    @media (min-width: 768px) {
        #{{ $modal_id }} .form-group > .col-md-6 {
            -ms-flex: 0 0 60%;
            flex: 0 0 60%;
            max-width: 60%;
        }
    }

    #{{ $modal_id }} .alert-primary {
        background: linear-gradient(180deg, #f3f9ff 0%, #e8f2ff 100%);
        border-color: #b8d4f5;
    }

    #{{ $modal_id }} .modal-header.card-header {
        background: linear-gradient(180deg, #4d98ef 0%, #3f86df 100%);
        color: #ffffff;
        border-bottom: 1px solid #2d73c9;
    }

    #{{ $modal_id }} .modal-header .close,
    #{{ $modal_id }} .modal-header .close span {
        color: #ffffff;
        opacity: .95;
    }

    #{{ $modal_id }} .status-modal-title {
        font-size: 1.12rem;
    }

    #{{ $modal_id }} .status-record-id-wrap {
        margin: .35rem 0 .2rem 0;
        font-style: italic;
    }

    #{{ $modal_id }} .status-record-id {
        display: inline-block;
        min-width: 3rem;
        border: 1px solid rgba(0,0,0,.15);
        background: #fff;
        border-radius: .35rem;
        padding: .1rem .4rem;
        text-align: center;
        font-style: italic;
        font-weight: 700;
    }

    #{{ $modal_id }} .status-confirm-label {
        margin-top: .35rem;
        font-size: 1.1rem;
        color: #2a4f7d;
    }

    #{{ $modal_id }} #{{ $status_2_text_id }} {
        border: 1px solid #99bee9;
        border-radius: .35rem;
        background: #fff;
        color: #2a5f96;
        display: inline-block;
        min-width: 16rem;
        padding: .3rem .8rem;
        font-size: 1.2rem;
        line-height: 1.1;
        margin: .4rem 0;
    }

    #{{ $modal_id }} .status-confirm-question {
        margin-bottom: .1rem;
    }
</style>

<div class="modal fade show" id="{{ $modal_id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog my_modal_alert" role="document" style="max-width: {{ $status_2_modal_width }}px;">
        <div class="alert-primary" style="border-radius: 15px; pointer-events: auto; width: {{ $status_2_modal_width }}px;">
            <form id="{{ $form_id }}" method="post" action="{{ $route_address_status_2 ? route($route_address_status_2) : '#' }}">
                @csrf
                <div class="modal-header card-header" style="border-radius: 15px 15px 0 0;">
                    <div style="margin-right: 1vw;">
                        <i class="{{ $header_icon }} fa-2x"></i>
                    </div>
                    <div class="my-auto ml-1 status-modal-title">
                        {{ $modal_title_status_2 }}
                    </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" style="max-height: 70vh; overflow: overlay;">
                    <input name="return_to" type="hidden" value="{{ $return_to ?? null }}">
                    <input name="return_to_after_delete" type="hidden" value="{{ $return_to_after_delete ?? null }}">
                    <input name="modal_return_to" type="hidden" value="{{ $modal_return_to ?? null }}">
                    <input name="site_back" type="hidden" value="{{ $site_back ?? null }}">
                    <input id="status_rekord_id" name="rekord_id" type="hidden" value="{{ $rekord_id ?? null }}">

                    @if($status_2_show_record_id)
                        <div class="status-record-id-wrap">
                            Identyfikator rekordu:
                            <span class="status-record-id" id="status_rekord_id_view">{{ $rekord_id ?? '' }}</span>
                        </div>
                    @endif

                    <div class="table_modal_status">
                        @if(trim($__env->yieldContent('form_body_status_2')) !== '')
                            @yield('form_body_status_2')
                        @elseif(trim($__env->yieldContent('form_body_status')) !== '')
                            @yield('form_body_status')
                        @else
                            @yield('form_body')
                        @endif
                    </div>

                    {{--
                    <hr class="my-2"/>
                    <div class="status-confirm-label">{{ $status_2_confirm_prefix }}</div>
                    <div id="{{ $status_2_text_id }}" class="font-weight-bold text-uppercase my-2">---</div>
                    @if(!empty($status_2_confirm_question))
                        <div class="status-confirm-question">{{ $status_2_confirm_question }}</div>
                    @endif
                    --}}
                </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 {{ $status_2_submit_class }}">{{ $status_2_submit_text }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    (function () {
        var local_click_event_name_status_2 = null;
        var local_modal_id_status_2 = null;

        function syncStatus2FieldsHeight() {
            var $modal = $('#' + local_modal_id_status_2);
            if (!$modal.length) {
                return;
            }

            $modal.find('.form-group.row').each(function () {
                var $row = $(this);
                var $label = $row.find('label.col-form-label').first();
                if (!$label.length) {
                    return;
                }

                var labelHeight = $label.outerHeight();
                if (!labelHeight || labelHeight < 1) {
                    return;
                }

                $row.find('input.form-control, textarea.form-control, select.form-control')
                    .css('min-height', labelHeight + 'px');
            });
        }

        function syncStatus2RecordId(id) {
            var $modal = $('#' + local_modal_id_status_2);
            if (!$modal.length) {
                return;
            }

            var nextId = id;
            if (nextId === undefined || nextId === null || String(nextId).trim() === '') {
                nextId = $modal.find('#status_rekord_id').val();
            }

            if (nextId === undefined || nextId === null) {
                nextId = '';
            }

            nextId = String(nextId).trim();
            $modal.find('#status_rekord_id').val(nextId);
            $modal.find('#status_rekord_id_view').text(nextId);
        }

        $(document).on('click', local_click_event_name_status_2, function () {
            $('#' + local_modal_id_status_2).modal('show');
            syncStatus2RecordId($(this).val());
            setTimeout(syncStatus2FieldsHeight, 0);
            setTimeout(syncStatus2FieldsHeight, 150);
        });

        $(document).on('shown.bs.modal', '#' + local_modal_id_status_2, function () {
            syncStatus2RecordId();
            syncStatus2FieldsHeight();
        });

        $(window).on('resize', function () {
            syncStatus2FieldsHeight();
        });
    })();
</script>

@if(trim($__env->yieldContent('java_script_status_2')) !== '')
    @yield('java_script_status_2')
@elseif(trim($__env->yieldContent('java_script_status')) !== '')
    @yield('java_script_status')
@else
    @yield('java_script')
@endif