@extends('frontend.da.layouts.master')

@section('content')
    <section>
        <div class="banner-main">
            <!-- Carousel Wrapper -->
            <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
                <!-- Indicators -->
                <ul class="carousel-indicators" style="list-style:none !important">
                    @foreach ($slider as $key => $value)
                        <li data-bs-target="#carouselExample" data-bs-slide-to="{{ $key }}"
                            class="{{ $key == 0 ? 'active' : '' }}">
                        </li>
                    @endforeach
                </ul>
                <!-- /.Indicators -->

                <!-- Slides -->
                <div class="carousel-inner">
                    @forelse ($slider as $key => $value)
                        <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                            <img src="{{ asset($value->image) }}" class="d-block w-100" alt="Slide {{ $key + 1 }}">
                        </div>
                    @empty
                        <div class="carousel-item active">
                            <img src="https://via.placeholder.com/800x400?text=No+Image+Available" class="d-block w-100"
                                alt="No Image">
                        </div>
                    @endforelse
                </div>

                <!-- Controls -->
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">مخ</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">وروسته</span>
                </button>
                <!-- /.Controls -->
            </div>
            <!-- /.Carousel Wrapper -->
        </div>
    </section>
    <!-- Carousel Section End -->



@endsection