@props([
    'id' => 'genericModal',
    'title' => 'Modal Title',
    'size' => '',
    'footer' => null,
    'scrollable' => true,
    'submitRoute' => null,
    'confirmmText' => null,
    'position' => 'modal-dialog-centered',
    'footerClass' => 'justify-content-end gap-2',
    'headerClass' => '',
    'bodyClass' => '',
    'aria-labelledby' => null,
])

{{-- Modal Component --}}
<div class="modal fade" id="{{ $id ?? 'genericModal' }}" aria-labelledby="{{ $id ?? 'genericModal' }}Label" tabindex="-1"
    role="dialog" aria-hidden="true">
    <div class="modal-dialog {{ $size ?? '' }} {{ $position }} {{ $scrollable ? 'modal-dialog-scrollable' : '' }}"
        role="document">
        <div class="modal-content">
            <div class="modal-header {{ $headerClass ?? '' }}">
                <h5 class="modal-title">{{ $title ?? 'Modal Title' }}</h5>
                <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            @if (!empty(trim($slot)))
                <div class="modal-body {{ $bodyClass ?? '' }}">
                    {{ $slot }}
                </div>
            @endif
            <div class="modal-footer d-flex {{ $footerClass ?? '' }}">
                @if ($footer)
                    {!! $footer !!}
                @else
                    <button type="button" class="btn-custom-secondary" data-dismiss="modal">رجوع</button>
                    @if ($submitRoute)
                        <a href="{{ route($submitRoute) }}"
                            class="btn-custom-logout">{{ $confirmmText ?? 'تأكيد' }}</a>
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>