{{-- right layout main menu --}}
<div class="mobile-responsive col-6 col-md-4 border-left">
    <div class="card-content-default">
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('widget.Pencarian')</div>
        </div>
        <div class="content-body">
            <div class="card-body">
                {{-- search --}}
                <form class="search-bar" id="form-search">
                    <input class="form-control-sm shadow pl-2" type="text" placeholder="@lang('widget.PencarianCaption')"
                        name="search" style="width: 75%; border: 1px solid #DFE3E7;">
                    <button class="btn btn-sm" type="submit"
                        style="background-color: #056e4f; color: #FFFFFF; padding: 0.4rem 1.5rem;">
                        <i class="bx bx-search"></i>
                    </button>
                </form>

            </div>
            {{-- end search --}}

        </div>

        {{-- tautan --}}
        {{-- <h2 class="t"></h2>
        <section id="accordion-hover-wrapper">
            <div class="divider divider-left">
                <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('widget.Tautan')</div>
            </div>
            <div id="accordion-tautan" data-toggle-hover="true">
                <div class="card collapse-header" style="background-color:#dadada;">

                    @if (!empty($link['link']))

                    @foreach($link['link'] as $links)
                    <div class="card collapse-header" style="background-color: #F0F0F0;">
                        <div class="card-tautan-default" id="{{ $links['id_target'] }}" data-toggle="collapse"
                            role="button" data-target="#{{ $links['id_target'] }}">
                            <span class="collapse-title" style="color:#000000; cursor:pointer;">
                                <strong>{{ $links['name'] }}</strong>
                            </span>
                        </div>
                        <div id="{{ $links['id_target'] }}" class="collapse"
                            aria-labelledby="{{ $links['id_target'] }}" data-parent="#accordion-tautan">
                            <div class="card-body">
                                <div class="container">
                                    <p>
                                        <img class="pic-round-shadow" width="80" height="80"
                                            alt="{{ $links['name'] }}" src="{{ url( $links['images_url']) }}"
                                            style="float:left;margin:0 10px 10px 0;">
                                            <small>
                                                {{ $links['description'] }}
                                            </small>
                                        <button type="button" class="btn-tautan-small btn-tautan shadow mr-1 mb-1">
                                            <a href="{{ $links['site_url'] }}" target="_blank"
                                                style="color: #ffffff;">@lang('widget.Kunjungi')</a>
                                        </button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach

                    @else
                    <div style="font-size:10px; color : #828D99; text-align:center;">
                        @lang('widget.TidakDitemukan')
                    </div>
                    @endif

                </div>
        </section> --}}
        {{-- end tautan --}}

        {{-- jam layanan --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('widget.JamLayanan')</div>
        </div>
        <div class="content-body">
            <div lass="card-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col" style="letter-spacing: unset;"><small>Hari</small></th>
                            <th scope="col" style="letter-spacing: unset;"><small>Jam Kerja</small></th>
                            <th scope="col" style="letter-spacing: unset;"><small>Istirahat</small></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="padding: unset;text-align:center; vertical-align:middle;"><small>Senin -
                                    Kamis</small></td>
                            <td style="padding: unset;text-align:center; vertical-align:middle;"><small>07.30 - 16.00
                                    WIB</small></td>
                            <td style="padding: unset;text-align:center; vertical-align:middle;"><small>12.00 - 13.00
                                    WIB</small></td>
                        </tr>
                        <tr>
                            <td style="padding: unset;text-align:center; vertical-align:middle;"><small>Jum'at</small>
                                </th>
                            <td style="padding: unset;text-align:center; vertical-align:middle;"><small>07.30 - 16.30
                                    WIB</small></td>
                            <td style="padding: unset;text-align:center; vertical-align:middle;"><small>11.30 - 13.00
                                    WIB</small></td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
        {{-- end jam layanan --}}
        
        {{-- SPBE PA Yogyakarta --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('SPBE PA Yogyakarta')</div>
        </div>
        <div class="content-body">
            <div lass="card-body">
                <a href="https://spbe.pa-yogyakarta.go.id/" target="_blank">
                    <img src="{{ url('libraries/pengadilan-agama/images/icon/spbepayogyakarta.png') }}" style="height: 142px;">
                </a>
            </div>

        </div>
        {{-- end EAC Mahkamah Agung --}}
        
        
         {{-- EAC Mahkamah Agung --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('Elektronik Akta Cerai')</div>
        </div>
        <div class="content-body">
            <div lass="card-body">
                <a href="https://eac.mahkamahagung.go.id/" target="_blank">
                    <img src="{{ url('libraries/pengadilan-agama/images/icon/eac_ma.png') }}" style="height: 142px;">
                </a>
            </div>

        </div>
        {{-- end EAC Mahkamah Agung --}}


        {{-- antrian sidang online --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('Antrian Sidang Online')</div>
        </div>
        <div class="content-body">
            <div lass="card-body">
                <a href="https://sigap.pa-yogyakarta.go.id/" target="_blank">
                    <img src="{{ url('libraries/pengadilan-agama/images/icon/sigap.png') }}" style="height: 142px;">
                </a>
            </div>

        </div>
        {{-- end antrian sidang online --}}


        {{-- kegiatan --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('widget.Kegiatan')</div>
        </div>
        <div class="content-body">

            {{-- activity_widget content --}}
            @if ($activities)

            @foreach($activities as $activity)
            <div class="row">
                <div class="border-right">
                    <div class="col-sm">
                        <div class="card-body">
                            <time datetime="#" class="icon">
                                <strong>
                                    {{ $activity['article_time']['month'] }}
                                </strong>
                                <span>
                                    {{ $activity['article_time']['date'] }}
                                </span>
                            </time>
                        </div>
                    </div>
                </div>
                <div class="col-md">
                    <div class="content-body">
                        <a href="/article/{{ $activity['slug'] }}" style="font-weight: bold; color: #056e4f">
                            {{ $activity['title_short'] }}
                        </a>
                        <p>
                            <small>{{ $activity['content_text_short'] }}</small>
                        </p>
                    </div>
                </div>
            </div>
            @endforeach

            @else
            <div style="font-size:10px; color : #828D99; text-align:center;">
                @lang('widget.TidakDitemukan')
            </div>
            @endif
            {{-- end activity_widget content --}}

        </div>
        {{-- end kegiatan --}}

        {{-- Akses CCTV --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('Akses CCTV')</div>
        </div>
        <div class="content-body">
            <div lass="card-body">
                <a href="https://cctv.badilag.net/display/satker/200eb03f772703e0d4be4c0c72ae095c" target="_blank">
                    <img src="{{ url('libraries/pengadilan-agama/images/icon/cctv-icon.png') }}" style="height: 82px;">
                </a>
            </div>

        </div>
        {{-- end Akses CCTV --}}
        
        {{-- formulir --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('Formulir Informasi dan Izin Penelitian')</div>
        </div>
        <div class="content-body">
            <div lass="card-body">
                <a href="https://docs.google.com/forms/d/e/1FAIpQLSc_PJnmxYlUfJW4HDEL_pAO1kM8V-st12rYO_19Jkn4J6EIFA/viewform" target="_blank">
                    <img src="{{ url('libraries/pengadilan-agama/images/icon/formulir.png') }}" style="height: 102px;">
                </a>
            </div>

        </div>
        {{-- end formulir --}}
        
        {{-- survei penilaian --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('Survei Penilaian')</div>
        </div>
        <div class="content-body">
            <div lass="card-body">
                <a href="https://survei.badilag.net/home/index/60312df507e645ec838dcfb1f6d48d5f/sld" target="_blank">
                    <img src="{{ url('libraries/pengadilan-agama/images/icon/survelag_payogya.png') }}" style="height: 102px;">
                </a>
            </div>

        </div>
        {{-- survei penilaian --}}

        {{-- survey masyarakat --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('widget.SurveyMasyarakat')</div>
        </div>
        <div class="content-body">
            <div lass="card-body">
                <img src="{{ url('libraries/pengadilan-agama/images/icon/skm_triwulan1_2026.png') }}" style="height:240px;">  
                <!--<div style="font-size:10px; color : #828D99; text-align:center;">
                    @lang('home.TidakDitemukan')
                </div>--> 
            </div>

        </div>
        {{-- end survey masyarakat --}}

        {{-- polling --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('widget.Polling')</div>
        </div>
        <div class="content-body">
            <div lass="card-body">
                <div id="satisfaction-poll-content"></div>
                <div id="satisfaction-poll-chart"></div>
            </div>

        </div>
        {{-- end polling --}}

        {{-- social media --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('widget.SosialMedia')</div>
        </div>
        <div class="content-body">
            <div class="row">
                <div class="col-12">
                    <a href="https://www.facebook.com/pengadilanagama.yogyakarta.9" target="_blank">
                        <img src="{{ url('libraries/pengadilan-agama/images/icon/facebook.png') }}" style="height: 32px;">
                    </a>
                    <span>&nbsp;Pengadilan Agama Yogyakarta</span>
                </div>

                <div class="col-12 mt-1">
                    <a href="https://www.instagram.com/pengadilanagama.yogyakarta" target="_blank">
                        <img src="{{ url('libraries/pengadilan-agama/images/icon/instagram.png') }}" style="height: 32px;">
                    </a>
                    <span>&nbsp;@pengadilanagama.yogyakarta</span>
                </div>

                <div class="col-12 mt-1">
                    <a href="https://www.youtube.com/channel/UCXgmEhNp07wSPbLu5FobxJA" target="_blank">
                        <img src="{{ url('libraries/pengadilan-agama/images/icon/youtube.png') }}" style="height: 32px;">
                    </a>
                    <span>&nbsp;Pengadilan Agama Yogyakarta</span>
                </div>
            </div>
        </div>
        {{-- end social media --}}

        {{-- statistik web --}}
        <h2 class="t"></h2>
        <div class="divider divider-left">
            <div class="divider-text" style="background-color: #056e4f; color: #FFFFFF">&nbsp;&nbsp;@lang('widget.StatistikWeb')</div>
        </div>
        <div class="content-body">

            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center"
                    style="margin-bottom: 0.4rem !important;">
                    <div class="sales-item-name">
                        <div class="badge" style="background-color: #079f72;">@lang('widget.HariIni')</div>
                    </div>
                    <div class="sales-item-amount">
                        <h6 class="mb-0">
                            {{ $visits['day'] }}
                        </h6>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center"
                    style="margin-bottom: 0.4rem !important;">
                    <div class="sales-item-name">
                        <div class="badge" style="background-color: #079f72;">@lang('widget.MingguIni')</div>
                    </div>
                    <div class="sales-item-amount">
                        <h6 class="mb-0">
                            {{ $visits['week'] }}
                        </h6>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center"
                    style="margin-bottom: 0.4rem !important;">
                    <div class="sales-item-name">
                        <div class="badge" style="background-color: #079f72;">@lang('widget.BulanIni')</div>
                    </div>
                    <div class="sales-item-amount">
                        <h6 class="mb-0">
                            {{ $visits['month'] }}
                        </h6>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="sales-item-name">
                        <div class="badge" style="background-color: #079f72;">@lang('widget.Total')</div>
                    </div>
                    <div class="sales-item-amount">
                        <h6 class="mb-0">
                            {{ $visits['total'] }}
                        </h6>
                    </div>
                </div>
            </div>
        </div>
        {{-- end statistik web --}}
        <div class="card" style="box-shadow: none; background-color: transparent;">
            <div class="divider">
                <div class="divider-text" style="background-color: #636363; color: #FFFFFF; font-size: 0.7rem;">@lang('widget.SistemOperasi')</div>
            </div>
            <a class="heading-elements-toggle">
                <i class="bx bx-dots-vertical font-medium-3"></i>
            </a>
            <div class="heading-elements">
                <ul class="list-inline mb-0">
                    <li>
                        <a data-action="collapse">
                            <i class="bx bx-chevron-down"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="card-content collapse">
                <div id="operating-system">
                    <input type="hidden" id="statistik-os-windows" value="{{ $visits['os']['windows'] }}">
                    <input type="hidden" id="statistik-os-linux" value="{{ $visits['os']['linux'] }}">
                    <input type="hidden" id="statistik-os-iphone" value="{{ $visits['os']['iphone'] }}">
                    <input type="hidden" id="statistik-os-android_mobile" value="{{ $visits['os']['androidmobile'] }}">
                </div>
            </div>
        </div>
    </div>
</div>
{{-- end right layout main menu --}}

@push('script-after-global')
<script>

    $('#form-search').submit( function (){

        const search = $(this).find('input[name=search]').val();

        clickLink('{{ url('search') }}/'+ search);
        return false;
    })

    // render satisfaction poll
    axios({
        method: 'get',
        url: '{{ url('api/check-satisfaction-poll') }}',
    }).then((res) => {
        const { satisfaction_poll } = res.data;

        // output
        var satisfaction_poll_content = [];

        if (satisfaction_poll == false) {

            satisfaction_poll_content.push(`
                <p align="center">
                    <strong style="color: #056e4f;">@lang('widget.SudahVoting')</strong>
                </p>
                `)
            // push
            document.getElementById('satisfaction-poll-content').innerHTML = satisfaction_poll_content.join('');

            // chart satisfaction poll
            axios({
                method: 'get',
                url: '{{ url('api/get-satisfaction-poll') }}',
                }).then((res) => {

                    const { satisfaction_poll } = res.data;

                    const good = satisfaction_poll.good
                    const bad = satisfaction_poll.bad
                    const poll = satisfaction_poll.poll

                    // pie operating system
                    var options = {
                        series: [good, bad],
                        chart: {
                            width: '100%',
                            type: 'pie',
                        },
                        colors: ['#079f72', '#f00'],
                        labels: ["@lang('widget.Bagus')", "@lang('widget.Buruk')"],
                        legend: {
                            show: false
                        },
                        tooltips: {
                            callbacks: {
                                label: function(tooltipItem) {
                                    return tooltipItem.yLabel;
                                }
                            }
                        },
                        responsive: [{
                            breakpoint: 480,
                            options: {
                                chart: {
                                    width: 200
                                },
                            }
                        }]
                    };

                    var chart = new ApexCharts(document.querySelector("#satisfaction-poll-chart"), options);
                    chart.render();

                }).catch((err) => {
                    handleErrorResponse(err.response);
                });

        } else if (satisfaction_poll == true) {
            satisfaction_poll_content.push(`
                <div class="form-group">
                    <h6 style="color: #056e4f"><strong>@lang('widget.PollingCaption')</strong></h6>

                    <div class="row">
                        <div class="col text-center">
                            <button class="btn btn-sm btn-outline-success" style="background-color: none; border: none;" onclick="polling('puas')">
                                <div class="bx bx-md bx-border bxs-smiley-happy shadow"></div>
                                <p style="margin-bottom: 0rem;">@lang('widget.Puas')</p>
                            </button>

                            <button class="btn btn-sm btn-outline-danger" style="background-color: none; border: none;" onclick="polling('tidak-puas')">
                                <div class="bx bx-md bx-border bxs-smiley-sad shadow"></div>
                                <p style="margin-bottom: 0rem;">@lang('widget.TidakPuas')</p>
                            </button>
                        </div>
                    </div>
                </div>
            `)

            // push
            document.getElementById('satisfaction-poll-content').innerHTML = satisfaction_poll_content.join('');
        }

    }).catch((err) => {
        handleErrorResponse(err.response);
    });

    // add satisfaction poll
    const polling = (score) => {

        if(score == 'puas')
        {
            score = '1';

        } else if (score == 'tidak-puas')
        {
            score = '0';
        }

        axios({
            method: 'post',
            url: '{{ url('api/add-satisfaction-poll') }}',
            data: { score },
            headers: {
                Accept: 'application/json',
            },
            }).then((res) => {
                const { satisfaction_poll } = res.data;

                if(satisfaction_poll == true)
                {
                    clickLink('{{ url('/') }}');
                }

            }).catch((err) => {

            });
        }

    // visit web
    // pie operating system
    const statistik_windows = document.getElementById("statistik-os-windows").value;
    const statistik_linux = document.getElementById("statistik-os-linux").value;
    const statistik_iphone = document.getElementById("statistik-os-iphone").value;
    const statistik_android_mobile = document.getElementById("statistik-os-android_mobile").value;


    var options = {
        series: [statistik_windows, statistik_linux, statistik_iphone, statistik_android_mobile ],
        chart: {
            height: 300,
            type: 'radialBar',
        },
        plotOptions: {
            radialBar: {
                offsetY: 0,
                startAngle: 0,
                endAngle: 270,
                hollow: {
                    margin: 5,
                    size: '30%',
                    background: 'transparent',
                    image: undefined,
                },
                dataLabels: {
                    name: {
                        show: false,
                    },
                    value: {
                        show: false,
                    }
                }
            }
        },
        colors: ['#056e4f', '#068661', '#079f72', '#08a879'],
        labels: ['Windows', 'iPhone', 'Linux', 'Android'],
        legend: {
            show: true,
            floating: true,
            fontSize: '12px',
            position: 'left',
            offsetX: 10,
            offsetY: 13,
            labels: {
                useSeriesColors: true,
            },
            markers: {
                size: 0
            },
            formatter: function (seriesName, opts) {
                return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]
            },
            itemMargin: {
                vertical: 3
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                legend: {
                    show: false
                }
            }
        }]
    };

    var chart = new ApexCharts(document.querySelector("#operating-system"), options);
    chart.render();

</script>
@endpush