@extends('layouts.app')

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

@endsection

@section('content')
<div class="lg:container pt-16 mx-4 hidden md:block">
    {{-- Breadcrumb --}}
    <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 class="inline-flex items-center">
                <i class="fa fa-chevron-right text-xs text-gray-400"></i>

                <a href="{{ route('voucher') }}"
                    class="ms-1 md:ms-2 inline-flex items-center text-xs text-primary hover:text-primary-dark">Voucher</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">Detail Voucher</span>
                </div>
            </li>
        </ol>
    </div>
    {{-- End Breadcrumb --}}
</div>
<div class="lg:container mt-24 lg:mt-10">
    <div
        class="p-4 lg:p-8 mx-4 lg:mx-0 mb-4 flex flex-col lg:flex-row justify-between relative gap-8 bg-gradient-to-r from-primary to-[#ffbf00] rounded-2xl z-20 overflow-hidden">
        <div class="absolute left-0 top-[70px] w-96 h-96 bg-white/10 rounded-full"></div>
        <div class="absolute -left-10 -top-6 w-44 h-44 bg-white/10 rounded-full"></div>
        <div class="absolute -right-10 -top-16 w-96 h-96 bg-white/15 rounded-full"></div>
        <div class="lg:w-8/12">
            <h2 class="mb-4 font-semibold text-white text-2xl">{{ $getDataVoucher->judul }}
            </h2>
            <p class="text-white">{{ $getDataVoucher->deskripsi }}</p>
            <div class="mt-6 p-4 border-2 border-white border-dashed flex items-start gap-6 rounded-lg lg:w-6/12">
                <div>
                    <div class="text-sm text-white">Periode</div>
                    <div class="text-lg font-semibold text-white">
                        @php
                        \Carbon\Carbon::setLocale('id');
                        @endphp
                        {{ \Carbon\Carbon::parse($getDataVoucher->tgl_mulai)->format('d') }} -
                        {{ \Carbon\Carbon::parse($getDataVoucher->tgl_akhir)->translatedFormat('d F Y') }}
                    </div>
                </div>
                <div>
                    <div class="text-sm text-white">Kuota</div>
                    <div class="text-lg font-semibold text-white">Terbatas</div>
                </div>
            </div>
        </div>
        <div class="lg:w-4/12">
            <div class="card-voucher w-full flex items-center justify-between bg-white shadow-custom transition duration-200 ease-in-out rounded-xl overflow-hidden"
                data-twe-ripple-init data-twe-ripple-color="secondary">
                <div class="w-full flex py-6 cursor-pointer">
                    <div class="w-8/12 relative flex flex-col px-2.5 lg:px-4 border-r border-dashed">
                        {{-- <h2 class="text-${warna} font-semibold text-2xl line-clamp-1">${judul}</h2> --}}
                        <p class="text-sm text-gray-500">Kode Voucher</p>
                        <div class="font-semibold text-2xl">{{ $kode_voucher }}</div>
                        <div class="mt-2 p-1 flex items-center justify-center gap-1 text-center border border-primary text-primary rounded-lg text-sm cursor-pointer"
                            onclick="salinKodeVoucher('{{ $kode_voucher }}')" data-twe-ripple-init
                            data-twe-ripple-color="${warna}">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M14 7V7C14 6.06812 14 5.60218 13.8478 5.23463C13.6448 4.74458 13.2554 4.35523 12.7654 4.15224C12.3978 4 11.9319 4 11 4H8C6.11438 4 5.17157 4 4.58579 4.58579C4 5.17157 4 6.11438 4 8V11C4 11.9319 4 12.3978 4.15224 12.7654C4.35523 13.2554 4.74458 13.6448 5.23463 13.8478C5.60218 14 6.06812 14 7 14V14"
                                    stroke="currentColor" stroke-width="2" />
                                <rect x="10" y="10" width="10" height="10" rx="2" stroke="currentColor"
                                    stroke-width="2" />
                            </svg>
                            {{ $kode_voucher }}
                        </div>
                        {{-- <div class="mt-3 relative flex w-full shadow-custom rounded-full gap-1">
                            <div
                                class="w-5/12 px-1.5 lg:px-3 py-2 text-center text-xs bg-white text-primary text-nowrap rounded-full">
                                Kode Voucher
                            </div>
                            <div
                                class="w-7/12 px-1.5 lg:px-3 py-2 text-center text-xs bg-primary text-white text-nowrap rounded-full">
                                ${kode_voucher}
                            </div>
                        </div> --}}
                        {{-- <div class="mt-4 text-xs text-gray-600 font-medium">
                            Periode: 10
                        </div>
                        <div class="mt-1 font-semibold">${penerbit}</div> --}}
                        <div class="w-8 h-8 bg-[#f7f7f7] rounded-full absolute -top-10 -right-4"></div>
                        <div class="w-8 h-8 bg-[#f7f7f7] rounded-full absolute -bottom-10 -right-4"></div>
                    </div>
                    <div
                        class="w-4/12 relative px-2.5 lg:px-2.5 flex flex-col items-center md:items-start justify-center">
                        <div class="text-primary font-medium">Diskon</div>
                        <div class="text-4xl md:text-5xl text-black font-black"> {{
                            (float)$getDataVoucher->diskon_persen
                            }}%
                        </div>
                        <div class="w-24 h-24 bg-primary rounded-full absolute -top-20 -right-12"></div>
                        <div class="w-24 h-24 bg-primary/20 rounded-full absolute -top-24 -right-4"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<section id="div-promo" class="lg:container mt-24 lg:mt-10">
    <div class="relative">
        <div class="glider-contain relative" id="glider-contain-promo">
            <div class="glider" id="glider-promo">
                <!-- skeleton start -->
                <div class="flex flex-row gap-2 flex-nowrap">
                    <div
                        class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                        <a href="#">
                            <div
                                class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                            </div>
                            <div class="product-desc pb-4 px-4">
                                <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                            </div>
                        </a>
                    </div>
                    <div
                        class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                        <a href="#">
                            <div
                                class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                            </div>
                            <div class="product-desc pb-4 px-4">
                                <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                            </div>
                        </a>
                    </div>
                    <div
                        class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                        <a href="#">
                            <div
                                class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                            </div>
                            <div class="product-desc pb-4 px-4">
                                <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                            </div>
                        </a>
                    </div>
                    <div
                        class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                        <a href="#">
                            <div
                                class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                            </div>
                            <div class="product-desc pb-4 px-4">
                                <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                            </div>
                        </a>
                    </div>
                    <div
                        class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                        <a href="#">
                            <div
                                class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                            </div>
                            <div class="product-desc pb-4 px-4">
                                <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                            </div>
                        </a>
                    </div>
                    <div
                        class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                        <a href="#">
                            <div
                                class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                            </div>
                            <div class="product-desc pb-4 px-4">
                                <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                            </div>
                        </a>
                    </div>
                    <div
                        class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                        <a href="#">
                            <div
                                class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                            </div>
                            <div class="product-desc pb-4 px-4">
                                <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                            </div>
                        </a>
                    </div>
                    <div
                        class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                        <a href="#">
                            <div
                                class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                            </div>
                            <div class="product-desc pb-4 px-4">
                                <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- skeleton finish -->
            </div>
        </div>

        <button
            class="glider-prevPromo absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 rounded-full bg-white p-2 shadow-md z-10 hidden lg:block">
            <span class="sr-only">button</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M15 18l-6-6 6-6" />
            </svg>
        </button>
        <button
            class="glider-nextPromo absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 rounded-full bg-white p-2 shadow-md z-10 hidden lg:block">
            <span class="sr-only">button</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 18l6-6-6-6" />
            </svg>
        </button>
    </div>

</section>

<div class="mt-8 flex justify-center">
    <a href="{{ route('beranda') }}" class="btn btn-primary px-8 gap-2 flex items-center"><i
            class="fa fa-search"></i>Cari
        Buku</a>
</div>
@endsection

@section('javascript')
<script src="{{ asset('plugins/gliderjs/glider.min.js') }}"></script>
<script src="{{ asset('plugins/lazysizes/lazysizes.min.js') }}"></script>
<script>
    var kode_voucher = "{{ $kode_voucher }}";
    


    function convertToSlug(Text) {
                return Text.toLowerCase()
                    .replace(/ /g, "-")
                    .replace(/[^\w-]+/g, "");
    }

    function formatRupiah(number) {
                return new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR',
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 0
                }).format(number);
    }

    function promo() {
                $.ajax({
                    "url":"{{ route('dataDetailVoucher') }}",
                    "type": "GET",
                    "data": {
                        'page': 1,
                        'limit': 20,
                        'kode_voucher': kode_voucher
                    }
                }).done(function(m) {
                    if (m.length > 0) {
                        let html = "";
                        for (let i = 0; i < m.length; i++) {
                            
                            let kode_konten = m[i].kode_konten;
                            let judul = m[i].judul;
                            let sub_kategori = m[i].sub_kategori;
                            let combined_title = sub_kategori + " " + judul;
                            let slug = convertToSlug(combined_title); 
                            let harga = formatRupiah(m[i].harga);
                            let promosi = m[i].is_promosi;
                            

                            if (promosi) {
                                html += `<div class="bg-white mx-2 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                                    <a href="{{ url('book') }}/${kode_konten}/${slug}">
                                    <div class="img-box w-full text-center rounded-xl p-2 flex min-h-[215px] items-center justify-center">
                                    <img data-src="https://kubuku.id/api/generic/showCover/${m[i].kode_konten}"
                                        src="{{ asset('images/ph-bacabuku.webp') }}"
                                        onerror="this.onerror=null;this.src='{{ asset('images/ph-bacabuku.webp') }}'"
                                        alt="cover buku"
                                        width="160"
                                        height="240"
                                        loading="lazy"
                                        class="m-auto w-40 rounded-lg lazyload" />
                                    </div>
                                    <div class="product-desc pb-3 px-3">
                                    <h3 class="product-title font-semibold text-black text-sm line-clamp-2 mb-1">${m[i].judul}</h3>
                                    <p class="product-author line-clamp-1 text-sm text-gray-500 mb-1">${m[i].penulis}</p>
                                    <div class="mt-2 p-1 inline gap-1 bg-red-500/20 rounded-md text-xs font-semibold text-red-500"><i class="fa fa-bolt"></i><span> Flash Sale</span></div>

                                    <div class="mt-2 flex gap-2 items-center">
                                    <p class="product-price fs-6 font-semibold text-sm text-primary mb-0">${formatRupiah(m[i].harga_akhir)}</p>
                                    <p class="product-price text-xs text-gray-500 line-through">${formatRupiah(m[i].harga_awal)}</p>
                                    </div>
                                    </div>
                                    </a>
                                    </div>`;
                            } else {
                                html += `<div class="bg-white mx-2 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                                    <a href="{{ url('book') }}/${kode_konten}/${slug}">
                                    <div class="img-box w-full text-center rounded-xl p-2 flex min-h-[215px] items-center justify-center">
                                    <img data-src="https://kubuku.id/api/generic/showCover/${m[i].kode_konten}"
                                        src="{{ asset('images/ph-bacabuku.webp') }}"
                                        onerror="this.onerror=null;this.src='{{ asset('images/ph-bacabuku.webp') }}'"
                                        alt="cover buku"
                                        width="160"
                                        height="240"
                                        loading="lazy"
                                        class="m-auto w-40 rounded-lg lazyload" />
                                    </div>
                                    <div class="product-desc pb-3 px-3">
                                    <h3 class="product-title font-semibold text-black text-sm line-clamp-2 mb-1">${m[i].judul}</h3>
                                    <p class="product-author line-clamp-1 text-sm text-gray-500 mb-1">${m[i].penulis}</p>
                                    <p class="product-price fs-6 font-semibold text-sm text-primary mb-0">${harga}</p>
                                    </div>
                                    </a>
                                    </div>`;

                            }

                             
                        }

                        $('#glider-promo').html(html);

                        if (document.querySelector('#glider-promo')) {
                            new Glider(document.querySelector('#glider-promo'), {
                                slidesToScroll: 1,
                                slidesToShow: 6.6,
                                draggable: true,
                                dots: '.dots',
                                arrows: {
                                    prev: '.glider-prevPromo',
                                    next: '.glider-nextPromo',
                                },
                            });
                        } else {
                            console.error('Element #glider-promo not found');
                        }
                    } else {
                        $('#div-promo').hide();
                    }
                });
            }

             window.onload = function() {

                const smoothScrollLink = document.getElementById('smooth-scroll-link');
                if (smoothScrollLink) {
                    smoothScrollLink.addEventListener('click', function(event) {
                        event.preventDefault(); 
                        const targetElement = document.getElementById('div-promo');
                        const offset = targetElement.getBoundingClientRect().top + window.scrollY;
                        window.scrollTo({
                            top: offset - 100, 
                            behavior: 'smooth'
                        });
                    });
                }

                    const bgElements = document.querySelectorAll('.random-bg');

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

                        promo();
                        // promobook();
            }
        

      function salinKodeVoucher(kode) {
    // Gunakan Clipboard API modern jika tersedia
    if (navigator.clipboard) {
        navigator.clipboard.writeText(kode)
            .then(() => {
                notifikasi.success('Kode voucher berhasil disalin!');
            })
            .catch(err => {
                console.error('Gagal menyalin:', err);
                notifikasi.error('Gagal menyalin kode voucher');
            });
        return;
    }
}
     
</script>
@endsection