@php
    $modalId = $modalId ?? 'delete-service-modal';
@endphp

<x-ui.modal id="{{ $modalId }}" title="Delete Service" description="This service will no longer be available for future bookings." size="sm">
    <div class="flex gap-4 rounded-lg border border-red-100 bg-red-50 p-4">
        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white text-booklio-danger">
            <x-ui.icon name="alert-triangle" class="h-5 w-5" />
        </div>
        <div class="min-w-0">
            <p class="break-words text-sm font-extrabold text-booklio-dark">Delete {{ $service->name }}?</p>
            <p class="mt-1 text-sm leading-6 text-slate-600">Existing appointments will keep their historical service details, but this service will be hidden from new bookings after deletion.</p>
        </div>
    </div>

    <x-slot:footer>
        <x-ui.button variant="secondary" data-modal-close>Cancel</x-ui.button>
        <form method="POST" action="{{ route('admin.services.destroy', $service) }}">
            @csrf
            @method('DELETE')
            <x-ui.button variant="danger" type="submit">
                <x-ui.icon name="trash" class="h-4 w-4" />
                Delete Service
            </x-ui.button>
        </form>
    </x-slot:footer>
</x-ui.modal>