@extends('../backend/layout/' . $layout)

@section('subhead')
<title>Banners</title>
@endsection

@section('subcontent')
<div class="intro-y flex flex-col sm:flex-row items-center mt-8">
    <h2 class="text-lg font-medium mr-auto capitalize">{{ $bannerGroup->name }} Banners</h2>
    <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
        <a href="{{ route('banner-groups.index') }}" class="btn btn-primary shadow-md mr-2">Banner Groups</a>
    </div>
    <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
        <a href="{{ route('banner-groups.banners.create', $bannerGroup->id) }}" class="btn btn-outline-primary shadow-md mr-2">Add New Banner</a>
    </div>
</div>
<div class="intro-y grid grid-cols-1 mt-5">
    <!-- BEGIN: Banner List -->
    @forelse ($banners as $banner)
    <div class="intro-y box mb-4">
        <div id="banner_{{ $banner->id }}" class="h-[320px] before:block before:absolute before:w-full before:h-full before:top-0 before:left-0 before:z-10 before:from-black/90 before:to-black/10 image-fit">
            @if ($banner->background_image)
            <img alt="Banner Background image" class="rounded-t-md" src="{{ $banner->background_image }}">
            @endif
            <div class="absolute w-full flex items-center px-5 pt-3 z-10">
                <div class="mr-auto"></div>
                <div class="dropdown ml-3">
                    <a href="javascript:;" class="bg-primary/10 dropdown-toggle w-8 h-8 flex items-center justify-center rounded-full" aria-expanded="false" data-tw-toggle="dropdown">
                        <i data-lucide="more-vertical" class="w-4 h-4 text-white"></i>
                    </a>
                    <div class="dropdown-menu w-40">
                        <ul class="dropdown-content">
                            <li>
                                <a href="{{ route('banner-groups.banners.edit', [$bannerGroup->id, $banner->id]) }}" class="dropdown-item">
                                    <i data-lucide="edit-2" class="w-4 h-4 mr-2"></i> Edit
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;" class="delete_post dropdown-item" data-id="{{ $banner->id }}">
                                    <i data-lucide="trash" class="w-4 h-4 mr-2"></i> Delete
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="absolute bottom-0 w-full flex {{ ($banner->product_image != '' && $banner->product_image_alignment == 1) ? 'flex-row-reverse' : '' }} items-center  {{ $banner->product_image != '' ? 'justify-around' : ($banner->product_image_alignment == 0 ? 'justify-end' : '') }}  px-5 pb-6 z-10">
                @if ($banner->product_image != '')
                <img alt="Banner Background Image" class="px-5 w-72" src="{{ $banner->product_image }}">
                @endif
                <div class="px-5 {{ $banner->product_image_alignment == 0 ? 'text-right' : 'text-left' }}" style="line-height: 1.1;">
                    <div>{!! $banner->title1 !!}</div>
                    <div>{!! $banner->title2 !!}</div>
                    <div>{!! $banner->title3 !!}</div>
                    @if ($banner->btn_text != '')
                    <a target="_blank" href="{{ $banner->btn_link }}"><button style=" background-color:#{{ $banner->btn_text_color }};color: white;border-radius: 18px;padding: 10px 24px;">{{ $banner->btn_text }}</button></a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3" role="alert">
        <p class="font-bold">No data found.</p>
        <p class="text-sm">There is no banner added in system.</p>
    </div>
    @endforelse
    <!-- END: Banner List -->
</div>
@endsection

@section('script')
<script>
    let listRoute = "{{ route('banner-groups.banners.index', $bannerGroup->id) }}";
    var bannerGroupId = '{{ $bannerGroup->id }}'

    function getDeleteRoute(banner) {
        console.log(banner, bannerGroupId)
        let url = "{{ route('banner-groups.banners.destroy', [':bannerGroupId', ':banner']) }}";
        url = url.replace(':bannerGroupId', bannerGroupId);
        return url.replace(':banner', banner);
    }
</script>
<script src="{{ asset(mix('js/backend/pages/banners/index.js')) }}"></script>
@endsection