@php
    $content = $data['content'] ?? [];
    $height = $content['height'] ?? '600px';
    $autoplay = $content['autoplay'] ?? true;
    $autoplayDelay = $content['autoplay_delay'] ?? 5000;
    $showNavigation = $content['show_navigation'] ?? true;
    $showDots = $content['show_dots'] ?? true;
    $slides = $content['slides'] ?? [];
    $sliderId = 'slider-' . uniqid();
@endphp

@if(!empty($slides))
<div id="{{ $sliderId }}" class="carousel slide" data-bs-ride="{{ $autoplay ? 'carousel' : 'false' }}" data-bs-interval="{{ $autoplayDelay }}" style="height: {{ $height }}">
    @if($showDots)
    <div class="carousel-indicators">
        @foreach($slides as $index => $slide)
        <button type="button" data-bs-target="#{{ $sliderId }}" data-bs-slide-to="{{ $index }}" class="{{ $index === 0 ? 'active' : '' }}" aria-current="{{ $index === 0 ? 'true' : 'false' }}" aria-label="Slide {{ $index + 1 }}"></button>
        @endforeach
    </div>
    @endif

    <div class="carousel-inner h-100">
        @foreach($slides as $index => $slide)
        <div class="carousel-item {{ $index === 0 ? 'active' : '' }} h-100">
            <img src="{{ $slide['image'] ?? 'https://via.placeholder.com/1200x600' }}" class="d-block w-100 h-100" style="object-fit: cover;" alt="{{ $slide['title'] ?? 'Slide ' . ($index + 1) }}">

            @if(isset($slide['title']) || isset($slide['description']) || isset($slide['button_text']))
            <div class="carousel-caption d-flex flex-column justify-content-center align-items-center h-100">
                <div class="text-center" style="max-width: 800px;">
                    @if(isset($slide['title']))
                    <h1 class="display-3 fw-bold text-white mb-4">{{ $slide['title'] }}</h1>
                    @endif

                    @if(isset($slide['description']))
                    <p class="lead text-white mb-4">{{ $slide['description'] }}</p>
                    @endif

                    @if(isset($slide['button_text']) && isset($slide['button_url']))
                    <a href="{{ $slide['button_url'] }}" class="btn btn-primary btn-lg">{{ $slide['button_text'] }}</a>
                    @endif
                </div>
            </div>
            @endif
        </div>
        @endforeach
    </div>

    @if($showNavigation)
    <button class="carousel-control-prev" type="button" data-bs-target="#{{ $sliderId }}" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#{{ $sliderId }}" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
    @endif
</div>
@endif