@extends('layouts.front')

@section('content')
    <div class="h-100 m-5 p-lg-5  d-flex justify-content-center align-items-center flex-column">

        <div class="d-flex  text-left  ">
            <a class="fw-bold  mx-3  h4 tab-green px-3 py-2 rounded tab-green-active" id="sd"
                style="text-decoration: none">Persyaratan
                SD</a>
            <a class="fw-bold  mx-3 h4 tab-green px-3 py-2 rounded " id="smp"style="text-decoration: none">Persyaratan
                SMP</a>
        </div>
        <div class="border rounded d-inline-block p-lg-5" class="width:fit-content!important;">
            <img id="text-sd" class="w-100" src="{{ asset('assets/content/images/alur_ppdb-01.png') }}" alt="">
            <img id="text-smp" class="w-100 hide-div" src="{{ asset('assets/content/images/alur_ppdb-02.png') }}"
                alt="">
        </div>
    </div>


    {{-- script --}}
    <script>
        let sdClicked = false;
        let smpClicked = false;

        buttonSD = document.getElementById('sd');
        buttonSMP = document.getElementById('smp');
        textSMP = document.getElementById('text-smp');
        textSD = document.getElementById('text-sd');

        buttonSD.addEventListener('click', function() {
            if (!sdClicked) {
                textSMP.classList.remove('show-div');
                textSMP.classList.add('hide-div');
                textSD.classList.remove('hide-div');
                textSD.classList.add('show-div');
                buttonSD.classList.add('tab-green-active');
                buttonSMP.classList.remove('tab-green-active');
                sdClicked = true;
            smpClicked = false;
            }
        });

        buttonSMP.addEventListener('click', function() {
            if (!smpClicked) {
                textSD.classList.remove('show-div');
                textSD.classList.add('hide-div');
                textSMP.classList.remove('hide-div');
                textSMP.classList.add('show-div');
                buttonSD.classList.remove('tab-green-active');
                buttonSMP.classList.add('tab-green-active');
                smpClicked = true;
                sdClicked = false;
            }
        });
    </script>
    {{-- script --}}
@endsection