@extends('layouts.app')

@section('head')
<link rel="stylesheet" href="{{ asset('plugins/select2/select2.min.css')}}" />
@endsection

@section('content')
{{-- Breadcrumb --}}
<div class="lg:container pt-16 pb-32 lg:pb-0 hidden md:block">
    <div class="flex mt-8 text-gray-700" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
            <li class="inline-flex items-center">
                <a href="{{ route('beranda') }}"
                    class="inline-flex items-center text-xs text-primary hover:text-primary-dark">Beranda</a>
            </li>
            <li aria-current="page">
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <span class="ms-1 text-xs text-black md:ms-2">List Paket</span>
                </div>
            </li>
        </ol>
    </div>
</div>
{{-- End Breadcrumb --}}
<div class="lg:container pb-32 lg:pb-0 mx-4">
    <div class="lg:flex my-6 gap-6">
        <div class="w-full">
            <div class="mx-4 mb-4 md:mb-0 flex items-center justify-end">
                <button type="button"
                    class="mt-16 md:hidden inline-block rounded-lg border border-gray-300 px-6 py-2 text-xs font-medium leading-normal text-gray-400 transition duration-150 ease-in-out hover:border-primary-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-primary-600 focus:border-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700"
                    data-twe-toggle="modal" data-twe-target="#exampleFrameBottomModal" data-twe-ripple-init
                    data-twe-ripple-color="light">Filter <i class="fa fa-filter ml-1"></i></button>
            </div>

            <div class="hidden">
                <div class="my-4 flex items-center justify-center">
                    <div class="w-full md:w-3/12 text-center">
                        <img src="images/empty-state/no-result.png" alt="pencarian tidak ditemukan" class="" />
                        <h3 class="font-semibold text-black">Pencarian Tidak Ditemukan</h3>
                    </div>
                </div>
            </div>
            <h3 class="font-semibold text-black md:text-xl mb-4">List Paket Buku</h3>

            <!-- List Book -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                @foreach($getPaket as $index => $paket)
                <div
                    class="random-bg group min-h-52 flex justify-between relative overflow-hidden text-white rounded-2xl transition-all ease-in duration-500 hover:shadow-custom">
                    <div class="p-6 relative w-7/12 z-10">
                        <h3 class="font-semibold text-2xl leading-7 line-clamp-3">{{ $paket->nama_paket }}</h3>
                        <div class="mt-1 font-semibold">Rp. {{ number_format($paket->harga_paket, 0, ',', '.') }}</div>
                        <a href="{{ route('book.package', $paket->id_paket) }}"
                            class="absolute bottom-6 left-6 font-medium gap-4 hover:text-primary">
                            <div class="flex items-center gap-3">Beli Sekarang <i class="fa fa-chevron-right"></i></div>
                        </a>
                    </div>

                    <div class="relative w-5/12 z-30">
                        @if(count($paket->buku) > 3)
                        <div
                            class="absolute -bottom-10 right-20 h-[160px] w-[112px] bg-primary rounded-xl shadow-lg border-4 border-white transition-all ease-in-out duration-500 group-hover:-rotate-[30deg]">
                            <div
                                class="relative h-full space-y-2 items-center justify-center font-medium text-gray-500">
                                <span class="absolute -left-8 top-12 font-medium text-white text-sm rotate-90">
                                    <span class="font-semibold">{{ count($paket->buku) - 2 }}+</span> Buku Lainnya
                                </span>
                            </div>
                        </div>
                        <img src="{{ $paket->buku[count($paket->buku) - 2]->photos }}" alt="cover"
                            class="absolute -bottom-2 right-10 h-40 w-28 rounded-xl shadow-lg z-20 transition-all duration-300 ease-in-out group-hover:bottom-0 group-hover:-rotate-[20deg]" />
                        <img src="{{ $paket->buku[count($paket->buku) - 1]->photos }}" alt="cover"
                            class="absolute -bottom-6 -right-4 h-40 w-28 rounded-xl shadow-lg z-30 transition-all duration-400 ease-in-out group-hover:bottom-0" />
                        @else
                        @if(isset($paket->buku[2]))
                        <img src="{{ $paket->buku[2]->photos }}" alt="cover"
                            class="absolute -bottom-10 right-20 h-40 w-28 rounded-xl shadow-lg transition-all duration-300 ease-in-out group-hover:-rotate-[30deg]" />
                        @endif
                        @if(isset($paket->buku[1]))
                        <img src="{{ $paket->buku[1]->photos }}" alt="cover"
                            class="absolute -bottom-2 right-10 h-40 w-28 rounded-xl shadow-lg z-20 transition-all duration-300 ease-in-out group-hover:bottom-0 group-hover:-rotate-[20deg]" />
                        @endif
                        @if(isset($paket->buku[0]))
                        <img src="{{ $paket->buku[0]->photos }}" alt="cover"
                            class="absolute -bottom-6 -right-4 h-40 w-28 rounded-xl shadow-lg z-30 transition-all duration-400 ease-in-out group-hover:bottom-0" />
                        @endif
                        @endif
                    </div>
                    <div
                        class="w-60 h-60 rounded-3xl bg-white/10 rotate-45 absolute transition-all duration-400 ease-linear -left-20 top-2 group-hover:-left-16">
                    </div>
                </div>
                @endforeach
            </div>
            <!-- End List Book -->



            <!-- Pagination -->
            <div class="mt-10">
                {{ $getPaket->links() }}
            </div>
            <!-- End Pagination -->
        </div>
    </div>
</div>
<!-- End Main Content -->
@endsection

@section('javascript')
<script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
<script src="{{ asset('plugins/lazysizes/lazysizes.min.js') }}"></script>
<script>
    const colors = [
        '#8CD5CC',
        '#FF7B12',
        '#7E57C2',
        '#EF5350',
        '#42A5F5',
        '#C0CA33',
        '#5C6BC0',
        '#66BB6A',
        '#FFCA28',
        '#EC407A',
        '#26A69A',
        '#FF7043'
    ];

    document.addEventListener('DOMContentLoaded', function () {
        const bgElements = document.querySelectorAll('.random-bg');

        bgElements.forEach(el => {
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            el.style.backgroundColor = randomColor;
        });
    });
</script>

@endsection