@extends('layouts.app')

@section('content')
<div class="lg:container pt-16 pb-32 lg:pb-0 mx-4 hidden md:block">
    <div class="flex justify-between items-start mt-8 text-gray-700" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
            <li class="inline-flex items-center">
                <a href="{{ route('beranda') }}"
                    class="inline-flex items-center text-xs text-primary hover:text-primary-dark">Beranda</a>
            </li>
            <li aria-current="page">
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <span class="ms-1 text-xs text-black md:ms-2">Penulis</span>
                </div>
            </li>
        </ol>

        <!-- TOMBOL BAGIKAN -->
        <div class="flex items-center gap-4 mt-2 md:mt-0">
            @if (Auth::guest())
            <div id="primary"
                class="group flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 border border-primary text-primary hover:bg-gray-100 cursor-pointer transition duration-300"
                onclick="shareLink()" data-twe-ripple-init data-twe-ripple-color="light" data-twe-toggle="modal"
                data-twe-target="#modalShare">

                <i class="fas fa-share-nodes text-lg"></i>
            </div>
            @else
            <div id="primary"
                class="group flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 border border-primary text-primary hover:bg-gray-100 cursor-pointer transition duration-300"
                onclick="handleShareClick()" data-twe-ripple-init data-twe-ripple-color="light">

                <i class="fas fa-share-nodes text-lg"></i>
                <span id="shareLoading" class="hidden absolute ml-2">
                    <i class="fas fa-spinner fa-spin text-sm"></i>
                </span>
            </div>
            @endif
        </div>
    </div>
</div>

<div class="mt-20 md:mt-4 h-24 md:h-56 w-full bg-primary overflow-hidden relative">
    <div class="container mx-auto pt-8 lg:pt-40 relative z-10">
        <h1 class="text-black-custom text-3xl font-semibold">Penulis</h1>
    </div>
    <div class="absolute left-[-15%] top-[-88%] hidden lg:block">
        <img src="images/bg-dots.webp" alt="person" />
    </div>
    <div class="absolute right-[-15%] top-[-88%] hidden lg:block">
        <img src="images/bg-dots.webp" alt="person" />
    </div>
</div>

<section id="list-penulis" class="mt-8 mx-4 flex flex-col gap-y-4">
    <div class="sticky top-20 bg-white p-4">
        <ul class="flex flex-wrap items-center justify-center gap-6">
            @foreach ($letters as $letter)
            <li>
                <a href="?letter={{ $letter }}"
                    class="{{ $selectedLetter == $letter ? 'text-primary font-bold' : 'text-gray-700' }}">
                    {{ $letter }}
                </a>
            </li>
            @endforeach
        </ul>
    </div>

    <div class="lg:container">
        <div id="{{ $selectedLetter }}" class="flex flex-row items-center justify-center gap-4 mb-4">
            <div class="w-2/12 text-center">
                <h3 class="font-semibold text-black text-[4rem]">{{ $selectedLetter }}</h3>
            </div>
            <div class="w-10/12 md:w-8/12">
                @if($penulis->count() > 0)
                <div class="p-4 grid grid-cols-1 md:grid-cols-2 shadow-custom rounded-xl gap-x-6 gap-y-4">
                    @foreach ($penulis as $item)
                    @php
                    $slugpenulis = \Illuminate\Support\Str::slug($item->penulis);
                    @endphp
                    <div>
                        <a href="{{ url('list/penulis/' . $item->kode_penulis . '/' . $slugpenulis) }}"
                            class="font-semibold text-black line-clamp-2 text-base cursor-pointer hover:text-primary transition ease-in-out duration-150">
                            {{ $item->penulis }}
                        </a>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="p-8 text-center text-gray-500">
                    Tidak ada penulis yang ditemukan untuk huruf {{ $selectedLetter }}
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Modal Share -->
</section>


{{-- 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 border-none bg-white bg-clip-padding text-current shadow-4 outline-none">
            <div class="flex flex-shrink-0 items-center justify-between rounded-t-2xl p-4">
                <!-- Modal title -->
                <h5 class="text-xl font-semibold leading-normal text-black" id="modalShareTitle">Bagikan</h5>
                <!-- Close button -->
                <button type="button"
                    class="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>

            <div class="flex items-center justify-center p-8">
                <div class="flex gap-4">
                    <!-- Tombol share dengan logo saja -->
                    <button id="share-facebook" class="btn btn-social btn-facebook" title="Share on Facebook">
                        <i class="fab fa-facebook-f"></i>
                    </button>
                    <button id="share-twitter" class="btn btn-social btn-twitter" title="Share on Twitter">
                        <i class="fab fa-twitter"></i>
                    </button>
                    <button id="share-whatsapp" class="btn btn-social btn-whatsapp" title="Share on WhatsApp">
                        <i class="fab fa-whatsapp"></i>
                    </button>
                    <button id="share-linkedin" class="btn btn-social btn-linkedin" title="Share on LinkedIn">
                        <i class="fab fa-linkedin-in"></i>
                    </button>
                    <button type="button" onclick="copyLink2()"
                        class="btn btn-social w-[50px] h-[10px] bg-gray-200 rounded-full flex items-center justify-center">
                        <i class="fa-solid fa-link text-black"></i>
                    </button>
                </div>
            </div>

            <div
                class="flex gap-2 flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t border-t-gray-100 p-4">
                <button type="button"
                    class="font-semibold h-10 rounded-xl px-8 py-2.5 text-sm cursor-pointer border-solid border border-primary text-primary hover:bg-gray-100 transition-all ease-out duration-300"
                    data-twe-modal-dismiss data-twe-ripple-init data-twe-ripple-color="light">Kembali</button>
            </div>
        </div>
    </div>
</div>
{{-- End Modal Share --}}

<!-- 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="modalShare2" tabindex="-1" aria-labelledby="modalShare2Title" 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]:max-w-[500px]">
        <div class="pointer-events-auto relative flex w-full flex-col rounded-2xl bg-white shadow-4">
            <div class="flex items-center justify-between p-4">
                <h5 class="text-xl font-semibold text-black">Bagikan</h5>
                <button type="button" class="text-neutral-500 hover:text-neutral-800" onclick="closeModal()">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-6 w-6" viewBox="0 0 24 24">
                        <path d="M6 18L18 6M6 6l12 12" stroke="currentColor" stroke-linecap="round"
                            stroke-linejoin="round" stroke-width="1.5" />
                    </svg>
                </button>
            </div>
            <div class="p-4">
                <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="flex items-center justify-center p-8">
                <div class="flex gap-4">
                    <button onclick="shareToFacebook()" class="btn btn-social btn-facebook" title="Share on Facebook">
                        <i class="fab fa-facebook-f"></i>
                    </button>
                    <button onclick="shareToTwitter()" class="btn btn-social btn-twitter" title="Share on Twitter">
                        <i class="fab fa-twitter"></i>
                    </button>
                    <button onclick="shareToWhatsApp()" class="btn btn-social btn-whatsapp" title="Share on WhatsApp">
                        <i class="fab fa-whatsapp"></i>
                    </button>
                    {{-- <button onclick="shareToLinkedIn()" class="btn btn-social btn-linkedin" title="Share on LinkedIn">
                        <i class="fab fa-linkedin-in"></i>
                    </button> --}}
                    <button type="button" onclick="copyLink()"
                        class="btn btn-social w-[50px] h-[10px] bg-gray-200 rounded-full flex items-center justify-center">
                        <i class="fa-solid fa-link text-black"></i>
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>
{{-- End Modal Share 2--}}


@endsection

@section('javascript')
<script>
    async function handleShareClick() {
            const shareLoading = document.getElementById('shareLoading');
            const modal = document.getElementById('modalShare2');
            const fullLinkInput = document.getElementById('fullLink');

            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: window.location.href,
                    })
                });

                const result = await response.json();

                if (result.exists) {
                    fullLinkInput.value = result.shortUrl;
                } 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: window.location.href,
                            alias: newAlias
                        })
                    });

                    const data = await create.json();
                    if (data.code === 200) {
                        fullLinkInput.value = `https://bacabuku.info/${newAlias}`;
                    } else {
                        notifikasi.error(data.msg || 'Gagal membuat link!');
                        return;
                    }
                }

                showModal(modal);
            } catch (err) {
                console.error(err);
                notifikasi.error('Terjadi kesalahan saat memproses.');
            } finally {
                shareLoading.classList.add('hidden');
            }
        }

        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('modalShare2');
            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(() => {
                notifikasi.success('Link berhasil disalin!');
            }).catch(() => {
                notifikasi.error('Gagal menyalin link!');
            });
        }

        function copyLink2() {
            const link = window.location.href;
            navigator.clipboard.writeText(link).then(() => {
                notifikasi.success('Link berhasil disalin!');
            }).catch(() => {
                notifikasi.error('Gagal menyalin link!');
            });
        }
        
        
        function shareToFacebook() {
    const url = document.getElementById('fullLink').value;
    
    window.open(
        `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
        '_blank',
        'width=600,height=400'
    );
}
        

function shareToTwitter() {
    const url = document.getElementById('fullLink').value;
    const message = `
📖 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:`;

    window.open(
        `https://twitter.com/intent/tweet?text=${encodeURIComponent(message)}&url=${encodeURIComponent(url)}`,
        '_blank',
        'width=600,height=400'
    );
}
        
    function shareToWhatsApp() {
    const url = document.getElementById('fullLink').value;
    const message = `
📖 Lagi cari bacaan yang seru dan penuh manfaat?
Yuk, temukan ebook menarik lainnya di *bacabuku(dot)com*.
✨ Bikin hari-harimu lebih inspiratif dan penuh wawasan!

👇 Klik link ini untuk mulai baca sekarang:
🔗 ${url}`;

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

function shareToLinkedIn() {
    const url = document.getElementById('fullLink').value;
    const summary = encodeURIComponent(   
        `Temukan ebook menarik lainnya di bacabuku.com`
    );
    const source = encodeURIComponent("bacabuku.com");

    window.open(
        `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(url)}` +
        `&summary=${summary}` +
        `&source=${source}`,
        '_blank',
        'width=600,height=500'
    );
}

</script>


{{-- @section('javascript') --}}
{{-- <script src="js/jquery-3.4.1.min.js"></script> --}}
{{-- <script src="js/main.js"></script> --}}
@endsection