@php
    $banner = \App\Models\LoginImage::where('status', 1)->orderBy('priority')->limit(5)->get();
@endphp
@extends('layout.master')

@section('content')
    <!--begin::App-->
    <div class="d-flex flex-column flex-root app-root" id="kt_app_root">
        <!--begin::Wrapper-->
        <div class="d-flex flex-column flex-lg-row flex-column-fluid">
            <!--begin::Aside-->
            <div class="d-flex flex-lg-row-fluid bgi-size-cover bgi-position-center order-1 login-aside">
                <!--begin::Content-->
                <div id="carouselExampleCaptions" class="carousel slide login-carousel" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        @foreach ($banner as $index => $item)
                            <button type="button" data-bs-target="#carouselExampleCaptions"
                                data-bs-slide-to="{{ $index }}" class="{{ $index == 0 ? 'active' : '' }}"
                                aria-current="{{ $index == 0 ? 'true' : '' }}"
                                aria-label="Slide {{ $index + 1 }}"></button>
                        @endforeach
                    </div>
                    <div class="carousel-inner">
                        @foreach ($banner as $index => $item)
                            <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                <a href="{{ $item->url }}" target="_blank">
                                    <img src="{{ asset('storage/' . $item->image) }}"
                                        alt="{{ $item->title }}">
                                </a>
                                {{-- <div class="carousel-caption d-none d-md-block">
                                <h2>{{ $item->title }}</h2>
                            </div> --}}
                            </div>
                        @endforeach
                    </div>

                    <!-- Navigation Arrows -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                        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="#carouselExampleCaptions"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
                <!--end::Content-->
            </div>
            <!--end::Aside-->

            <!--begin::Body-->
            <div class="d-flex flex-column flex-lg-row-fluid p-10 order-2 login-body">
                <!--begin::Form-->
                <div class="d-flex flex-center flex-column flex-lg-row-fluid">
                    <!--begin::Wrapper-->
                    <div class="w-100 p-10">
                        <!--begin::Page-->
                        {{ $slot }}
                        <!--end::Page-->
                    </div>
                    <!--end::Wrapper-->
                </div>
                <!--end::Form-->

                <!--begin::Footer-->
                {{-- <div class="d-flex flex-center flex-wrap px-5">
                <!--begin::Links-->
                <div class="d-flex fw-semibold text-primary fs-base">
                    <a href="#" class="px-5" target="_blank">Terms</a>

                    <a href="#" class="px-5" target="_blank">Plans</a>

                    <a href="#" class="px-5" target="_blank">Contact Us</a>
                </div>
                <!--end::Links-->
            </div> --}}
                <!--end::Footer-->
            </div>
            <!--end::Body-->

        </div>
        <!--end::Wrapper-->
    </div>
    <!--end::App-->
@endsection