@props([
    'id',
    'title' => 'Confirm Action',
    'message' => 'Are you sure you want to proceed? This action cannot be undone.',
    'actionUrl' => '#',
    'method' => 'DELETE',
    'buttonText' => 'Confirm',
    'buttonColor' => 'red',
])

@php
    $colorClass = match($buttonColor) {
        'green' => 'btn-green',
        'blue' => 'btn-blue',
        'orange' => 'btn-orange',
        default => 'btn-red',
    };
@endphp

<div class="modal-overlay" id="{{ $id }}" role="dialog" aria-modal="true" aria-labelledby="{{ $id }}-title" style="display:none;">
    <div class="modal-backdrop" onclick="closeModal('{{ $id }}')"></div>
    <div class="modal-dialog modal-dialog-sm">
        <div class="modal-content">
            <div class="modal-header modal-header-danger">
                <div class="modal-header-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="12" fill="#FEE2E2"/><path d="M12 8v5M12 15h.01" stroke="#DC2626" stroke-width="2" stroke-linecap="round"/></svg>
                </div>
                <h3 class="modal-title" id="{{ $id }}-title">{{ $title }}</h3>
                <button class="modal-close" onclick="closeModal('{{ $id }}')" aria-label="Close">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                </button>
            </div>

            <div class="modal-body">
                <p class="confirm-modal-message">{{ $message }}</p>
            </div>

            <div class="modal-footer modal-footer-between">
                <button type="button" class="btn btn-outline" onclick="closeModal('{{ $id }}')">Cancel</button>
                <form action="{{ $actionUrl }}" method="POST" class="inline">
                    @csrf
                    @method($method)
                    <button type="submit" class="btn {{ $colorClass }}">{{ $buttonText }}</button>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function openConfirmModal(id) { openModal(id); }
function closeConfirmModal(id) { closeModal(id); }
</script>
@endpush