@php
    $id = $id ?? 'modal_id';
    $title = $title ?? 'Modal miss title';
    $footerOK = $footerOK ?? 'OK';
    $minWidth = $minWidth ?? '50rem';
@endphp
<!-- Main modal -->
<div id="{{ $id }}" class="modal">
    {{-- middle on screen --}}
    <div class="flex justify-center items-center p-4 h-full">
        <!-- Modal content -->
        <div class="bg-white rounded-lg shadow" style="min-width: {{$minWidth}}">
            <!-- Modal header -->
            <div class="modal_header flex items-center justify-between p-4 md:p-5 border-b rounded-t">
                <h3 class="modal_title text-xl font-semibold text-gray-900">
                    {{ $title }}
                </h3>
                <button type="button"
                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
                    onclick="$MODAL_HIDE('{{ $id }}')">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="modal_body overflow-y-auto">
                {{ $slot }}
            </div>
        </div>
    </div>
</div>

@push('style')
    <style>
        body.{{ $id }} {
            overflow: hidden;
        }
        body.{{ $id }} #{{ $id }} {
            opacity: 1;
            visibility: visible;
            transition: visibility 0s linear 0s, opacity 0.5s ease-in-out;
        }
    </style>
@endpush

@push('script')
    <script>
        window.$MODAL_SHOW = function(id) {
            if (!$('body').hasClass(id)) {
                $('body').addClass(id)
            }
        }

        window.$MODAL_HIDE = function(id) {
            if ($('body').hasClass(id)) {
                $('body').removeClass(id)
            }
        }
    </script>
@endpush
