@if(session('login_success'))
@php
    $banners = \Botble\Ecommerce\Models\EcBanner::where('status', 'published')->get();
@endphp
@if($banners->count() > 0)
<div class="modal fade" id="loginSuccessModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-body p-0 position-relative">
                <button type="button" class="btn-close position-absolute bg-white top-0 end-0 m-3" style="z-index: 1050;" data-bs-dismiss="modal"></button>
                
                @if($banners->count() > 1)
                    <div id="bannerCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000" data-bs-pause="hover">
                        <div class="carousel-inner">
                            @foreach($banners as $index => $banner)
                                <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                    <img src="{{ RvMedia::getImageUrl($banner->image) }}" class="d-block w-100" alt="{{ $banner->title }}" style="object-fit: contain;">
                                </div>
                            @endforeach
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#bannerCarousel" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon bg-white rounded"></span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#bannerCarousel" data-bs-slide="next">
                            <span class="carousel-control-next-icon bg-white rounded"></span>
                        </button>
                    </div>
                @else
                    <img src="{{ RvMedia::getImageUrl($banners->first()->image) }}" class="d-block w-100" alt="{{ $banners->first()->title }}" style="object-fit: contain;">
                @endif
            </div>
        </div>
    </div>
</div>
<style>
    .carousel-control-next, .carousel-control-prev {
        width: 6%;
    }
    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    }
    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }
    .carousel-control-next-icon, .carousel-control-prev-icon {
        width: 25px;
        height: 25px;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const modalElement = document.getElementById("loginSuccessModal");
    if (modalElement && typeof bootstrap !== 'undefined') {
        const modal = new bootstrap.Modal(modalElement);
        modal.show();
    }
});
</script>
@endif
@endif