{{--
  Confirm Modal - Modal xác nhận hành động
  Usage:
    <x-modals.confirm-modal
        id="deleteConfirmModal"
        title="Xác nhận xóa"
        message="Bạn có chắc chắn muốn xóa mục này? Hành động này không thể hoàn tác."
        level="warning"
        confirm-label="Xóa"
        confirm-url="/api/delete/123"
        confirm-method="DELETE"
    />

    Hoặc với form:
    <x-modals.confirm-modal
        id="bulkDeleteModal"
        title="Xác nhận xóa hàng loạt"
        message="Bạn có chắc muốn xóa các mục đã chọn?"
        level="error"
        confirm-label="Xóa"
        form-id="bulkDeleteForm"
    />
--}}
@props([
    'id' => 'confirmModal',
    'title' => 'Xác nhận',
    'message' => '',
    'level' => 'warning', // info, success, warning, error
    'confirmLabel' => 'Xác nhận',
    'cancelLabel' => 'Hủy',
    'formId' => null, // Nếu có formId, modal sẽ submit form
    'confirmUrl' => null, // Nếu có confirmUrl, modal sẽ gọi AJAX
    'confirmMethod' => 'POST',
    'onConfirm' => null, // JS function name to call on confirm
])

@php
$iconClass = match($level) {
    'success' => 'modal-icon success',
    'warning' => 'modal-icon warning',
    'error' => 'modal-icon error',
    default => 'modal-icon info',
};

$iconSymbol = match($level) {
    'success' => '✓',
    'warning' => '⚠',
    'error' => '✕',
    default => 'ℹ',
};

$confirmBtnClass = match($level) {
    'error' => 'btn btn-danger',
    'warning' => 'btn btn-warning',
    default => 'btn btn-primary',
};
@endphp

<div id="{{ $id }}" class="modal-overlay" data-modal x-data="modal('{{ $id }}')" x-show="open" x-cloak style="display:none;">
    <div class="modal compact" @click.outside="hide()">
        <div class="modal-header with-icon">
            <h3>
                <span class="{{ $iconClass }}">{{ $iconSymbol }}</span>
                {{ $title }}
            </h3>
            <button type="button" class="modal-close" @click="hide()" aria-label="Đóng">×</button>
        </div>
        <div class="modal-body">
            @if($message)
                <p class="text-gray-600">{{ $message }}</p>
            @else
                {{ $slot }}
            @endif
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-ghost" @click="hide()">{{ $cancelLabel }}</button>

            @if($formId)
                {{-- Submit form --}}
                <button type="submit" form="{{ $formId }}" class="{{ $confirmBtnClass }}">
                    {{ $confirmLabel }}
                </button>
            @elseif($confirmUrl)
                {{-- AJAX call --}}
                <button type="button"
                        class="{{ $confirmBtnClass }}"
                        data-confirm-url="{{ $confirmUrl }}"
                        data-confirm-method="{{ $confirmMethod }}"
                        @click="window.handleConfirmAction($el); hide()">
                    {{ $confirmLabel }}
                </button>
            @else
                {{-- JS callback sẽ được xử lý bởi người dùng --}}
                <button type="button"
                        id="{{ $id }}_confirmBtn"
                        class="{{ $confirmBtnClass }}"
                        @if($onConfirm) @click="{{ $onConfirm }}(); hide();" @else @click="hide()" @endif>
                    {{ $confirmLabel }}
                </button>
            @endif
        </div>
    </div>
</div>
