<x-app-layout>
    <div class="py-8 bg-gray-100 min-h-screen">
        <div class="max-w-6xl mx-auto px-4">

            <div class="grid lg:grid-cols-2 gap-8">

                <!-- ===================== FORM ===================== -->

                <div class="bg-white rounded-2xl shadow-xl p-8">

                    <h2 class="text-3xl font-bold text-indigo-700">
                        Swadesh News Photocard Generator
                    </h2>

                    <p class="text-gray-500 mb-8">
                        Create JPG News Card
                    </p>

                    <div class="space-y-5">

                        <div>
                            <label class="font-semibold text-gray-700">
                                News Image
                            </label>

                            <input
                                type="file"
                                id="image"
                                accept="image/*"
                                class="mt-2 w-full border rounded-lg p-3"
                                onchange="previewImage(event)">
                        </div>

                        <div>
                            <label class="font-semibold text-gray-700">
                                News Headline
                            </label>

                            <input
                                type="text"
                                id="title"
                                placeholder="Enter News Headline"
                                class="mt-2 w-full rounded-lg border-gray-300"
                                onkeyup="previewText()">
                        </div>

                        <div>
                            <label class="font-semibold text-gray-700">
                                Category
                            </label>
                                <input
                                type="text"
                                id="category"
                                placeholder="Enter News Headline"
                                class="mt-2 w-full rounded-lg border-gray-300"
                                onkeyup="previewText()">
                        </div>

                        <div>

                            <label class="font-semibold text-gray-700">
                                Details
                            </label>

                            <textarea
                                id="details"
                                rows="6"
                                class="mt-2 w-full rounded-lg border-gray-300"
                                onkeyup="previewText()"></textarea>

                        </div>

                        <div>

                            <label class="font-semibold text-gray-700">
                                Footer
                            </label>

                            <input
                                id="footerInput"
                                value="বিস্তারিত কমেন্টে"
                                class="mt-2 w-full rounded-lg border-gray-300"
                                onkeyup="previewText()">

                        </div>

                        <button
                            onclick="downloadCard()"
                            class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-4 rounded-xl text-lg font-bold">

                            Download JPG

                        </button>

                    </div>

                </div>



                <!-- ================= PROFESSIONAL NEWS CARD ================= -->

            <div id="newsCard"
            class="bg-white overflow-hidden shadow-2xl w-full">


                <!-- Header -->

                <div class="bg-gradient-to-r from-red-700 to-red-500 
                            text-white text-center py-5">

                    <h2 class="text-4xl font-extrabold tracking-wide">
                        SWADESH JOURNAL
                    </h2>

                    <p class="text-lg">
                        www.swadesh-journal.com
                    </p>

                </div>



                <!-- Image Section -->

                <div class="relative">


                    <img id="cardImage"

                    src="https://placehold.co/1200x700"

                    class="w-full h-[450px] object-cover">


                    <!-- Watermark -->

                    <div class="absolute inset-0 flex items-center justify-center">

                        <h1

                        class="text-red-600 text-5xl font-bold opacity-50
                        rotate-[-25deg] tracking-widest">

                            SWADESH JOURNAL

                        </h1>

                    </div>

                </div>



                <!-- News Content -->

                <div class="p-8">


                    <span id="cardCategory">

                        Education

                    </span>



                    <h1 id="cardTitle"

                    class="text-4xl font-extrabold mt-5 text-gray-900">

                        News Headline

                    </h1>
                    <div class="border-l-8 border-red-600 mt-5 pl-5">

                        <p id="cardDetails"

                        class="text-xl leading-9 text-gray-700">

                            News Details...

                        </p>

                    </div>
                </div>
                <!-- Footer -->
                <div class="bg-black text-white text-center py-5">
                    <h3 class="text-2xl font-bold">
                        <span id="footer">
                            বিস্তারিত কমেন্টে
                        </span>

                    </h3>
                </div>



            </div>

            </div>

        </div>
    </div>

    <!-- html2canvas -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>

    // =============================
    // Image Preview
    // =============================

    function previewImage(event) {

        let reader = new FileReader();

        reader.onload = function () {

            document.getElementById('cardImage').src = reader.result;

        }

        reader.readAsDataURL(event.target.files[0]);

    }


    // =============================
    // Live Text Preview
    // =============================

    function previewText() {

        let title = document.getElementById('title').value;
        let category = document.getElementById('category').value;
        let details = document.getElementById('details').value;
        let footer = document.getElementById('footerInput').value;

        document.getElementById('cardTitle').innerHTML =
            title !== "" ? title : "News Headline";

        document.getElementById('cardCategory').innerHTML =
            category !== "" ? category : "Category";

        document.getElementById('cardDetails').innerHTML =
            details !== "" ? details : "News Details...";

        document.getElementById('footer').innerHTML =
            footer !== "" ? footer : "বিস্তারিত কমেন্টে";

    }



    // =============================
    // Download JPG
    // =============================

    function downloadCard() {

        const card = document.getElementById("newsCard");

        html2canvas(card, {

            scale: 3,
            useCORS: true,
            allowTaint: true,
            backgroundColor: "#ffffff"

        }).then(function(canvas){

            let link = document.createElement("a");

            link.download = "swadesh-news-photocard.jpg";

            link.href = canvas.toDataURL("image/jpeg",1.0);

            link.click();

        });

    }

</script>

</x-app-layout>