@extends('view.public.layouts.app')
@section('content')
<!--SIDE NAVIGASI-->
<div class="container-fluid">
    <div class="row pospage bg-green">
        <div class="container">
            <a href="#" class="pospage_link">Beranda</a><i class="icofont-thin-right"></i>
            <a href="#" class="pospage_link">Profil</a><i class="icofont-thin-right"></i>
            <a href="#" class="pospage_link">Sejarah</a>
        </div>
    </div>
</div>
<!--SIDE NAVIGASI-->
<div class="container">
    <div class="row marginside">
        <div class="col-md-3">
            <div class="sidenav">
                <p class="sidenav_tittle">Profil Menu</p>
                <hr class="sidenav_hr">
                <a href="#tentang" id="tentang-t" class="sidenav_link active"><i class="icofont-thin-right"></i> Tentang Kami</a>
                <a href="#visimisi" id="visimisi-t" class="sidenav_link"><i class="icofont-thin-right"></i> Visi, Misi & Motto</a>
                <a href="#sejarah" id="sejarah-t" class="sidenav_link"><i class="icofont-thin-right"></i> Sejarah</a>
                <a href="#struktur" id="struktur-t" class="sidenav_link"><i class="icofont-thin-right"></i> Struktur</a>
                <a href="#selayangpandang" id="selayangpandang-t" class="sidenav_link"><i class="icofont-thin-right"></i> Selayang Pandang</a>
            </div>
        </div>
        <div class="col-md-9">
            <!--TENTANG KAMI-->
            <div id="tentang-c" class="row">
                <div class="col-md-8">
                    <p class="sejarah_text">
                        {!!$tentangkami->detail!!}
                    </p>
                </div>
                <div class="col-md-4">
                    <div class="text-center pdless">
                        <div class="doktor_frame doktor_frame2">
                            <img src="{{ \SetFunction::staticdata('ibukepaladinas', 'file') }}" class="doktor_image" alt="">
                        </div>
                        <p class="doktor_positions2">{{ \SetFunction::staticdata('titledirektur') }}</p>
                        <a href="" class="doktor_name doktor_name2">{{ \SetFunction::staticdata('namadirektur') }}</a>
                    </div>
                </div>
            </div>
            <!--VISI MISI-->
            <div id="visimisi-c" class="hidee visimisi">
                <div class="br"></div>
                <p class="visimisi_tittle">
                    Visi
                </p>
                <p class="sejarah_text">
                    {!!$visimisi->detail!!}
                </p>
                <p class="visimisi_tittle">
                    Misi
                </p>
                <p class="sejarah_text">
                    {!!$misi->detail!!}
                </p>
                <p class="visimisi_tittle">
                    Motto
                </p>
                <p class="sejarah_text">
                    <i>{!!$motto->detail!!}</i>
                </p>
            </div>
            <!--SEJARAH-->
            <div id="sejarah-c" class="hidee sejarah">
                <div class="br"></div>
                <img src="{{ $sejarah->file->count() > 0 ? asset('uploads/'.$sejarah->file->first()->filename) : asset('notfound.png') }}" alt="" class="sejarah_image">
                <p class="sejarah_text">
                    {!!$sejarah->detail!!}
                </p>
            </div>
            <!--STRUKTUR-->
            <div id="struktur-c" class="hidee struktur">
                <div class="br"></div>
                <img src="{{ $struktur->file->count() > 0 ? asset('uploads/'.$struktur->file->first()->filename) : asset('notfound.png') }}" alt="" class="struktur_image">
            </div>
            <!--STRUKTUR-->
            <div id="selayangpandang-c" class="hidee">
                <div class="br"></div>
                <p class="visimisi_tittle" style="color:var(--black);font-weight:bold;">
                    Selayang Pandang
                </p>
                <p class="sejarah_text">
                    <i>Tak Kenal Maka Tak Sayang. Berikut adalah rangkuman sejarah singkat perkembangan Rumah Sakit Mata Provinsi Kalimantan Timur dari masa ke masa.</i>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                            <th>Periode</th>
                            <th>Direktur Ke</th>
                            <th>Nama Lengkap</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($selayangdirekturs as $sd)
                            <tr>
                                <td>{{$sd->periode}}</td>
                                <td>{{$sd->direkturke}}</td>
                                <td>{{$sd->nama}}</td>
                            </tr>
                            @empty
                            data kosong
                            @endforelse
                        </tbody>
                    </table>
                    <br>
                    <p class="visimisi_tittle" style="color:var(--black);font-weight:bold;">
                        Perkembangan Rumah Sakit Mata
                    </p>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                            <th>Tahun</th>
                            <th>Perkembangan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($selayangperkembangans as $sp)
                            <tr>
                                <td>{{$sp->tahun}}</td>
                                <td>{{$sp->perkembangan}}</td>
                            </tr>
                            @empty
                            data kosong
                            @endforelse
                        </tbody>
                    </table>
                </p>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <script>
        $(document).ready(function(){
            $('#tentang-t').click(function(){
                $('#tentang-t').addClass('active');
                $('#tentang-c').removeClass('hidee');
                $('#visimisi-t').removeClass('active');
                $('#visimisi-c').addClass('hidee');
                $('#sejarah-t').removeClass('active');
                $('#sejarah-c').addClass('hidee');
                $('#struktur-t').removeClass('active');
                $('#struktur-c').addClass('hidee');
                $('#selayangpandang-t').removeClass('active');
                $('#selayangpandang-c').addClass('hidee');
            });
            $('#visimisi-t').click(function(){
                $('#tentang-t').removeClass('active');
                $('#tentang-c').addClass('hidee');
                $('#visimisi-t').addClass('active');
                $('#visimisi-c').removeClass('hidee');
                $('#sejarah-t').removeClass('active');
                $('#sejarah-c').addClass('hidee');
                $('#struktur-t').removeClass('active');
                $('#struktur-c').addClass('hidee');
                $('#selayangpandang-t').removeClass('active');
                $('#selayangpandang-c').addClass('hidee');
            });
            $('#sejarah-t').click(function(){
                $('#tentang-t').removeClass('active');
                $('#tentang-c').addClass('hidee');
                $('#visimisi-t').removeClass('active');
                $('#visimisi-c').addClass('hidee');
                $('#sejarah-t').addClass('active');
                $('#sejarah-c').removeClass('hidee');
                $('#struktur-t').removeClass('active');
                $('#struktur-c').addClass('hidee');
                $('#selayangpandang-t').removeClass('active');
                $('#selayangpandang-c').addClass('hidee');
            });
            $('#struktur-t').click(function(){
                $('#tentang-t').removeClass('active');
                $('#tentang-c').addClass('hidee');
                $('#visimisi-t').removeClass('active');
                $('#visimisi-c').addClass('hidee');
                $('#sejarah-t').removeClass('active');
                $('#sejarah-c').addClass('hidee');
                $('#struktur-t').addClass('active');
                $('#struktur-c').removeClass('hidee');
                $('#selayangpandang-t').removeClass('active');
                $('#selayangpandang-c').addClass('hidee');
            });
            $('#selayangpandang-t').click(function(){
                $('#tentang-t').removeClass('active');
                $('#tentang-c').addClass('hidee');
                $('#visimisi-t').removeClass('active');
                $('#visimisi-c').addClass('hidee');
                $('#sejarah-t').removeClass('active');
                $('#sejarah-c').addClass('hidee');
                $('#struktur-t').removeClass('active');
                $('#struktur-c').addClass('hidee');
                $('#selayangpandang-t').addClass('active');
                $('#selayangpandang-c').removeClass('hidee');
            });
        });
    </script>
@endsection