@extends('layouts.surat')

@section('content_surat')
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-0">Asal Surat Masuk</h4>
                    <div class="table-responsive mt-4">
                        <table class="table mb-0 align-middle table-nowrap">
                            <tbody id="list_asal_surat">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-4">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="media">
                                <div class="media-body">
                                    <p class="text-muted fw-medium">Surat Belum Direspon</p>
                                    <h4 class="mb-0" id="surat_belum_respon">-</h4>
                                </div>
                                <div class="avatar-sm rounded-circle bg-primary align-self-center mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-primary">
                                <i class="fa fa-bell font-size-24"></i>
                            </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="media">
                                <div class="media-body">
                                    <p class="text-muted fw-medium">Surat Masuk</p>
                                    <h4 class="mb-0" id="surat_masuk">-</h4>
                                </div>
                                <div class="mini-stat-icon avatar-sm rounded-circle bg-primary align-self-center">
                            <span class="avatar-title">
                                <i class="fa fa-inbox font-size-24"></i>
                            </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="media">
                                <div class="media-body">
                                    <p class="text-muted fw-medium">Surat Keluar</p>
                                    <h4 class="mb-0" id="surat_keluar">-</h4>
                                </div>
                                <div class="avatar-sm rounded-circle bg-primary align-self-center mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-primary">
                                <i class="fa fa-paper-plane font-size-24"></i>
                            </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body pt-4">
                            <div id="line_chart_datalabel" style="width: 100%; height: 300px;" dir="ltr"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <table class="table table-borderless">
                <tr>
                    @foreach($satuan_kerja as $value)
                        <td class="p-1" style="width: {{ 100 / count($satuan_kerja) }}px!important;">
                            <div class="card mini-stats-wid">
                                <div class="card-body" style="min-height: 120px;">
                                    <div class="media">
                                        <div class="media-body">
                                            <p class="text-muted fw-medium">{{ $value->nama }}</p>
                                            <h4 class="mb-0" style="position: absolute; bottom: 20px;">{{ $value->jumlah }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @foreach($value->sub_satker as $item)
                                <div class="card mini-stats-wid">
                                    <div class="card-body" style="min-height: 120px;">
                                        <div class="media">
                                            <div class="media-body">
                                                <p class="text-muted fw-medium">{{ $item->nama }}</p>
                                                <h4 class="mb-0" style="position: absolute; bottom: 20px;">{{ $item->jumlah }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </td>
                    @endforeach
                </tr>
            </table>
        </div>
    </div>
    <div class="card">
        <div class="container row pt-3">
            <div class="col-12">
                <h5># Disposisi yang belum direspon lebih dari 3 hari</h5>
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>No.Surat</th>
                        <th>Perihal</th>
                        <th>Tgl. Surat</th>
                        <th>Tujuan</th>
                        <th>Unit Kerja</th>
                        <th class="text-nowrap">Tgl. Disposisi</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($belum_direspon as $value)
                        <tr>
                            <td>{{ $value->surat->no_surat }}</td>
                            <td>{{ $value->surat->perihal }}</td>
                            <td class="text-nowrap">{{ format_date($value->surat->tanggal_surat) }}</td>
                            <td class="text-nowrap">{{ $value->tujuan->pegawai->nama }}</td>
                            <td>{{ $value->tujuan->satuan_kerja->nama }}</td>
                            <td class="text-nowrap">{{ format_date($value->created_at) }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="container row">
            <div class="col-12">
                <h5># Dari Pak Dir</h5>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>No.Surat</th>
                            <th>Perihal</th>
                            <th>Jenis</th>
                            <th>Tgl. Surat</th>
                            <th>Tujuan</th>
                            <th>Unit Kerja</th>
                            <th class="text-nowrap">Tgl. Disposisi</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($dari_dir as $value)
                            <tr>
                                <td>{{ $value->surat->no_surat }}</td>
                                <td>{{ $value->surat->perihal }}</td>
                                <td>{{ $value->jenis }}</td>
                                <td class="text-nowrap">{{ format_date($value->surat->tanggal_surat) }}</td>
                                <td class="text-nowrap">{{ $value->tujuan->pegawai->nama }}</td>
                                <td>{{ $value->tujuan->satuan_kerja->nama }}</td>
                                <td class="text-nowrap">{{ format_date($value->created_at) }}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/libs/apexcharts/apexcharts.min.js') }}"></script>
    <script>
        $surat_belum_respon = $('#surat_belum_respon');
        $surat_belum_respon.html('<i class="fa fa-spinner fa-spin"></i>')
        $.get("{{ route('dashboard.surat_belum_respon') }}", (result) => {
            $surat_belum_respon.html(add_commas(result));
        });

        $surat_masuk = $('#surat_masuk');
        $surat_masuk.html('<i class="fa fa-spinner fa-spin"></i>')
        $.get("{{ route('dashboard.surat_masuk') }}", (result) => {
            $surat_masuk.html(add_commas(result));
        });

        $surat_keluar = $('#surat_keluar');
        $surat_keluar.html('<i class="fa fa-spinner fa-spin"></i>')
        $.get("{{ route('dashboard.surat_keluar') }}", (result) => {
            $surat_keluar.html(add_commas(result));
        });

        $list_asal_surat = $('#list_asal_surat');
        $list_asal_surat.html('<tr><td><i class="fa fa-spinner fa-spin"></i></td></tr>');
        $.get("{{ route('dashboard.asal_surat_masuk') }}", (result) => {
            $list_asal_surat.html('');
            $.each(result, (i, value) => {
                let row = '<tr> ' +
                    '<td class="px-1"><p class="mb-0">'+value.satuan_kerja.nama+'</p></td>' +
                    '<td class="px-1 text-right"><h5 class="mb-0">'+value.jumlah+'</h5></td>' +
                    '</tr>'
                $list_asal_surat.append(row);
            });
        });

        $.get("{{ route('dashboard.surat_seminggu') }}", (result) => {
            let list_hari = result.map((value, i) => {
                return value['hari'];
            });
            let list_jumlah = result.map((value, i) => {
                return value['jumlah'];
            });
            let min = Math.min.apply(Math, list_jumlah),
                max = Math.max.apply(Math, list_jumlah);

            var options = {
                    chart: { height: 380, type: "line", zoom: { enabled: !1 }, toolbar: { show: !1 } },
                    colors: ["#556ee6", "#34c38f"],
                    dataLabels: { enabled: !1 },
                    stroke: { width: [3, 3], curve: "straight" },
                    series: [
                        { name: "Jumlah", data: list_jumlah },
                    ],
                    title: { text: "Grafik Surat Harian", align: "left", style: { fontWeight: "500" }, fillColor: '#fff' },
                    grid: { row: { colors: ["transparent", "transparent"], opacity: 0.2 }, borderColor: "#f1f1f1" },
                    markers: { style: "inverted", size: 6 },
                    xaxis: { categories: list_hari, title: { text: "Hari" } },
                    yaxis: { title: { text: "Jumlah" }, min: min, max: max+2 },
                    legend: { position: "top", horizontalAlign: "right", floating: !0, offsetY: -25, offsetX: -5 },
                    responsive: [{ breakpoint: 600, options: { chart: { toolbar: { show: !1 } }, legend: { show: !1 } } }],
                },
                chart = new ApexCharts(document.querySelector("#line_chart_datalabel"), options);
            chart.render();
            $('.apexcharts-title-text').attr('fill', '#fff');
        });
    </script>
@endpush