@extends('layouts.affiliatorlayout')

@section('head')
<link rel="stylesheet" href="{{ asset('plugins/datatables/datatables.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/apexcharts/apexcharts.css')}}" />
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>
@endsection

@section('content')
<main class="flex-1 p-4 lg:p-6 overflow-y-auto">
    {{-- 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">Performa Affiliator</a>
                </div>
            </li>
        </ol>
    </div>
    {{-- End Breadcrumb --}}


    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Total Buku Dibagikan -->
        <div class="bg-white rounded-xl shadow-custom p-6 transition-all duration-300 hover:shadow-lg">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-500 text-sm">Total Buku Dibagikan</p>
                    <h3 class="mt-1 text-xl font-bold text-gray-800 truncate">{{ $totalStatistik->count() }} Buku
                    </h3>
                </div>
                <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>
        </div>

        <!-- Total Pengunjung -->
        <div class="bg-white rounded-xl shadow-custom p-6 transition-all duration-300 hover:shadow-lg">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-500 text-sm">Total Pengunjung</p>
                    <h3 class="mt-1 text-xl font-bold text-gray-800 truncate">
                        {{ $mostClicked }} Pengunjung
                    </h3>
                </div>
                <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>
        </div>

        <!-- Total Transaksi -->
        <div class="bg-white rounded-xl shadow-custom p-6 transition-all duration-300 hover:shadow-lg">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-500 text-sm">Total Transaksi</p>
                    <h3 class="mt-1 text-xl font-bold text-gray-800 truncate">
                        {{ $transaksiTotal ?? 0 }} Transaksi
                    </h3>
                </div>
                <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>
        </div>
    </div>

    <div class="grid grid-cols-1 mt-5 lg:grid-cols-4 gap-6">

        <!-- Buku Penjualan Terbanyak -->
        <div class="bg-white rounded-xl shadow-custom p-4 transition-all duration-300 hover:shadow-lg">
            <div class="flex justify-between items-start gap-2">
                <div>
                    <p class="text-gray-500 text-sm">Penjualan Terbanyak</p>
                    @if(isset($transaksiTerbanyak) && $transaksiTerbanyak->jumlah_transaksi >= 1)
                    <h3 class="mt-1 font-medium text-black line-clamp-2">
                        {{ $transaksiTerbanyak->judul ?? "" }}
                    </h3>
                    <div class="mt-1 text-lg font-bold text-gray-800 truncate">
                        {{ $transaksiTerbanyak->jumlah_transaksi }} Penjualan
                    </div>
                    @else
                    <div class="flex items-center h-[48px]">
                        <p class="text-gray-400 text-sm">Belum ada data penjualan</p>
                    </div>
                    @endif
                </div>
                <div class="flex-none flex items-start justify-center w-14 rounded-lg">
                    @if(isset($transaksiTerbanyak) && $transaksiTerbanyak->jumlah_transaksi >= 1 &&
                    isset($transaksiTerbanyak->kode_konten))
                    <img src="https://kubuku.id/api/generic/showCover/{{ $transaksiTerbanyak->kode_konten }}"
                        alt="cover buku" class="rounded" onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                    @else
                    <img src="{{ asset('images/ph-bacabuku.webp') }}" alt="placeholder buku" class="rounded">
                    @endif
                </div>
            </div>
        </div>

        <!-- Buku Kunjungan Terbanyak -->
        <div class="bg-white rounded-xl shadow-custom p-4 transition-all duration-300 hover:shadow-lg">
            <div class="flex justify-between items-start gap-2">
                <div>
                    <p class="text-gray-500 text-sm">Kunjungan Terbanyak</p>
                    @if(isset($klikTerbanyak) && $klikTerbanyak->count >= 1)
                    <h3 class="mt-1 font-medium text-black line-clamp-2">
                        {{ $klikTerbanyak->judul ?? "" }}
                    </h3>
                    <div class="mt-1 text-lg font-bold text-gray-800 truncate">
                        {{ $klikTerbanyak->count }} Kunjungan
                    </div>
                    @else
                    <div class="flex items-center h-[48px]">
                        <p class="text-gray-400 text-sm">Belum ada data kunjungan</p>
                    </div>
                    @endif
                </div>
                <div class="flex-none flex items-start justify-center w-14 rounded-lg">
                    @if(isset($klikTerbanyak) && $klikTerbanyak->count >= 1 && isset($klikTerbanyak->kode_konten))
                    <img src="https://kubuku.id/api/generic/showCover/{{ $klikTerbanyak->kode_konten }}"
                        alt="cover buku" class="rounded" onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                    @else
                    <img src="{{ asset('images/ph-bacabuku.webp') }}" alt="placeholder buku" class="rounded">
                    @endif
                </div>
            </div>
        </div>

        <!-- Buku Penghasilan Terbesar -->
        <div class="bg-white rounded-xl shadow-custom p-4 transition-all duration-300 hover:shadow-lg">
            <div class="flex justify-between items-start gap-2">
                <div>
                    <p class="text-gray-500 text-sm">Buku Komisi Terbesar Akumulasi</p>
                    @if(isset($komisiPerAlias) && $komisiPerAlias->total_komisi > 0)
                    <h3 class="mt-1 font-medium text-black line-clamp-2">
                        {{ $komisiPerAlias->judul }}
                    </h3>
                    <div class="mt-1 text-lg font-bold text-gray-800 truncate">
                        Rp {{ number_format($komisiPerAlias->total_komisi, 0, ',', '.') }}
                    </div>
                    <h2 class="mt-1 font-medium text-black line-clamp-2">
                        {{ $komisiPerAlias->jumlah_transaksi }} Transaksi
                    </h2>
                    @else
                    <div class="flex items-center h-[48px]">
                        <p class="text-gray-400 text-sm">Belum ada data</p>
                    </div>
                    @endif
                </div>
                <div class="flex-none flex items-start justify-center w-14 rounded-lg text-indigo-600">
                    @if(isset($komisiPerAlias) && $komisiPerAlias->total_komisi > 0 &&
                    isset($komisiPerAlias->kode_konten))
                    <img src="https://kubuku.id/api/generic/showCover/{{ $komisiPerAlias->kode_konten }}"
                        alt="cover buku {{ $komisiPerAlias->judul }}" class="rounded"
                        onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                    @else
                    <img src="{{ asset('images/ph-bacabuku.webp') }}" alt="placeholder buku" class="rounded">
                    @endif
                </div>
            </div>
        </div>

        <!-- Buku Penghasilan Terbesar -->
        <div class="bg-white rounded-xl shadow-custom p-4 transition-all duration-300 hover:shadow-lg">
            <div class="flex justify-between items-start gap-2">
                <div>
                    <p class="text-gray-500 text-sm">Buku Komisi Terbesar Pertransaksi</p>
                    @if(isset($komisiPerTransaksi) && $komisiPerTransaksi->max_komisi > 0)
                    <h3 class="mt-1 font-medium text-black line-clamp-2">
                        {{ $komisiPerTransaksi->judul }}
                    </h3>
                    <div class="mt-1 text-lg font-bold text-gray-800 truncate">
                        Rp {{ number_format($komisiPerTransaksi->max_komisi, 0, ',', '.') }}
                    </div>
                    @else
                    <div class="flex items-center h-[48px]">
                        <p class="text-gray-400 text-sm">Belum ada data penghasilan</p>
                    </div>
                    @endif
                </div>
                <div class="flex-none flex items-start justify-center w-14 rounded-lg text-indigo-600">
                    @if(isset($komisiPerTransaksi) && $komisiPerTransaksi->max_komisi > 0 &&
                    isset($komisiPerTransaksi->kode_konten))
                    <img src="https://kubuku.id/api/generic/showCover/{{ $komisiPerTransaksi->kode_konten }}"
                        alt="cover buku {{ $komisiPerTransaksi->judul }}" class="rounded"
                        onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                    @else
                    <img src="{{ asset('images/ph-bacabuku.webp') }}" alt="placeholder buku" class="rounded">
                    @endif
                </div>
            </div>
        </div>
    </div>


    {{-- <div class="flex flex-col lg:flex-row gap-6 mb-6">
        <div class="lg:w-6/12">
            <div
                class="lg:min-h-[245px] relative flex items-center justify-between bg-gradient-to-r from-green-500 to-cyan-500 p-6 rounded-xl">
                <div class="w-full flex justify-between items-center">
                    <div>
                        <p class="text-white">Saldo Komisi</p>
                        <h3 class="mt-1 text-3xl 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-8 w-32 lg:w-44">
                </div>
            </div>
        </div>
        <div class="lg:w-6/12">
            <div
                class="lg:min-h-[245px] relative flex items-center justify-between bg-gradient-to-r from-blue-500 to-cyan-500 p-6 rounded-xl">
                <div class="w-full flex justify-between items-center">
                    <div>
                        <p class="text-white">Komisi Dalam Proses</p>
                        <h3 class="mt-1 text-3xl font-bold text-white truncate">
                            Rp {{ number_format($komisiSedangProses,0,',','.') }}
                        </h3>
                    </div>
                    <img src="{{ asset('images/saldo-dana.webp') }}" alt="saldo dana"
                        class="absolute right-2 top-8 w-32 lg:w-44">
                </div>
            </div>



        </div>
    </div> --}}


    {{-- Stats Cards --}}
    {{-- <div class="grid grid-cols-1md:grid-cols-2 lg:grid-cols-2 gap-6 mb-6">
        <div class="stats-card shadow-custom p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500">Total Link yang Dibagikan</p>
                    <h3 class="text-2xl font-bold text-gray-800 mt-1">{{ $totalStats->count() }}</h3>
                </div>
                <div
                    class="flex-none w-12 h-12 flex items-center justify-center bg-primary/10 text-primary rounded-full">
                    <i class="fas fa-link text-xl"></i>
                </div>
            </div>
        </div>

        <div class="stats-card shadow-custom p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500">Komisi Terklaim</p>
                    <h3 class="text-2xl font-bold text-gray-800 mt-1">Rp {{ number_format($komisiTerklaim, 0, ',',
                        '.') }}
                    </h3>
                </div>
                <div
                    class="flex-none w-12 h-12 flex items-center justify-center bg-blue-100 p-3 text-blue-600 rounded-full">
                    <i class="fas fa-money-bill-wave text-xl"></i>
                </div>
            </div>
        </div>

    </div> --}}


    <div class="my-6 py-6 bg-white rounded-xl shadow-custom relative overflow-x-auto">
        <div class="px-6 pb-8">
            <h2 class="text-lg font-semibold text-gray-800">Performa per Buku</h2>
        </div>
        <table id="tablePerform" class="hover w-full text-sm text-left text-gray-500">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                <tr>
                    <th>Detail Konten</th>
                    <th>Link Pendek</th>
                    <th>Jumlah Klik</th>
                    <th>Jumlah Transaksi</th>
                    <th>Jumlah Komisi</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-custom">
            <div class="p-6">
                <h2 class="text-lg font-semibold text-gray-800">5 Link Terpopuler</h2>
            </div>
            <div class="px-6 pb-6 grid grid-cols-1 gap-4">
                @forelse($totalStats->sortByDesc('count')->take(5) as $link)
                <a href="https://bacabuku.com/info/{{ $link->alias }}" target="_blank" title="{{ $link->judul_konten }}"
                    data-twe-ripple-init data-twe-ripple-color="secondary">
                    <div
                        class="p-4 bg-white card rounded-lg border border-gray-100 cursor-pointer hover:shadow-md transition duration-300 ease-in-out">
                        <div class="flex gap-4">
                            <!-- Book Cover -->
                            <div class="flex-shrink-0">
                                <img class="w-20 rounded-md"
                                    src="https://kubuku.id/api/generic/showCover/{{ $link->kode_konten }}"
                                    alt="Cover {{ $link->judul_konten }}"
                                    onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                            </div>
                            <!-- Book Details -->
                            <div class="flex-1 min-w-0">
                                <!-- Title Row -->
                                <div>
                                    <div class="flex items-start justify-between gap-2">
                                        <h3 class="text-black font-semibold line-clamp-2"
                                            title="{{ $link->judul_konten }}">
                                            {{ $link->judul_konten }}
                                        </h3>
                                        <span
                                            class="flex-shrink-0 px-2 py-1 text-xs font-bold rounded-full bg-green-100 text-green-800">
                                            Top {{ $loop->iteration }}
                                        </span>
                                    </div>
                                </div>
                                <!-- Author & Publisher -->
                                <div>
                                    <div class="text-sm text-gray-500">
                                        {{ $link->penulis }}
                                    </div>
                                    <div class="text-sm text-gray-500">
                                        {{ $link->penerbit }}
                                    </div>
                                </div>
                                <!-- Price -->
                                <div class="text-sm font-medium text-primary">
                                    Rp {{ number_format($link->harga, 0, ',', '.') }}
                                </div>
                                <!-- Click Count -->
                                <div class="mt-2 flex items-center text-xs text-gray-500">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                    {{ $link->count }} klik
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                @empty
                <div class="p-6 text-center text-sm text-gray-500 bg-gray-50 rounded-lg">
                    Tidak ada data tersedia
                </div>
                @endforelse
            </div>

        </div>

        <div class="bg-white rounded-xl shadow-custom">
            <div class="p-6">
                <h2 class="text-lg font-semibold text-gray-800">Top Buku yang Paling Banyak Dilihat</h2>
            </div>
            <div class="p-6">
                <div id="chart-click"></div>
            </div>
        </div>
    </div>
</main>


{{-- 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">
    <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 border-none bg-white bg-clip-padding text-current shadow-lg outline-none">
            <!-- Modal header -->
            <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">
                    <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>

            <!-- Modal body -->
            <div id="modalContent" class="relative p-6 flex flex-col justify-center">
                <div class="my-4 w-full flex items-start gap-2">
                    {{-- item button share --}}
                    <div id="share-facebook"
                        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>
                    </div>
                    {{-- end item button share --}}
                    {{-- item button share --}}
                    <div id="share-twitter"
                        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>
                    </div>
                    {{-- end item button share --}}
                    {{-- item button share --}}
                    <div id="share-whatsapp"
                        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>
                    </div>
                    {{-- end item button share --}}
                    {{-- item button share --}}
                    <div id="share-linkedin"
                        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>
                    </div>
                    {{-- end item button share --}}
                    {{-- item button share --}}
                    <div 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>
                    </div>
                    {{-- 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>
                    Tutup
                </button>
            </div>
        </div>
    </div>
</div>
{{-- End Modal Share --}}
@endsection

@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>

{{-- <script src=" {{ asset('js/tw-elements.umd.min.js') }}"></script> --}}
<script src="{{ asset('plugins/datatables/datatables.min.js')}}"></script>
<script src="{{ asset('plugins/apexcharts/apexcharts.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<script>
    // Ensure jQuery document ready wraps all jQuery code
    $(document).ready(function() {
        // Initialize DataTable only if the element exists
        if ($('#tablePerform').length) {
            const table = $('#tablePerform').DataTable({
                processing: true,
                serverSide: false,
                scrollX: true,
                ajax: {
                    url: "{{ route('data.dataPerforma') }}",
                    type: 'GET',
                    dataSrc: 'data',
                },
                language: {
                    decimal: "",
                    emptyTable: "Tidak ada data yang tersedia",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                    infoFiltered: "(disaring dari _MAX_ total data)",
                    thousands: ",",
                    lengthMenu: "Tampilkan _MENU_ data",
                    loadingRecords: "Memuat...",
                    processing: "Memproses...",
                    search: "Cari:",
                    zeroRecords: "Tidak ditemukan data yang cocok",
                },
                columns: [
                    {
                        data: null,
                        render: function (data, type, row) {
                            return `
                                <div class="flex items-center gap-2">
                                    <div class="flex-none w-20 h-20 bg-cover bg-no-repeat bg-top rounded-lg" 
                                        style="background-image: url('https://kubuku.id/api/generic/showCover/${row.kode_konten}')"
                                        onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                                    </div>
                                    <div class="text-left">
                                        <h3 class="text-black text-sm font-medium">${row.judul_konten || 'Judul tidak tersedia'}</h3>
                                        <div class="text-xs text-gray-500">${row.penulis || 'Penulis tidak tersedia'}</div>
                                        <div class="text-xs text-gray-500">${row.penerbit || 'Penerbit tidak tersedia'}</div>
                                        <div class="text-xs text-gray-500">Rp. ${row.harga || '0'}</div>
                                    </div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'alias',
                        render: function(data, type, row) {
                            const alias = data || '';
                            const url = row.url ? row.url : `https://bacabuku.info/${alias}`;
                            return `
                                <div class="flex items-center gap-1">
                                    <a href="${url}?alias=${alias}" target="_blank" class="text-primary hover:text-primary-dark">
                                        https://bacabuku.info/${alias}
                                    </a>
                                </div>
                            `;
                        }
                    },
                    { 
                        data: 'count',
                        render: function(data) {
                            return data || '0';
                        }
                    },
                    { 
                        data: 'jumlah_transaksi',
                        render: function(data) {
                            return data || '0';
                        }
                    },
                    {
                        data: 'jumlah_komisi',
                        render: function(data) {
                            return data ? `Rp${parseInt(data).toLocaleString('id-ID')}` : 'Rp0';
                        }
                    },
                    {
                        data: null,
                        render: function(data, type, row) {
                            const judul = row.judul_konten ? row.judul_konten.replace(/'/g, "\\'") : '';
                            const penulis = row.penulis ? row.penulis.replace(/'/g, "\\'") : '';
                            const penerbit = row.penerbit ? row.penerbit.replace(/'/g, "\\'") : '';
                            const harga = row.harga ? parseInt(row.harga).toLocaleString('id-ID') : '0';
                            const alias = row.alias ? row.alias : '';
                          ;
                            const detailUrl = `/affiliator/transaksiAffiliator/${encodeURIComponent(alias)}`;
                            
                            
                           

                            return `
                                    <div class="flex items-end gap-3">
                                        <button
                                            type="button"
                                            class="btn-modal-share w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-200 text-primary-600 transition-all duration-200 ease-in-out"
                                            onclick="shareLinkPerforma(
                                                '${alias}',
                                                '${judul}',
                                                '${penulis}',
                                                '${penerbit}',
                                                '${harga}'
                                            )"
                                        >
                                        <div data-twe-toggle="tooltip" title="Bagikan">
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g clip-path="url(#clip0_5803_8)">
                                                    <path d="M6.47338 7.82581C6.04242 6.96555 5.15267 6.375 4.125 6.375C2.67525 6.375 1.5 7.55025 1.5 9C1.5 10.4497 2.67525 11.625 4.125 11.625C5.15267 11.625 6.04242 11.0344 6.47338 10.1742M6.47338 7.82581C6.65039 8.17912 6.75 8.57793 6.75 9C6.75 9.42207 6.65039 9.82088 6.47338 10.1742M6.47338 7.82581L11.5266 5.29919M6.47338 10.1742L11.5266 12.7008M11.5266 5.29919C11.9576 6.15945 12.8473 6.75 13.875 6.75C15.3247 6.75 16.5 5.57475 16.5 4.125C16.5 2.67525 15.3247 1.5 13.875 1.5C12.4253 1.5 11.25 2.67525 11.25 4.125C11.25 4.54707 11.3496 4.94588 11.5266 5.29919ZM11.5266 12.7008C11.3496 13.0541 11.25 13.4529 11.25 13.875C11.25 15.3247 12.4253 16.5 13.875 16.5C15.3247 16.5 16.5 15.3247 16.5 13.875C16.5 12.4253 15.3247 11.25 13.875 11.25C12.8473 11.25 11.9576 11.8406 11.5266 12.7008Z" stroke="#28303F" stroke-width="1.5" stroke-linecap="round"/>
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_5803_8">
                                                        <rect width="18" height="18" fill="white"/>
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                        </div>
                                        </button>

                                        <a href="${detailUrl}"
                                            class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-200 text-primary-600 transition-all duration-200 ease-in-out" data-twe-toggle="tooltip" title="Lihat Detail"
                                        >
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M9 3.75C4.91682 3.75 2.64832 6.92569 1.84165 8.33729C1.67616 8.62689 1.59342 8.77169 1.60253 8.9877C1.61164 9.20371 1.70893 9.34485 1.9035 9.62714C2.86365 11.0202 5.47042 14.25 9 14.25C12.5296 14.25 15.1364 11.0202 16.0965 9.62714C16.2911 9.34485 16.3884 9.20371 16.3975 8.9877C16.4066 8.77169 16.3238 8.62689 16.1583 8.33729C15.3517 6.92569 13.0832 3.75 9 3.75Z" stroke="#28303F" stroke-width="1.5"/>
                                                <circle cx="9" cy="9" r="3" fill="#28303F"/>
                                            </svg>
                                        </a>
                                    </div>
                                `;

                        }
                    }
                ],
                searching: true,
                order: [[0, 'asc']],
            });
        }

        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 () {
                // const nama = $(this).data('nama');
                // $('#modalContent').text(`Ini detail untuk ${nama}`);

                // Tampilkan modal dengan TW Elements
                const modal = new twe.Modal(document.getElementById('modalShare'));
                modal.show();
            });
        }

        initModalTriggers();

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

        // Initialize ApexCharts only if the element exists
        if (document.querySelector("#chart-click")) {
    try {
        var options = {
            series: @json($chartData['series']),
            labels: @json($chartData['labels']),
            chart: {
                type: 'donut',
                height: 500
            },
            legend: {
                position: 'bottom'
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 300
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }],
            plotOptions: {
                pie: {
                    donut: {
                        labels: {
                            show: true,
                            total: {
                                show: true,
                                label: 'Total Dilihat',
                                formatter: function(w) {
                                    return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                                }
                            },
                        },
                    }
                }
            },
            noData: {
                text: "Tidak ada data untuk ditampilkan"
            }
        };

        // Cek apakah ada data valid
        if (options.series && options.series.length > 0 && options.labels && options.labels.length > 0) {
            var chart = new ApexCharts(document.querySelector("#chart-click"), options);
            chart.render();
        } else {
            // Fallback jika kosong
            document.querySelector("#chart-click").innerHTML = `
                <div class="p-6 text-center text-gray-500 bg-gray-50 rounded-lg">
                    Tidak ada data untuk ditampilkan
                </div>
            `;
        }
    } catch (error) {
        console.error("Error saat merender chart:", error);
    }
}

    });

    // Global function for sharing
    window.shareLinkPerforma = function(alias, judul, penulis, penerbit, hargaFormatted) {
    const currentShareUrl = `https://bacabuku.com/info/${alias}`;
    const sinopsis = "";
    // const modal = document.getElementById('modalShare');
    
    // // Show modal if it exists
    // if (modal) {
    //     showModal(modal);
    // }

    // const modal = document.getElementById('modalShare');
    // if (modal) {
    //     modal.classList.remove('hidden');
    //     modal.querySelector('[data-twe-modal-dialog-ref]').classList.add('pointer-events-auto', 'opacity-100');        // modal.classList.add('flex');
    // }

    // Enhanced share messages with sinopsis
    const defaultMessage = `📚 Judul Buku: ${judul}
🖋️ Penulis: ${penulis}
🏢 Penerbit: ${penerbit}
💰 Harga: Rp. ${hargaFormatted}

📖 ${sinopsis || 'Buku menarik dengan konten yang bermanfaat, baca buku? ya bacabuku.com'}

👇 Klik link ini untuk mulai baca sekarang:`;

    const whatsappMessage = `📚 *Judul Buku:* ${judul}
🖋️ *Penulis:* ${penulis}
🏢 *Penerbit:* ${penerbit}
💰 *Harga:* Rp. ${hargaFormatted}

📖 ${sinopsis || 'Buku menarik dengan konten yang bermanfaat, baca buku? ya bacabuku.com'}

🔗 Baca sekarang: ${currentShareUrl}`;

    const linkedInSummary = `Judul: ${judul}
Penulis: ${penulis}
Penerbit: ${penerbit}
Harga: Rp. ${hargaFormatted}

 ${sinopsis || 'Buku menarik dengan konten yang bermanfaat, baca buku? ya bacabuku.com'}`;

    // Share Facebook
    if (document.getElementById('share-facebook')) {
        document.getElementById('share-facebook').onclick = () => {
            window.open(
                `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentShareUrl)}&quote=${encodeURIComponent(defaultMessage)}`,
                '_blank',
                'width=600,height=400'
            );
        };
    }

    // Share Twitter (X)
    if (document.getElementById('share-twitter')) {
        document.getElementById('share-twitter').onclick = () => {
            window.open(
                `https://twitter.com/intent/tweet?text=${encodeURIComponent(`${defaultMessage}\n${currentShareUrl}`)}`,
                '_blank',
                'width=600,height=400'
            );
        };
    }

    // Share WhatsApp
    if (document.getElementById('share-whatsappP')) {
        document.getElementById('share-whatsappP').onclick = () => {
            window.open(
                `https://api.whatsapp.com/send?text=${encodeURIComponent(whatsappMessage)}`,
                '_blank'
            );
        };
    }

    // Share LinkedIn
    if (document.getElementById('share-linkedin')) {
        document.getElementById('share-linkedin').onclick = () => {
            window.open(
                `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(currentShareUrl)}&title=${encodeURIComponent(judul)}&summary=${encodeURIComponent(linkedInSummary)}&source=${encodeURIComponent("bacabuku.com")}`,
                '_blank',
                'width=600,height=500'
            );
        };
    }

    // Copy to Clipboard
    if (document.getElementById('btn-copy-link')) {
        document.getElementById('btn-copy-link').onclick = () => {
            navigator.clipboard.writeText(currentShareUrl).then(() => {
                if (typeof notyf !== 'undefined') {
                    notyf.success('Link berhasil disalin!');
                } else {
                    alert('Link berhasil disalin!');
                }
            }).catch(() => {
                if (typeof notyf !== 'undefined') {
                    notyf.error('Gagal menyalin link');
                } else {
                    alert('Gagal menyalin link');
                }
            });
        };
    }
};

    // Clipboard initialization
    if (document.querySelector('.copy-btn')) {
        const clipboard = new ClipboardJS('.copy-btn', {
            text: function(trigger) {
                return trigger.getAttribute('data-clipboard-text');
            }
        });

        clipboard.on('success', function(e) {
            const trigger = e.trigger;
            trigger.innerHTML = '<i class="fas fa-check"></i>';
            trigger.classList.add('copied');
            setTimeout(() => {
                trigger.innerHTML = '<i class="far fa-copy"></i>';
                trigger.classList.remove('copied');
            }, 1000);
        });

        clipboard.on('error', function(e) {
            alert('Gagal menyalin teks. Silakan salin manual.');
        });
    }
    


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






</script>
@endsection