@if(session()->has('errors_messages') || session()->has('success_messages'))
    <!-- Modal Trigger (automatically triggered with JS) -->
    <button type="button" id="messageModalBtn" class="d-none" data-bs-toggle="modal" data-bs-target="#messageModal"></button>

    <!-- Bootstrap Modal -->
    <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-3">

                    <div class="text-center mb-3">
                        <i class="bi bi-info-circle text-info" style="font-size:3rem;"></i>
                    </div>

                    @if(session()->has('errors_messages'))
                        @foreach(session('errors_messages') as $error)
                            <div class="d-flex align-items-start mb-2">
                                <i class="bi bi-x-circle-fill text-danger me-2"></i>
                                <span>{{ $error }}</span>
                            </div>
                        @endforeach
                    @endif

                    @if(session()->has('success_messages'))
                        @foreach(session('success_messages') as $message)
                            <div class="d-flex align-items-start  mb-2">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                <span>{{ $message }}</span>
                            </div>
                        @endforeach
                    @endif

                                        <!-- Close Button at Bottom Center -->
                    <div class="mt-5 text-center">
                        <button type="button" class="btn btn-outline-secondary btn-light px-5 py-2" data-bs-dismiss="modal">
                            {{ __('lang.close') }}
                        </button>
                    </div>

                </div>

            </div>
        </div>
    </div>
@endif

@push('js')

@if(session()->has('errors_messages') || session()->has('success_messages'))
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('messageModalBtn').click();
        });
    </script>
@endif

@endpush