<?php $__env->startSection('content'); ?>
<?php
    $items = $sliders->take(12);
?>


    
    <section class="py-10">
        <div class="max-w-4xl mx-auto px-6">
            <h2 class="flex items-center text-left mb-3">
                <span class="text-sm translate-y-[0px] text-[17px]">ALIH</span>
                <span class="italic text-[#C58B5C] text-[40px] candide ml-2">aksara</span>
            </h2>

            <div class="w-full sm:w-4/5 max-w-3xl mx-auto">
                <p class="text-gray-600 leading-relaxed text-center">
                    <?php echo nl2br(e($global_settings['hero_alihaksara_text'])); ?>

                </p>
            </div>
        </div>
    </section>

        <!-- ================= TRANSLITERATION SECTION ================= -->
    <?php
        $isLoggedIn = true;
    ?>
    <section class="alihaksara py-15">
        <div class="max-w-4xl mx-auto px-6">
            <h2 class="text-3xl text-center mb-8 text-gray-700 hidden">
                Alih Aksarakan disini
            </h2>

            <form action="<?php echo e(route('aksara.print')); ?>" method="POST" target="_blank"
                x-data="{
                    tab: 'jawa',
                    subBatak: 'toba',

                    copyAksara() {

                        // blokir lampung & incung
                        if (this.tab === 'lampung' || this.tab === 'incung') {
                            return;
                        }

                        let field = document.getElementById('aksara_' + this.tab + '_text');

                        if (!field || field.value === '') return;

                        navigator.clipboard.writeText(field.value);

                        let info = document.getElementById('salin_info');
                        info.classList.remove('hidden');

                        setTimeout(() => {
                            info.classList.add('hidden');
                        }, 3000);
                    }
                }"
                class="relative group">
                <?php echo csrf_field(); ?>

                

                <div class="relative space-y-10 mt-6 <?php echo e(!$isLoggedIn ? 'opacity-50' : ''); ?>">

                    <!-- FLOATING INPUT -->
                    <div class="relative">
                        <input type="text"
                            name="aksara_latin"
                            id="aksara_latin"
                            placeholder="<?php echo e($global_settings['hero_alihaksara_placeholderinput']); ?>"
                            class="peer w-full border-2 rounded-2xl p-6 border-gray-300 focus:border-[#cacacc] bg-white outline-none py-3 text-lg bg-transparent h-20 placeholder:text-center"
                            <?php if(!$isLoggedIn): echo 'disabled'; endif; ?> />
                    </div>

                    <!-- TABS -->
                    <div class="max-w-xl mx-auto">

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 wrap-aksara-tab">

                            <?php
                                $tabs = [
                                    'jawa' => 'Jawa',
                                    'sunda' => 'Sunda',
                                    'lontara' => 'Lontara',
                                    'bali' => 'Bali'
                                ];
                            ?>

                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $tabs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoop($loop->index); ?><?php endif; ?>
                                <button type="button"
                                    @click="tab = '<?php echo e($key); ?>'"
                                    :class="tab === '<?php echo e($key); ?>'
                                        ? 'bg-[#421719] text-white shadow-lg scale-105 active'
                                        : 'bg-white text-green-700 hover:bg-[#42171938]'"
                                    class="
                                        tabs-aksara
                                        pt-1 pb-2 px-1
                                        rounded-2xl
                                        text-center
                                        transition
                                        font-semibold
                                        border border-[#cacacc]
                                        cursor-pointer
                                    ">
                                    <!--
                                        4 - 3
                                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($loop->iteration > 4): ?>
                                            md:col-span-4
                                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                    -->

                                    <span class="placeholder_main text-xs tracking-widest">
                                        AKSARA
                                    </span>

                                    <span class="placeholder_sub text-base">
                                        <?php echo e(strtolower($label)); ?>

                                    </span>

                                </button>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>

                        </div>

                    </div>

                    <!-- TAB CONTENT -->
                    <div class="mt-6">
                        

                        <?php
                            $resultTabs = [
                                'jawa' => 'font-aksara-jawa',
                                'sunda' => 'font-aksara-sunda',
                                'lontara' => 'font-aksara-lontara',
                                'bali' => 'font-aksara-bali'
                            ];
                        ?>

                        <!-- TAB CONTENT -->
                        <div class="mt-8 relative">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $resultTabs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $fontClass): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoop($loop->index); ?><?php endif; ?>
                                <div
                                    x-show="tab === '<?php echo e($key); ?>'"

                                    x-transition:leave="transition-all duration-300 ease-in absolute inset-0"
                                    x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                                    x-transition:leave-end="opacity-0 scale-80 -translate-y-4"

                                    x-transition:enter="transition-all duration-400 delay-100 ease-out"
                                    x-transition:enter-start="opacity-0 scale-95 translate-y-4"
                                    x-transition:enter-end="opacity-100 scale-100 translate-y-0"

                                    class="border-2 border-[#cacacc] rounded-2xl p-4 bg-white shadow-md">

                                    <input type="text"
                                        readonly
                                        name="aksara_<?php echo e($key); ?>_text"
                                        id="aksara_<?php echo e($key); ?>_text"
                                        class="w-full h-[88px] text-4xl text-center tracking-wider outline-none <?php echo e($fontClass); ?> "
                                        placeholder="">

                                </div>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                        </div>

                    </div>


                    

                    <input type="hidden" name="aksara_type" x-bind:value="tab">
                </div>
            </form>
        </div>
    </section>


    
    <section class="py-10">
        <div class="max-w-4xl mx-auto px-6">
            <h2 class="flex items-center text-left mb-3">
                <span class="text-sm translate-y-[0px] text-[17px]">BELAJAR</span>
                <span class="italic text-[#C58B5C] text-[40px] candide ml-2">aksara</span>
            </h2>

            <div class="w-full sm:w-4/5 max-w-xl mx-auto">
                <div class="grid grid-cols-2 gap-6">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = ['jawa', 'sunda', 'lontara', 'bali']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoop($loop->index); ?><?php endif; ?>
                        <div class="bg-white py-3 px-6 rounded-xl border text-center shadow-sm">
                            <div class="font-semibold uppercase">Belajar<br>Aksara</div>
                            <div class="italic text-[#C58B5C] text-[36px] candide">
                                <?php echo e($item); ?>

                            </div>
                        </div>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                </div>
            </div>
        </div>
    </section>

    
    <section class="bg-white py-10 pb-30">
        <div class="max-w-4xl mx-auto px-6 ">
            <h2 class="flex items-center text-left mb-3">
                <span class="text-sm translate-y-[0px] text-[17px]">GAME</span>
                <span class="italic text-[#C58B5C] text-[40px] candide ml-2">aksara</span>
            </h2>

            <div class="w-full sm:w-4/5 max-w-xl mx-auto">
                <div class="grid grid-cols-2 gap-6">
                    <div class="bg-white py-3 px-6 rounded-xl border text-center shadow-sm">
                        <div class="font-semibold uppercase">Domino</div>
                        <div class="italic text-[#C58B5C] text-[36px] candide">
                            aksara
                        </div>
                    </div>
                    <div class="bg-white py-3 px-6 rounded-xl border text-center shadow-sm">
                        <div class="font-semibold uppercase">Roda</div>
                        <div class="italic text-[#C58B5C] text-[36px] candide">
                            aksara
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.frontend', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\alihaksara-kemendikbud\resources\views/frontend/homepage.blade.php ENDPATH**/ ?>