@if($showButton)
<button 
    type="button" 
    class="@if($buttonClass) {{ $buttonClass }} @else btn btn-danger position-relative rounded-pill px-4 py-2 fw-semibold @endif" 
    data-bs-toggle="modal" 
    data-bs-target="#{{ $modalId }}">
    @if($new)
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-white blink">NEW</span>
    @endif
    {{ $buttonText }}
</button>
@endif

<!-- Modal -->
<div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $modalId }}Label" aria-hidden="true" wire:ignore.self>
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h5 class="modal-title" id="{{ $modalId }}Label">{!! $processedData['title'] !!}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                <!-- Important Information -->
                @if(!empty($processedData['important_info']))
                <div class="alert alert-warning" role="alert">
                    <i class="bi bi-exclamation-circle"></i>
                    <strong>Important Information:</strong>
                    <div class="mt-2">
                        {!! $processedData['important_info'] !!}
                    </div>
                </div>
                @endif

                <!-- Section 1 -->
                @if(!empty($processedData['section_1']))
                <div class="content-section">
                    {!! $processedData['section_1'] !!}
                </div>
                @endif

                <!-- Section 2 -->
                @if(!empty($processedData['section_2']))
                <div class="content-section">
                    {!! $processedData['section_2'] !!}
                </div>
                @endif

                <!-- Section 3 -->
                @if(!empty($processedData['section_3']))
                <div class="content-section">
                    {!! $processedData['section_3'] !!}
                </div>
                @endif

                <!-- Section 4 -->
                @if(!empty($processedData['section_4']))
                <div class="content-section">
                    {!! $processedData['section_4'] !!}
                </div>
                @endif

                <!-- Section 5 -->
                @if(!empty($processedData['section_5']))
                <div class="content-section">
                    {!! $processedData['section_5'] !!}
                </div>
                @endif
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                @if($buttonLink)
                    @if($livewireMethod)
                        <button type="button"
                                class="btn btn-primary"
                                wire:click="{{ $livewireMethod }}"
                                wire:loading.attr="disabled"
                                wire:target="{{ $livewireMethod }}"
                                data-bs-dismiss="modal">

                            <span wire:loading.remove wire:target="{{ $livewireMethod }}">
                                {{ $modelButtonName ?? 'Proceed' }}
                            </span>
                            
                            <span wire:loading wire:target="{{ $livewireMethod }}">
                                <span class="spinner-border spinner-border-sm"></span>
                                Processing...
                            </span>

                        </button>

                    @else
                        <a href="{{ $buttonLink }}" class="btn btn-primary">
                            {{ $modelButtonName ?? 'Proceed' }}
                        </a>
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>