@extends('layouts.front')

@section('content')
    @push('plugins')
        <script src="{{ url('https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js') }}"></script>
        <link rel="stylesheet" type="text/css" href="{{ url('https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css') }}">
        <script type="text/javascript" charset="utf8"
            src="{{ url('https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js') }}"></script>
    @endpush
    <div class=" container mt-5 ">
        <div class="mb-5">

            <h1 class="fw-bold text-center text-color">Data Sekolah</h1>
            <h5 class="text-center fw-bold">Silahkan pilih jenjang sekolah terlebih dahulu untuk melihat data sekolah yang
                ada
            </h5>
        </div>
        <div class="d-flex  ">
            <a class="fw-bold  mx-3 h4 btn-green px-3 py-2 rounded active-btn-green" id="sd"
                style="text-decoration: none">
                SD</a>
            <a class="fw-bold mx-3 h4 btn-green px-3 py-2 rounded " id="smp"style="text-decoration: none">
                SMP</a>
        </div>
        <div class="border rounded  p-5">
            <div id="table-sd">
                <table id="dataTable1" class="table">
                    <thead class="table-danger">
                        <tr>
                            <th>No.</th>
                            <th>Nama Sekolah</th>
                            <th>NSPN</th>
                            <th>Alamat</th>
                            <th class="text-center">Lokasi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="p-3">1</td>
                            <td class="p-3">SDN 012 SEMPAJA</td>
                            <td class="p-3">12312312231321</td>
                            <td class="p-3">sempaja</td>
                            <td class="p-3 text-center"><a class="btn-green py-2 px-4 rounded" href=""><i
                                        class="bi bi-geo-alt-fill mx-2"></i> Cek
                                    lokasi</a></td>
                        </tr>
                        <tr>
                            <td class="p-3">1</td>
                            <td class="p-3">SDN 012 SEMPAJA</td>
                            <td class="p-3">12312312231321</td>
                            <td class="p-3">sempaja</td>
                            <td class="p-3 text-center"><a class="btn-green py-2 px-4 rounded" href=""><i
                                        class="bi bi-geo-alt-fill mx-2"></i> Cek
                                    lokasi</a></td>
                        </tr>
                        <tr>
                            <td class="p-3">1</td>
                            <td class="p-3">SDN 012 SEMPAJA</td>
                            <td class="p-3">12312312231321</td>
                            <td class="p-3">sempaja</td>
                            <td class="p-3 text-center"><a class="btn-green py-2 px-4 rounded" href=""><i
                                        class="bi bi-geo-alt-fill mx-2"></i> Cek
                                    lokasi</a></td>
                        </tr>
                        <tr>
                            <td class="p-3">1</td>
                            <td class="p-3">SDN 012 SEMPAJA</td>
                            <td class="p-3">12312312231321</td>
                            <td class="p-3">sempaja</td>
                            <td class="p-3 text-center"><a class="btn-green py-2 px-4 rounded" href=""><i
                                        class="bi bi-geo-alt-fill mx-2"></i> Cek
                                    lokasi</a></td>
                        </tr>
                        <tr>
                            <td class="p-3">1</td>
                            <td class="p-3">SDN 012 SEMPAJA</td>
                            <td class="p-3">12312312231321</td>
                            <td class="p-3">sempaja</td>
                            <td class="p-3 text-center"><a class="btn-green py-2 px-4 rounded" href=""><i
                                        class="bi bi-geo-alt-fill mx-2"></i> Cek
                                    lokasi</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="table-smp" class="hide-div">
                <table id="dataTable2" class="table">
                    <thead class="table-info">
                        <tr>
                            <th>No.</th>
                            <th>Nama Sekolah</th>
                            <th>NSPN</th>
                            <th>Alamat</th>
                            <th>Lokasi</th>
                        </tr>
                    </thead>
                    <tbody>

                        <tr>
                            <td class="p-3">1</td>
                            <td class="p-3">SMP 012 SEMPAJA</td>
                            <td class="p-3">12312312231321</td>
                            <td class="p-3">sempaja</td>
                            <td class="p-3 text-center"><a class="btn-green py-2 px-4 rounded" href=""><i
                                        class="bi bi-geo-alt-fill mx-2"></i> Cek
                                    lokasi</a></td>
                        </tr>
                        <tr>
                            <td class="p-3">1</td>
                            <td class="p-3">SMP 012 SEMPAJA</td>
                            <td class="p-3">12312312231321</td>
                            <td class="p-3">sempaja</td>
                            <td class="p-3 text-center"><a class="btn-green py-2 px-4 rounded" href=""><i
                                        class="bi bi-geo-alt-fill mx-2"></i> Cek
                                    lokasi</a></td>
                        </tr>
                        <tr>
                            <td class="p-3">1</td>
                            <td class="p-3">SMP 012 SEMPAJA</td>
                            <td class="p-3">12312312231321</td>
                            <td class="p-3">sempaja</td>
                            <td class="p-3 text-center"><a class="btn-green py-2 px-4 rounded" href=""><i
                                        class="bi bi-geo-alt-fill mx-2"></i> Cek
                                    lokasi</a></td>
                        </tr>
                        <tr>
                            <td class="p-3">1</td>
                            <td class="p-3">SMP 012 SEMPAJA</td>
                            <td class="p-3">12312312231321</td>
                            <td class="p-3">sempaja</td>
                            <td class="p-3 text-center"><a class="btn-green py-2 px-4 rounded" href=""><i
                                        class="bi bi-geo-alt-fill mx-2"></i> Cek
                                    lokasi</a></td>
                        </tr>
                        <tr>
                            <td class="p-3">1</td>
                            <td class="p-3">SMP 012 SEMPAJA</td>
                            <td class="p-3">12312312231321</td>
                            <td class="p-3">sempaja</td>
                            <td class="p-3 text-center"><a class="btn-green py-2 px-4 rounded" href=""><i
                                        class="bi bi-geo-alt-fill mx-2"></i> Cek
                                    lokasi</a></td>
                        </tr>

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



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

        buttonSD = document.getElementById('sd');
        buttonSMP = document.getElementById('smp');
        tableSMP = document.getElementById('table-smp');
        tableSD = document.getElementById('table-sd');

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

        buttonSMP.addEventListener('click', function() {
            if (!smpClicked) {
                tableSD.classList.remove('show-div');
                tableSD.classList.add('hide-div');
                tableSMP.classList.remove('hide-div');
                tableSMP.classList.add('show-div');
                buttonSD.classList.remove('active-btn-green');
                buttonSMP.classList.add('active-btn-green');
                smpClicked = true;
                sdClicked = false;
            }
        });
    </script>
    @push('scripts')
        <script>
            $(document).ready(function() {
                $('#dataTable1').DataTable();
                $('#dataTable2').DataTable();
            });
        </script>
    @endpush
    {{-- script --}}
@endsection