@extends('layouts.affiliatorlayout')

@section('head')
<link rel="stylesheet" href="{{ asset('plugins/gliderjs/glider.min.css')}}" />
<link rel="preload" as="image" type="image/webp" href="{{ asset('images/bg-hero.webp') }}" fetchpriority="high">
<link rel="stylesheet" href="{{ asset('plugins/apexcharts/apexcharts.css')}}" />

@if(isset($konten))
<script type="application/ld+json">
    {!! json_encode($jsonLd, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!}
</script>
@endif
@endsection


@section('content')
{{-- Main Section --}}
<main class="flex-1 p-4 lg:p-6 overflow-y-scroll">
    {{-- Breadcrumb --}}
    <div class="mb-6 flex 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>
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <a href="#" class="ms-1 text-xs  md:ms-2">Dashboard</a>
                </div>
            </li>
        </ol>
    </div>
    {{-- End Breadcrumb --}}

    @if($notif == true)
    <div class="mt-4 mb-1 lg:mt-6  bg-white rounded-xl shadow-custom p-6 mb-6 text-white overflow-hidden relative">
        <div class="relative flex flex-col md:flex-row md:items-center md:justify-between z-10">
            <div>
                <p class="mb-2 text-lg text-black">⚠️ Lengkapi Profil Anda</p>
                <p class="text-sm text-black">Beberapa data penting masih kosong. Lengkapi sekarang agar akun
                    Anda aktif sepenuhnya.</p>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="{{ route('affiliator.editProfile') }}" class="btn btn-primary">
                    Lengkapi Sekarang
                </a>
            </div>
        </div>
        <div>
            <img src="{{ asset('images/bg-dots.webp') }}" alt="bg dots"
                class="absolute w-96 -left-12 -top-40 opacity-20 pointer-events-none" />
        </div>
    </div>
    @endif


    {{-- Welcome Banner --}}
    <div
        class="mt-6 relative bg-gradient-to-r from-primary to-[#FDBB2D] rounded-xl shadow-custom p-6 mb-6 text-white overflow-hidden">
        <div class="relative flex flex-col md:flex-row md:items-center md:justify-between z-10">
            <div>
                <h2 class="text-2xl mb-2 font-bold">Dashboard Saya</h2>
                <h2 class="text-2xl mb-2">Selamat Datang, <span class="font-bold">{{ $fullName }}</span>!</h2>
                <p class="mb-4">Pantau performa afiliasi Anda dan tingkatkan penghasilan Anda hari ini.</p>
                {{-- <div class="flex space-x-2">
                    <button
                        class="bg-white text-primary px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors">
                        Lihat Tutorial
                    </button>
                    <button
                        class="bg-white bg-opacity-20 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-opacity-30 transition-colors">
                        Dapatkan Link
                    </button>
                </div> --}}
            </div>
            <div class="mt-6 md:mt-0">
                <div class="bg-white bg-opacity-50 rounded-xl p-4">
                    <p class="mb-3 text-black font-medium">Link Tokomu</p>
                    <div class="flex items-stretch gap-2">
                        <a href="https://bacabuku.com/link/{{ $kodePengguna }}" target="_blank"
                            class="flex-1 bg-white bg-opacity-90 text-primary hover:text-primary-dark px-4 py-2 rounded-lg text-sm sm:text-base focus:outline-none truncate hover:border-primary transition-all flex items-center justify-between">
                            <span class="truncate">https://bacabuku.com/link/{{ $kodePengguna }}</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2 flex-shrink-0" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                            </svg>
                        </a>
                        <button onclick="copyAffiliateLink()"
                            class="bg-white text-primary px-4 py-2 rounded-md hover:bg-gray-100 transition-colors flex items-center justify-center"
                            data-twe-ripple-init data-twe-ripple-color="secondary" title="Salin link">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <img src="{{asset('images/bg-dots.webp')}}" alt="bg dots" class="absolute w-96 -left-12 -top-40" />
        </div>
        <img src="{{asset('images/affiliate.webp')}}" alt="affiliator" class="absolute w-36 -right-2 -top-8">
    </div>
    {{-- End Welcome Banner --}}

    {{-- Stats Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div
            class="relative flex items-center justify-between bg-gradient-to-r from-[#F37335] to-[#FDC830] px-4 py-6 rounded-xl">
            <div class="w-full flex justify-between items-center">
                <div class="w-9/12">
                    <p class="text-sm text-white">Komisi Dalam Proses</p>
                    <h3 class="mt-1 text-2xl font-bold text-white whitespace-normal">
                        Rp {{ number_format($komisiDalamProses, 0, ',', '.') }}
                    </h3>
                </div>
                <img src="{{ asset('images/komisi-proses.webp') }}" alt="saldo dana"
                    class="absolute right-2 top-4 w-20">
            </div>
        </div>
        <div
            class="relative flex items-center justify-between bg-gradient-to-r from-[#56ab2f] to-[#a8e063] px-4 py-6 rounded-xl">
            <div class="w-full flex justify-between items-center">
                <div class="w-9/12">
                    <p class="text-sm text-white">Komisi Belum Ditagih</p>
                    <h3 class="mt-1 text-2xl font-bold text-white whitespace-normal">
                        Rp {{ number_format($komisiBelumDiTagih, 0, ',', '.') }}
                    </h3>
                </div>
                <img src="{{ asset('images/komisi-belum-ditagih.webp') }}" alt="saldo dana"
                    class="absolute right-1 top-1 w-24">
            </div>
        </div>
        <div
            class="relative flex items-center justify-between bg-gradient-to-r from-blue-500 to-cyan-500 px-4 py-6 rounded-xl">
            <div class="w-full flex justify-between items-center">
                <div class="w-9/12">
                    <p class="text-sm text-white">Komisi Belum Dibayar</p>
                    <h3 class="mt-1 text-2xl font-bold text-white truncate">
                        Rp {{ number_format($komisiBelumDibayar, 0, ',', '.') }}
                    </h3>
                </div>
                <img src="{{ asset('images/saldo-dana.webp') }}" alt="saldo dana" class="absolute right-2 top-4 w-20">
            </div>
        </div>
    </div>
    {{-- End Stats Cards --}}


    {{-- Stats Cards --}}
    <div class="mb-6">
        <div class="flex flex-col lg:flex-row gap-6">
            <div class="w-full lg:w-3/12">
                <div
                    class="w-full flex-col space-y-8 justify-center bg-white rounded-xl shadow-custom p-6 transition-all duration-300 hover:shadow-lg">
                    <h3 class="mb-6 text-lg text-black font-semibold">Ringkasan</h3>

                    <div class="w-full flex items-center gap-4">
                        <div
                            class="flex-none flex items-center justify-center w-12 h-12 bg-purple-100 p-3 rounded-xl text-purple-600">
                            <i class="fas fa-book text-xl"></i>
                        </div>
                        <div>
                            <p class="text-gray-500 text-sm">Total Buku Dibagikan</p>
                            <h3 class="mt-1 font-semibold text-gray-800 truncate">{{ $totalStats->count() }}
                                Buku
                            </h3>
                        </div>
                    </div>

                    <div class="w-full flex items-center gap-4">
                        <div
                            class="flex-none flex items-center justify-center w-12 h-12 bg-cyan-100 p-3 rounded-xl text-cyan-600">
                            <i class="fas fa-user text-xl"></i>
                        </div>
                        <div>
                            <p class="text-gray-500 text-sm">Total Pengunjung</p>
                            <p class="mt-1 font-semibold text-gray-800 truncate">
                                {{ $mostClicked }} Pengunjung
                            </p>
                        </div>
                    </div>

                    <div class="w-full flex items-center gap-4">
                        <div
                            class="flex-none flex items-center justify-center w-12 h-12 bg-green-100 p-3 rounded-xl text-green-600">
                            <i class="fas fa-shopping-cart text-xl"></i>
                        </div>
                        <div>
                            <p class="text-gray-500 text-sm">Total Transaksi</p>
                            <p class="mt-1 font-semibold text-gray-800 truncate">
                                {{ $transaksiTotal }} Transaksi
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-9/12">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <!-- Buku Penjualan Terbanyak -->
                    <div
                        class="md:min-h-[292px] bg-white rounded-xl shadow-custom p-6 transition-all duration-300 hover:shadow-lg">
                        <h2 class="mb-6 text-lg text-black font-semibold">Penjualan Terbanyak</h2>

                        @if(isset($transaksiTerbanyak) && $transaksiTerbanyak->jumlah_transaksi >= 1)
                        {{-- Show content when there are more than 1 transactions --}}
                        <div class="flex md:flex-col flex-row items-start gap-4 lg:gap-2">
                            <div class="md:mx-auto flex items-start justify-center w-16 rounded-lg">
                                <img src="https://kubuku.id/api/generic/showCover/{{ $transaksiTerbanyak->kode_konten ?? '' }}"
                                    alt="cover buku" class="rounded"
                                    onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                            </div>
                            <div class="md:mt-2">
                                <p class="md:mt-1 text-sm text-black line-clamp-2">
                                    {{ $transaksiTerbanyak->judul ?? "" }} </p>
                                <div class="mt-1 font-semibold text-black truncate">
                                    {{ $transaksiTerbanyak->jumlah_transaksi ?? 0 }} Transaksi
                                </div>
                            </div>
                        </div>
                        @else
                        {{-- Show empty state when 0 or 1 transaction --}}
                        <div class="flex flex-col items-center justify-center">
                            <img src="{{ asset('images/empty-state/no-transaction.png') }}" alt="tidak ada transaksi"
                                class="w-40">
                            <p class="font-semibold text-black">Belum Ada</p>
                        </div>
                        @endif
                    </div>

                    <!-- Buku Kunjungan Terbanyak -->
                    <div
                        class="md:min-h-[292px] bg-white rounded-xl shadow-custom p-6 transition-all duration-300 hover:shadow-lg">
                        <h2 class="mb-6 text-lg text-black font-semibold">Kunjungan Terbanyak</h2>

                        @if(isset($klikTerbanyak) && $klikTerbanyak->count >= 1)
                        {{-- Show content when there are more than 1 visits --}}
                        <div class="flex md:flex-col flex-row items-start gap-4 md:gap-2">
                            <div class="md:mx-auto flex items-start justify-center w-16 rounded-lg">
                                <img src="https://kubuku.id/api/generic/showCover/{{ $klikTerbanyak->kode_konten ?? '' }}"
                                    alt="cover buku" class="rounded"
                                    onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                            </div>
                            <div class="md:mt-2">
                                <p class="md:mt-1 text-sm text-black line-clamp-2">
                                    {{ $klikTerbanyak->judul }}
                                </p>
                                <div class="mt-1 font-semibold text-black">
                                    {{ $klikTerbanyak->count }} Kunjungan
                                </div>
                            </div>
                        </div>
                        @else
                        {{-- Show empty state when 0 or 1 visit --}}
                        <div class="flex flex-col items-center justify-center">
                            <img src="{{ asset('images/empty-state/no-transaction.png') }}" alt="tidak ada kunjungan"
                                class="w-40">
                            <p class="font-semibold text-black">Belum Ada</p>
                        </div>
                        @endif
                    </div>

                    <!-- Buku Penghasilan Terbesar -->
                    <div
                        class="lg:min-h-[292px] bg-white rounded-xl shadow-custom p-6 transition-all duration-300 hover:shadow-lg">
                        <h2 class="mb-6 text-lg text-black font-semibold">Buku Komisi Terbesar Akumulasi</h2>

                        @if(isset($komisiPerAlias) && $komisiPerAlias->total_komisi > 0)
                        {{-- Show content when there's positive income --}}
                        <div class="flex lg:flex-col flex-row items-start gap-4 lg:gap-2">
                            <div class="md:mx-auto flex items-start justify-center w-16 rounded-lg">
                                <img src="https://kubuku.id/api/generic/showCover/{{ $komisiPerAlias->kode_konten ?? '' }}"
                                    alt="cover buku" class="rounded"
                                    onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                            </div>
                            <div class="lg:mt-2">
                                <h3 class="lg:mt-1 text-sm text-black line-clamp-2">
                                    {{ $komisiPerAlias->judul ?? "" }}
                                </h3>
                                <div class="mt-1 font-semibold text-black">
                                    Rp {{ number_format($komisiPerAlias->total_komisi, 0, ',', '.') }}
                                </div>
                                <h2 class="lg:mt-1 text-sm text-black line-clamp-2">
                                    {{ $komisiPerAlias->jumlah_transaksi ?? "" }} Transaksi
                                </h2>
                            </div>
                        </div>
                        @else
                        {{-- Show empty state when no income --}}
                        <div class="flex flex-col items-center justify-center">
                            <img src="{{ asset('images/empty-state/no-transaction.png') }}" alt="tidak ada penghasilan"
                                class="w-40">
                            <p class="font-semibold text-black">Belum Ada</p>
                        </div>
                        @endif
                    </div>


                    <!-- Buku Penghasilan Terbesar -->
                    <div
                        class="lg:min-h-[292px] bg-white rounded-xl shadow-custom p-6 transition-all duration-300 hover:shadow-lg">
                        <h2 class="mb-6 text-lg text-black font-semibold">Buku Komisi Terbesar Per Tansaksi</h2>

                        @if(isset($komisiPerTransaksi) && $komisiPerTransaksi->max_komisi > 0)
                        {{-- Show content when there's positive income --}}
                        <div class="flex lg:flex-col flex-row items-start gap-4 lg:gap-2">
                            <div class="md:mx-auto flex items-start justify-center w-16 rounded-lg">
                                <img src="https://kubuku.id/api/generic/showCover/{{ $komisiPerTransaksi->kode_konten ?? '' }}"
                                    alt="cover buku" class="rounded"
                                    onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                            </div>
                            <div class="lg:mt-2">
                                <h3 class="lg:mt-1 text-sm text-black line-clamp-2">
                                    {{ $komisiPerTransaksi->judul ?? "" }}
                                </h3>
                                <div class="mt-1 font-semibold text-black">
                                    Rp {{ number_format($komisiPerTransaksi->max_komisi, 0, ',', '.') }}
                                </div>
                            </div>
                        </div>
                        @else
                        {{-- Show empty state when no income --}}
                        <div class="flex flex-col items-center justify-center">
                            <img src="{{ asset('images/empty-state/no-transaction.png') }}" alt="tidak ada penghasilan"
                                class="w-40">
                            <p class="font-semibold text-black">Belum Ada</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <!-- Stats Grid -->
        {{-- Total Buku Dibagikan --}}
    </div>
    {{-- End Stats Cards --}}

    {{-- Monthly Sales Cards --}}
    <div class="flex mb-6">
        <div class="bg-white w-full rounded-xl shadow-custom">
            <div class="p-6">
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-black">Penjualan Bulanan</h3>
                    <div class="flex space-x-2">
                        <button data-period="1month"
                            class="px-3 py-1 text-xs {{ $selectedPeriod === '1month' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-600' }} rounded-md period-btn">Bulan
                            Ini</button>
                        <button data-period="3months"
                            class="px-3 py-1 text-xs {{ $selectedPeriod === '3months' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-600' }} rounded-md period-btn">3
                            Bulan</button>
                        <button data-period="6months"
                            class="px-3 py-1 text-xs {{ $selectedPeriod === '6months' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-600' }} rounded-md period-btn">6
                            Bulan</button>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div id="monthly-sales-card"></div>
            </div>
        </div>
    </div>
    {{-- End Monthly Sales Cards --}}

    {{-- Popular Books Section --}}
    <section id="div-terpopuler" class="mb-6 p-6 bg-white rounded-xl shadow-custom">
        <div class="mb-4 flex items-center justify-between">
            <h2 class="font-semibold text-black text-lg">Buku Terpopuler</h2>
            <a href="{{ route('list.keyword',['slug' => 'koleksi-buku-terpopuler']) }}"
                class="text-primary text-sm font-medium hover:text-primary-dark">Selengkapnya</a>
        </div>
        <div class="relative">
            <div class="glider-contain relative overflow-x-auto" id="glider-contain-terpopuler">
                <div class="glider" id="glider-terpopuler">
                    <!-- 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-prevTerpopuler 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-nextTerpopuler 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>
    {{-- End Popular Books Section --}}



    {{-- Recent Sales and Top Products Cards --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        {{-- Recent Sales Card --}}
        <div class="bg-white rounded-xl shadow-custom">
            <div class="p-6">
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-black">Aktivitas Penjualan</h3>
                    <a href="{{ route('affiliator.performa') }}" class="text-sm text-primary hover:underline">Lihat
                        Semua</a>
                </div>
            </div>
            <div class="p-6">
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead>
                            <tr class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                                <th class="pb-3">Produk</th>
                                <th class="pb-3">Tanggal</th>
                                <th class="pb-3">Komisi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @forelse($penjualan->take(5) as $link)
                            <tr>
                                <td class="py-3">
                                    <div class="flex items-center">
                                        <div class="w-8 h-12 flex-none flex items-center justify-center mr-3">
                                            <img src="https://kubuku.id/api/generic/showCover/{{ $link->kode_konten }}"
                                                alt="cover buku" class="rounded">
                                        </div>
                                        <div>
                                            <div class="font-medium text-sm text-black capitalize line-clamp-2">
                                                {{ $link->judul }}
                                            </div>
                                            <div class="text-xs text-gray-500 line-clamp-1">{{ $link->penulis }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="p-3 text-sm text-gray-500">
                                    {{ \Carbon\Carbon::parse($link->tgl_input)->locale('id')->translatedFormat('l, j F
                                    Y') }}
                                </td>
                                <td class="py-3 text-sm text-green-600">
                                    Rp {{ number_format($link->nominal_komisi, 0, ',', '.') }}
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="py-3 text-center text-sm text-gray-500">
                                    Tidak ada data penjualan
                                </td>
                            </tr>
                            @endforelse
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
        {{-- End Recent Sales Card --}}

        {{-- Top Products Card --}}
        <div class="bg-white rounded-xl shadow-custom">
            <div class="p-6">
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-black">Buku Terlaris</h3>
                </div>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    @forelse($penjualanTerbanyak as $link)
                    <div class="flex items-center">
                        <div class="w-10 h-14 flex-none flex items-center justify-center mr-3">
                            <img src="https://kubuku.id/api/generic/showCover/{{ $link->kode_konten }}" alt="cover buku"
                                class="rounded">
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between items-center mb-1 gap-2">
                                <div>
                                    <div class="font-medium text-sm text-black capitalize line-clamp-2">
                                        {{ $link->judul }}
                                    </div>
                                    <div class="text-xs text-gray-500 line-clamp-1">{{ $link->penulis }}</div>
                                </div>
                                <span class="flex-none text-sm text-gray-500">
                                    {{ $link->jumlah_transaksi }} transaksi
                                </span>
                            </div>

                            @php
                            $maxTransactions = $penjualanTerbanyak->max('jumlah_transaksi');
                            $percentage = $maxTransactions > 0
                            ? ($link->jumlah_transaksi / $maxTransactions) * 100
                            : 0;
                            @endphp

                            <div class="w-full bg-gray-100 rounded-full h-1.5">
                                <div class="bg-primary h-1.5 rounded-full" style="width: {{ $percentage }}%"></div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="text-center text-sm text-gray-500 py-4">
                        Tidak ada data penjualan
                    </div>
                    @endforelse
                </div>

            </div>
        </div>
        {{-- End Top Products Card --}}
    </div>
    {{-- End Recent Sales and Top Products Cards --}}

    <!-- Modal Share -->
    <div data-twe-modal-init
        class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
        id="modalShare" tabindex="-1" aria-labelledby="modalShareTitle" aria-modal="true" role="dialog">
        <div data-twe-modal-dialog-ref
            class="m-4 pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[500px]">
            <div class="pointer-events-auto relative flex w-full flex-col rounded-2xl bg-white shadow-4">
                <div class="flex flex-shrink-0 items-center justify-between rounded-t-2xl p-4">
                    <h5 class="text-xl font-semibold leading-normal text-black" id="modalShareTitle">
                        Bagikan
                    </h5>
                    <!-- Close button -->
                    <button type="button"
                        class="absolute top-3 right-3 box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none"
                        data-twe-modal-dismiss aria-label="Close" onclick="closeModal()">
                        <span class="[&>svg]:h-6 [&>svg]:w-6">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                                stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </span>
                    </button>
                </div>
                <div id="modalContent" class="relative p-6 flex flex-col justify-center">
                    <div class="p-4 hidden">
                        <input type="text" id="fullLink" readonly
                            class="w-full rounded-md border-gray-300 focus:border-primary focus:ring-primary sm:text-sm cursor-not-allowed">
                    </div>
                    <div class="my-4 w-full flex items-start gap-2">
                        {{-- item button share --}}
                        <button type="button" onclick="shareToFacebook()"
                            class="w-1/5 flex flex-col items-center justify-center rounded-lg cursor-pointer"
                            data-twe-ripple-init data-twe-ripple-color="secondary">
                            <div class="mb-1 flex items-center justify-center w-11 h-11 bg-primary/10 rounded-full"
                                data-twe-modal-dismiss>
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M14.2 2.875C12.9734 2.875 11.797 3.36228 10.9296 4.22963C10.0623 5.09699 9.575 6.27337 9.575 7.5V10.075H7.1C6.97574 10.075 6.875 10.1757 6.875 10.3V13.7C6.875 13.8243 6.97574 13.925 7.1 13.925H9.575V20.9C9.575 21.0243 9.67574 21.125 9.8 21.125H13.2C13.3243 21.125 13.425 21.0243 13.425 20.9V13.925H15.9219C16.0252 13.925 16.1152 13.8547 16.1402 13.7546L16.9902 10.3546C17.0257 10.2126 16.9183 10.075 16.7719 10.075H13.425V7.5C13.425 7.29446 13.5067 7.09733 13.652 6.95199C13.7973 6.80665 13.9945 6.725 14.2 6.725H16.8C16.9243 6.725 17.025 6.62426 17.025 6.5V3.1C17.025 2.97574 16.9243 2.875 16.8 2.875H14.2Z"
                                        fill="#FFA502" />
                                </svg>
                            </div>
                            <span class="text-black text-xs text-center">Facebook</span>
                        </button>
                        {{-- end item button share --}}
                        {{-- item button share --}}
                        <button type="button" onclick="shareToTwitter()"
                            class="w-1/5 flex flex-col items-center justify-center rounded-lg cursor-pointer"
                            data-twe-ripple-init data-twe-ripple-color="secondary">
                            <div class="mb-1 flex items-center justify-center w-11 h-11 bg-primary/10 rounded-full"
                                data-twe-modal-dismiss>
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M5.27992 1.91992C3.42424 1.91992 1.91992 3.42424 1.91992 5.27992V18.7199C1.91992 20.5756 3.42424 22.0799 5.27992 22.0799H18.7199C20.5756 22.0799 22.0799 20.5756 22.0799 18.7199V5.27992C22.0799 3.42424 20.5756 1.91992 18.7199 1.91992H5.27992ZM6.28117 6.23992H10.0912L12.7968 10.0846L16.0799 6.23992H17.2799L13.3387 10.8543L18.1987 17.7599H14.3896L11.2499 13.2993L7.43992 17.7599H6.23992L10.708 12.5296L6.28117 6.23992ZM8.11867 7.19992L14.8902 16.7999H16.3612L9.58961 7.19992H8.11867Z"
                                        fill="#FFA502" />
                                </svg>
                            </div>
                            <span class="text-black text-xs text-center">Twitter</span>
                        </button>
                        {{-- end item button share --}}
                        {{-- item button share --}}
                        <button type="button" onclick="shareToWhatsApp()"
                            class="w-1/5 flex flex-col items-center justify-center rounded-lg cursor-pointer"
                            data-twe-ripple-init data-twe-ripple-color="secondary">
                            <div class="mb-1 flex items-center justify-center w-11 h-11 bg-primary/10 rounded-full"
                                data-twe-modal-dismiss>
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M12.042 2.5C14.5762 2.50004 16.9474 3.48215 18.7334 5.25977C20.5186 7.03682 21.4999 9.40022 21.5 11.916C21.5 17.1027 17.2542 21.3271 12.042 21.3271H12.0371C10.4536 21.3271 8.89809 20.9299 7.5166 20.1816C7.43307 20.1364 7.33864 20.1159 7.24512 20.1221L7.15137 20.1377L2.71191 21.2969L3.89648 16.9971C3.93199 16.868 3.91463 16.7301 3.84766 16.6143C3.01935 15.1841 2.58339 13.5616 2.58398 11.9111C2.58411 6.72444 6.82993 2.5 12.042 2.5ZM8.3916 6.66504C8.10407 6.66504 7.68446 6.7699 7.33691 7.14453C7.32479 7.1576 7.31132 7.17304 7.29395 7.19141C6.99983 7.50224 6.30273 8.24166 6.30273 9.62695C6.30276 10.3609 6.5663 11.0548 6.82617 11.5684C7.08947 12.0887 7.37211 12.4665 7.45117 12.5723L7.45605 12.5801C7.4579 12.5827 7.46106 12.5863 7.46484 12.5918C7.47255 12.603 7.48217 12.6176 7.49512 12.6367C7.81528 13.1099 9.49127 15.6045 12.0762 16.6211C13.0756 17.0145 13.7424 17.2044 14.2295 17.2861C14.7349 17.3709 15.0356 17.3366 15.2754 17.3076C15.3219 17.302 15.3597 17.2965 15.3965 17.293L15.3975 17.2939C15.7502 17.261 16.211 17.0578 16.5889 16.8145C16.9602 16.5753 17.3956 16.2055 17.5625 15.7451L17.5635 15.7412C17.6841 15.4005 17.7464 15.0808 17.7686 14.8223C17.7796 14.6935 17.7818 14.5718 17.7734 14.4658C17.7687 14.4063 17.7582 14.3047 17.7197 14.2012L17.6709 14.0986L17.5996 13.999C17.5234 13.9094 17.4369 13.8495 17.373 13.8105C17.2875 13.7583 17.186 13.711 17.1045 13.6719C17.0602 13.6506 17.0157 13.6289 16.9688 13.6055C16.8377 13.5403 16.4551 13.3518 16.0752 13.1689C15.7096 12.993 15.3064 12.8026 15.1602 12.748C15.0523 12.7078 14.8414 12.6272 14.6113 12.6543C14.3301 12.6875 14.1299 12.8564 13.9922 13.0635C13.8528 13.2695 13.4477 13.7446 13.2578 13.9658C13.2567 13.9653 13.2551 13.9654 13.2539 13.9648C13.1971 13.9366 13.1255 13.9059 13.0605 13.8779C12.7156 13.7291 12.0559 13.4446 11.291 12.7637L11.29 12.7627C10.6428 12.189 10.1803 11.4801 10 11.1807C10.0904 11.0891 10.1889 10.9726 10.2656 10.8799C10.3148 10.8204 10.3588 10.7665 10.4004 10.7188C10.561 10.5343 10.6336 10.3817 10.7031 10.2373C10.7122 10.2185 10.7212 10.1997 10.7305 10.1807C10.9104 9.81171 10.8081 9.48842 10.708 9.28906C10.7071 9.28708 10.7 9.27228 10.6846 9.23633C10.669 9.20011 10.6491 9.15168 10.625 9.09375C10.5769 8.97805 10.5147 8.82785 10.4463 8.66113C10.2723 8.23743 10.053 7.70264 9.9209 7.4082V7.40723L9.82324 7.21777C9.71784 7.03904 9.58759 6.89586 9.42188 6.7998C9.20468 6.67405 8.99176 6.67227 8.90137 6.66992H8.90234C8.74418 6.6647 8.56235 6.66504 8.3916 6.66504Z"
                                        fill="#FFA502" stroke="#FFA502" stroke-linejoin="round" />
                                </svg>
                            </div>
                            <span class="text-black text-xs text-center">Whatsapp</span>
                        </button>
                        {{-- end item button share --}}
                        {{-- item button share --}}
                        <button type="button" onclick="shareToLinkedIn()"
                            class="w-1/5 flex flex-col items-center justify-center rounded-lg cursor-pointer"
                            data-twe-ripple-init data-twe-ripple-color="secondary">
                            <div class="mb-1 flex items-center justify-center w-11 h-11 bg-primary/10 rounded-full"
                                data-twe-modal-dismiss>
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M4.75 1.875C3.57639 1.875 2.625 2.82639 2.625 4C2.625 5.1736 3.57639 6.125 4.75 6.125C5.9236 6.125 6.875 5.1736 6.875 4C6.875 2.82639 5.9236 1.875 4.75 1.875Z"
                                        fill="#FFA502" />
                                    <path
                                        d="M2.75 7.875C2.68096 7.875 2.625 7.93096 2.625 8V21C2.625 21.069 2.68096 21.125 2.75 21.125H6.75C6.81904 21.125 6.875 21.069 6.875 21V8C6.875 7.93096 6.81904 7.875 6.75 7.875H2.75Z"
                                        fill="#FFA502" />
                                    <path
                                        d="M9.25 7.875C9.18096 7.875 9.125 7.93096 9.125 8V21C9.125 21.069 9.18096 21.125 9.25 21.125H13.25C13.319 21.125 13.375 21.069 13.375 21V14C13.375 13.5027 13.5725 13.0258 13.9242 12.6742C14.2758 12.3225 14.7527 12.125 15.25 12.125C15.7473 12.125 16.2242 12.3225 16.5758 12.6742C16.9275 13.0258 17.125 13.5027 17.125 14V21C17.125 21.069 17.181 21.125 17.25 21.125H21.25C21.319 21.125 21.375 21.069 21.375 21V12.3802C21.375 9.9535 19.2644 8.05499 16.8498 8.2745C16.1052 8.34219 15.369 8.52731 14.6815 8.82194L13.375 9.38186V8C13.375 7.93096 13.319 7.875 13.25 7.875H9.25Z"
                                        fill="#FFA502" />
                                </svg>

                            </div>
                            <span class="text-black text-xs text-center">Linkedin</span>
                        </button>
                        {{-- end item button share --}}
                        {{-- item button share --}}
                        <button type="button" onclick="copyLink()" id="btn-copy-link"
                            class="w-1/5 flex flex-col items-center justify-center rounded-lg cursor-pointer"
                            data-twe-ripple-init data-twe-ripple-color="secondary">
                            <div class="mb-1 flex items-center justify-center w-11 h-11 bg-primary/10 rounded-full"
                                data-twe-modal-dismiss>
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14 10L10 14" stroke="#FFA502" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M16 13L18 11C19.3807 9.61929 19.3807 7.38071 18 6V6C16.6193 4.61929 14.3807 4.61929 13 6L11 8M8 11L6 13C4.61929 14.3807 4.61929 16.6193 6 18V18C7.38071 19.3807 9.61929 19.3807 11 18L13 16"
                                        stroke="#FFA502" stroke-width="2" stroke-linecap="round" />
                                </svg>
                            </div>
                            <span class="text-black text-xs text-center">Salin Link</span>
                        </button>
                        {{-- end item button share --}}
                    </div>
                </div>
                <div class="flex items-center justify-end p-4">
                    <button type="button" class="btn btn-primary px-8" data-twe-modal-dismiss onclick="closeModal()">
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- End Modal Share 2--}}

</main>

@endsection




@section('javascript')
<script src="{{ asset('plugins/gliderjs/glider.min.js') }}"></script>
<script src="{{ asset('plugins/lazysizes/lazysizes.min.js') }}"></script>
<script src="{{ asset('plugins/apexcharts/apexcharts.min.js')}}"></script>
<script>
    // Initialize chart
    var chart = new ApexCharts(document.querySelector("#monthly-sales-card"), {
    series: [{
        name: 'Jumlah Transaksi',
        data: @json($chartTransactions),
    }],
    chart: {
        height: 350,
        type: 'area',
        toolbar: {
            show: false
        },
    },
    markers: {
        size: 5,
        hover: {
            size: 9
        }
    },
    grid: {
        borderColor: '#E8ECEE',
        strokeDashArray: 4,
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'straight'
    },
    xaxis: {
        type: 'datetime',
        categories: @json($chartCategories),
    },
    yaxis: {
        labels: {
            formatter: function (val) {
                return Math.round(val); // bulatkan ke integer
            }
        },
        min: 0,
        forceNiceScale: true
    },
    tooltip: {
        x: {
            format: 'dd/MM/yy HH:mm'
        },
    },
});
chart.render();


    // Handle period button clicks
    document.querySelectorAll('.period-btn').forEach(button => {
        button.addEventListener('click', function() {
            const period = this.dataset.period;
            
            // Update button styles
            document.querySelectorAll('.period-btn').forEach(btn => {
                btn.classList.remove('bg-primary', 'text-white');
                btn.classList.add('bg-gray-100', 'text-gray-600');
            });
            this.classList.add('bg-primary', 'text-white');
            this.classList.remove('bg-gray-100', 'text-gray-600');
            
            // Fetch new chart data
            fetch(`/affiliator/chart-data?period=${period}`)
                .then(response => response.json())
                .then(data => {
                    // Update chart
                    chart.updateOptions({
                        xaxis: {
                            categories: data.categories,
                            type: period === '1month' ? 'datetime' : 'category'
                        },
                        series: [{
                            data: data.transactions
                        }]
                    });
                })
                .catch(error => console.error('Error:', error));
        });
    });
</script>
<script>
    function copyAffiliateLink() {
        const link = "https://bacabuku.com/link/{{ $kodePengguna }}";
        navigator.clipboard.writeText(link).then(() => {
            // Show notification
            // const notif = document.createElement('div');
            // notif.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg text-sm';
            // notif.textContent = 'Link berhasil disalin!';
            // document.body.appendChild(notif);
            notyf.success('Link berhasil disalin!');
            // setTimeout(() => {
            //     document.body.removeChild(notif);
            // }, 2000);
        }).catch(err => {
            // console.error('Failed to copy: ', err);
            notyf.success('Link gagal disalin!');

        });
    }


</script>

<script>
    const bookRouteTemplate = "{{ route('book', ['kode_konten' => ':kode', 'slug' => ':slug']) }}";
</script>


<script>
    $(document).ready(function () {


       function terpopuler() {
                $.ajax({
                    "url": "{{ route('terpopuler.list') }}",
                    "type": "GET",
                    "data": {
                        'page': 1,
                        'limit': 80
                    }
                }).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 lastJudul =  m[i].judul.replace(/"/g, '');
                            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">
                                    <div class="img-box w-full text-center rounded-xl p-2 flex min-h-[215px] items-center justify-center">
                                        <a href="{{ url('book') }}/${kode_konten}/${slug}">
                                    <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" />
                                                                            </a>

                                    </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>
                                     <div class="flex gap-1 px-3 pb-3">
                                        <button onClick="handleShareClick(
                                    '${kode_konten}',
                                    '${lastJudul}',
                                    '${m[i].penerbit}',
                                    '${m[i].penulis}',
                                    '${m[i].harga_akhir}',
                                    '${slug}'
                                )" type="button" class="delete-book-btn2 flex flex-row items-center gap-1 justify-center font-medium rounded-lg w-full text-xs p-1 cursor-pointer border-solid border bg-primary/10 border-primary text-primary hover:bg-primary/20 transition-all ease-out duration-300" data-id="">
                                            <span>Bagikan</span>
                                        </button>
                                        <a href="{{ url('book') }}/${kode_konten}/${slug}" class="flex flex-none items-center justify-center w-[26px] h-[26px] text-xs bg-primary text-white rounded-md"><i class="fa fa-eye"></i></a>
                                    </div>
                                    </div>`;
                            } else {
                                html += `<div class="bg-white mx-2 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                                    <div class="img-box w-full text-center rounded-xl p-2 flex min-h-[215px] items-center justify-center">
                                        <a href="{{ url('book') }}/${kode_konten}/${slug}">
                                    <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" />
                                                                            </a>

                                    </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>
                                    <div class="flex gap-1 px-3 pb-3">
                                        <button onClick="handleShareClick(
                                    '${kode_konten}',
                                    '${lastJudul}',
                                    '${m[i].penerbit}',
                                    '${m[i].penulis}',
                                    '${m[i].harga}',
                                    '${slug}'
                                )" type="button" class="delete-book-btn2 flex flex-row items-center gap-2 justify-center font-medium rounded-md w-full text-xs p-1 cursor-pointer border-solid border bg-primary/10 border-primary text-primary hover:bg-primary/20 transition-all ease-out duration-300" data-id="">
                                            <span>Bagikan</span>
                                        </button>
                                        <a href="{{ url('book') }}/${kode_konten}/${slug}" class="flex flex-none items-center justify-center w-[26px] h-[26px] text-xs bg-primary text-white rounded-md"><i class="fa fa-eye"></i></a>
                                    </div>
                                    
                                    </div>`;

                            }

                             
                        }

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

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

            terpopuler()

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

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

              function initTooltips() {
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-twe-toggle="tooltip"]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new twe.Tooltip(tooltipTriggerEl);
            });
        }

        initTooltips();
        
        // Fungsi untuk inisialisasi ulang tombol modal
        function initModalTriggers() {
        $('.btn-modal-share').off('click').on('click', function () {
                // Tampilkan modal dengan TW Elements
                const modal = new twe.Modal(document.getElementById('modalShare'));
                modal.show();
            });
        }

        initModalTriggers();

        $('#tableRecomendation').on('draw.dt', function () {
            initTooltips();
            initModalTriggers();
        });

        });

    let formattedHarga = '';
    let currentAlias = '';
    let penerbit = "";
    let penulis = "";
    let judul = "";

    async function handleShareClick(kode_konten, judul, penerbit, penulis, harga, slugJudul) {
        const shareLoading = document.getElementById('shareLoading');
        const modal = document.getElementById('modalShare');
        const fullLinkInput = document.getElementById('fullLink');
        const urlTujuan = bookRouteTemplate
                .replace(':kode', encodeURIComponent(kode_konten))
                .replace(':slug', encodeURIComponent(slugJudul));
                
        // Format harga and store globally
        formattedHarga = new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0
        }).format(harga).replace('Rp', 'Rp.');
            formatpenerbit = penerbit;
            formatpenulis = penulis
            formatjudul = judul;

            // console.log(kode_konten, judul, penerbit, penulis, harga, slugJudul);
            


   
        // shareLoading.classList.remove('hidden');

        try {
            const response = await fetch('/shortLink/check', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    url_tujuan: urlTujuan,
                    kode_konten: kode_konten
                })
            });

            const result = await response.json();
            

            if (result.exists) {
                
                fullLinkInput.value = result.shortUrl;
                currentAlias = result.alias;
            } else {
                const newAlias = generateUniqueCode();
                const create = await fetch('/shortLink/add', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        url_tujuan: urlTujuan,
                        alias: newAlias,
                        kode_konten: kode_konten
                    })
                });

                const data = await create.json();
                if (data.code === 200) {
                    fullLinkInput.value = `https://bacabuku.info/${newAlias}`;
                    currentAlias = newAlias;
                    notyf.success('Link berhasil dibuat!');

                } else {
                    notyf.error(data.msg || 'Gagal membuat link!');
                    return;
                }
            }

            showModal(modal);
        } catch (err) {
            console.error(err);
            notyf.error('Terjadi kesalahan saat memproses.');
        } 
    }



    

    function generateShareMessage() {
        return `📚 Judul Buku: ${formatjudul}
🖋️ Penulis: ${formatpenulis}
🏢 Penerbit: ${formatpenerbit}
💰 Harga: ${formattedHarga}

📖 Lagi cari bacaan yang seru dan penuh manfaat?
Yuk, temukan ebook menarik lainnya di bacabuku.com
✨ Bikin hari-harimu lebih inspiratif dan penuh wawasan!

👇 Klik link ini untuk mulai baca sekarang:
https://bacabuku.info/${currentAlias}`;
    }

    function generateWhatsAppMessage() {
        return `📚 *Judul Buku:* ${formatjudul}
🖋️ *Penulis:* ${formatpenulis}
🏢 *Penerbit:* ${formatpenerbit}
💰 *Harga:* ${formattedHarga}

📖 Lagi cari bacaan yang seru dan penuh manfaat?
Yuk, temukan ebook menarik lainnya di *bacabuku.com*
✨ Bikin hari-harimu lebih inspiratif dan penuh wawasan!

👇 Klik link ini untuk mulai baca sekarang:
🔗 https://bacabuku.info/${currentAlias}`;
    }

    function shareToFacebook() {
        const url = document.getElementById('fullLink').value;
        const message = generateShareMessage();
        
        window.open(
            `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}&quote=${encodeURIComponent(message)}`,
            '_blank',
            'width=600,height=400'
        );
    }

    function shareToTwitter() {
        const url = document.getElementById('fullLink').value;
        const message = generateShareMessage();
        
        window.open(
            `https://twitter.com/intent/tweet?text=${encodeURIComponent(message)}`,
            '_blank',
            'width=600,height=400'
        );
    }

    function shareToWhatsApp() {
        const message = generateWhatsAppMessage();
        window.open(
            `https://api.whatsapp.com/send?text=${encodeURIComponent(message)}`, 
            '_blank'
        );
    }

    function shareToLinkedIn() {
        const url = document.getElementById('fullLink').value;
        const summary = `Judul: ${formatjudul}\nPenulis: ${formatpenulis}\nPenerbit: ${formatpenerbit}\nHarga: ${formattedHarga}`;
        
        window.open(
            `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(url)}` +
            `&title=${encodeURIComponent(formatjudul)}` +
            `&summary=${encodeURIComponent(summary)}` +
            `&source=${encodeURIComponent('bacabuku.com')}`,
            '_blank',
            'width=600,height=500'
        );
    }

    function showModal(modalElement) {
        modalElement.classList.remove('hidden');
        modalElement.querySelector('[data-twe-modal-dialog-ref]').classList.add('pointer-events-auto', 'opacity-100');
    }

    function closeModal() {
        const modal = document.getElementById('modalShare');
        modal.classList.add('hidden');
    }

    function generateUniqueCode(length = 8) {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        return Array.from({length}, () => characters.charAt(Math.floor(Math.random() * characters.length))).join('');
    }

    function copyLink() {
        const link = document.getElementById('fullLink').value;
        navigator.clipboard.writeText(link).then(() => {
            notyf.success('Link berhasil disalin!');
        }).catch(() => {
            notyf.error('Gagal menyalin link!');
        });
    }
</script>
@endsection