{{-- Global Modal Window - CHANGE STATUS Record --}}

@php
    $header_icon = $header_icon ?? 'fas fa-exclamation-circle';
    $body_icon = $body_icon ?? 'fa fa-sync-alt';
    $modal_title_status = $modal_title_status ?? 'Zmiana statusu rekordu';
    $route_address_status = $route_address_status ?? ($route_address ?? null);
    $click_event_name = $click_event_name ?? '.open_modal_status';
    $status_submit_class = $status_submit_class ?? 'btn-warning';
    $status_submit_text = $status_submit_text ?? 'Zmień status';
    $status_show_record_id = $status_show_record_id ?? true;
    $status_modal_width = $status_modal_width ?? 780;
    $status_confirm_prefix = $status_confirm_prefix ?? 'Status zostanie zmieniony na:';
    $status_confirm_question = $status_confirm_question ?? 'Czy na pewno chcesz wykonać operację zmiany statusu?';
    $form_id = $form_id ?? 'form_status';
@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,
    #{{ $modal_id }} .my_p_info {
        font-size: 1.1rem !important;
        line-height: 1 !important;
        border-radius: .4rem !important;
    }

    @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 }} .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;
    }

    #{{ $modal_id }} #modal_status_text_status {
        border: 1px solid rgba(0,0,0,.3);
        border-radius: .35rem;
        background: #fff;
        display: inline-block;
        min-width: 16rem;
        padding: .3rem .8rem;
        font-size: 1.9rem;
        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_modal_width }}px;">
        <div class="alert-warning" style="border-radius: 15px; pointer-events: auto; width: {{ $status_modal_width }}px;">
            <form id="{{ $form_id }}" method="post" action="{{ $route_address_status ? route($route_address_status) : '#' }}">
                @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 }}
                    </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_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')) !== '')
                            @yield('form_body_status')
                        @else
                            @yield('form_body')
                        @endif
                    </div>

                    <hr class="my-2"/>
                    <div class="status-confirm-label">{{ $status_confirm_prefix }}</div>
                    <div id="modal_status_text_status" class="font-weight-bold text-uppercase my-2">---</div>
                    @if(!empty($status_confirm_question))
                        <div class="status-confirm-question">{{ $status_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_submit_class }}">{{ $status_submit_text }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    var click_event_name = null;
    var modal_id = null;

    (function () {
        var local_click_event_name = click_event_name;
        var local_modal_id = modal_id;

        function syncStatusFieldsHeight() {
            var $modal = $('#' + local_modal_id);
            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, .my_p_info')
                    .css('min-height', labelHeight + 'px');
            });
        }

        function syncStatusRecordId(id) {
            var $modal = $('#' + local_modal_id);
            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, function () {
            $('#' + local_modal_id).modal('show');
            syncStatusRecordId($(this).val());
            setTimeout(syncStatusFieldsHeight, 0);
            setTimeout(syncStatusFieldsHeight, 150);
        });

        $(document).on('shown.bs.modal', '#' + local_modal_id, function () {
            syncStatusRecordId();
            syncStatusFieldsHeight();
        });

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

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