@extends('layouts.index')
@php
setlocale(LC_TIME, 'id_ID');
Carbon\Carbon::setLocale('id');
@endphp
@section('title')
    Rekap LKH
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/extra-libs/prism/prism.css" />
    <link href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .l2 {
            padding-left: 1em;
        }

        .l3 {
            padding-left: 2em;
        }

    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Rekap LKH
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Rekap LKH</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->


        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form method="GET">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label>Unit Kerja</label>
                                        <select class="select1 form-control custom-select required" style="width: 100%"
                                            name="id_unit_kerja">
                                            <option value="">-- Pilih --</option>
                                            @foreach ($ref_unit_kerja as $item)
                                                <option class="l{{ $item->level }}" value="{{ $item->id }}"
                                                    {{ isset($_GET['id_unit_kerja']) ? ($_GET['id_unit_kerja'] == $item->id ? 'selected' : null) : null }}>
                                                    {{ $item->nama }}</option>
                                                @if ($item->children)
                                                    @foreach ($item->children as $item)
                                                        <option class="l{{ $item->level }}" value="{{ $item->id }}"
                                                            {{ isset($_GET['id_unit_kerja']) ? ($_GET['id_unit_kerja'] == $item->id ? 'selected' : null) : null }}>
                                                            {{ $item->nama }}</option>
                                                        @if ($item->children)
                                                            @foreach ($item->children as $item)
                                                                <option class="l{{ $item->level }}"
                                                                    value="{{ $item->id }}"
                                                                    {{ isset($_GET['id_unit_kerja']) ? ($_GET['id_unit_kerja'] == $item->id ? 'selected' : null) : null }}>
                                                                    {{ $item->nama }}
                                                                </option>
                                                            @endforeach
                                                        @endif
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label>Bulan</label>
                                        <select class="form-select" name="month">
                                            <option value="">-- Pilih --</option>
                                            @php
                                                $arrMonth = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                                            @endphp
                                            @foreach ($arrMonth as $item)
                                                <option value="{{ $loop->iteration }}"
                                                    {{ $month == $loop->iteration ? 'selected' : null }}>
                                                    {{ $item }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label>Tahun</label>
                                        <select class="form-select" name="year">
                                            <option value="">-- Pilih --</option>
                                            @for ($i = 2020; $i < 2023; $i++)
                                                <option value="{{ $i }}"
                                                    {{ $year == $i ? 'selected' : null }}>
                                                    {{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3" style="margin-top: 25px;">
                                        <button class="btn btn-outline-primary d-grid gap-2"> Filter </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>

        <section id="tabs">
            <div class="card">
                <div class="card-body">
                    <!-- Nav tabs -->
                    <div class="d-flex">
                        <h4>Laporan Kinerja Harian</h4>
                    </div>

                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#menunggu" role="tab">
                                <span>Menunggu <span
                                        class="badge ms-auto bg-warning">{{ $periksa->count() }}</span></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#diverifikasi" role="tab">
                                <span>Di Verifikasi <span
                                        class="badge ms-auto bg-success">{{ $verif->count() }}</span></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#ditolak" role="tab">
                                <span>Di Tolak <span class="badge ms-auto bg-danger">{{ $tolak->count() }}</span> </span>
                            </a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="menunggu" role="tabpanel">
                            <div class="p-3 mt-2">

                                <div class="table-responsive ">
                                    <table
                                        class="
                                                table
                                                mb-0
                                                text-nowrap
                                                varient-table
                                                align-middle
                                                fs-3
                                            ">
                                        <thead>
                                            <tr>
                                                <th scope="col" class="text-muted">No.</th>
                                                <th scope="col" class="text-muted">Pegawai</th>
                                                <th scope="col" class="text-muted">Tgl. Laporan</th>
                                                <th scope="col" class="text-muted">Judul</th>
                                                <th scope="col" class="text-muted">
                                                    Status
                                                </th>
                                                <th scope="col" class="text-muted text-end">
                                                    Opsi
                                                </th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($periksa as $item)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            @php
                                                                $path = asset('back/images/users/1.jpg');
                                                                if ($item->pegawai->foto != null) {
                                                                    if (Storage::exists($item->pegawai->foto)) {
                                                                        $path = Storage::url($item->pegawai->foto);
                                                                    } else {
                                                                        $path = asset($item->pegawai->foto);
                                                                    }
                                                                }
                                                            @endphp
                                                            <img src="{{ $path }}" class="rounded-circle"
                                                                width="35" height="35" style="object-fit: cover"
                                                                alt="flexy">
                                                            <div class="ms-3">
                                                                <h6 class="mb-0 fw-bold">
                                                                    {{ $item->pegawai->nama_lengkap }}</h6>
                                                                <span
                                                                    class="text-muted fs-9">{{ $item->pegawai->jabatan->nama }}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td> {{ date('d F Y', strtotime($item->tanggal)) }}</td>
                                                    <td>{{ $item->judul }}</td>
                                                    <td class="text-dark font-weight-medium ">
                                                        <span class="badge bg-warning">Menunggu</span>
                                                    </td>

                                                    <td class="text-dark font-weight-medium text-end">
                                                        <a href="javascript:void(0)"
                                                            onclick="detailLhk({{ $item->id }})"
                                                            class="text-info edit "><i data-feather="eye"
                                                                class="feather-sm fill-white"></i></a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>

                                    </table>
                                </div>

                            </div>
                        </div>
                        <div class="tab-pane  p-3" id="diverifikasi" role="tabpanel">
                            <div class="table-responsive ">
                                <table
                                    class="
                                        table
                                        mb-0
                                        text-nowrap
                                        varient-table
                                        align-middle
                                        fs-3
                                    ">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="text-muted">No.</th>
                                            <th scope="col" class="text-muted">Pegawai</th>
                                            <th scope="col" class="text-muted">Tgl. Laporan</th>
                                            <th scope="col" class="text-muted">Judul</th>
                                            <th scope="col" class="text-muted">
                                                Status
                                            </th>
                                            <th scope="col" class="text-muted text-end">
                                                Opsi
                                            </th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($verif as $item)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        @php
                                                            $path = asset('back/images/users/1.jpg');
                                                            if ($item->pegawai->foto != null) {
                                                                if (Storage::exists($item->pegawai->foto)) {
                                                                    $path = Storage::url($item->pegawai->foto);
                                                                } else {
                                                                    $path = asset($item->pegawai->foto);
                                                                }
                                                            }
                                                        @endphp
                                                        <img src="{{ $path }}" class="rounded-circle" width="35"
                                                            height="35" style="object-fit: cover" alt="flexy">
                                                        <div class="ms-3">
                                                            <h6 class="mb-0 fw-bold">{{ $item->pegawai->nama_lengkap }}
                                                            </h6>
                                                            <span
                                                                class="text-muted fs-9">{{ $item->pegawai->jabatan->nama }}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>{{ date('d F Y', strtotime($item->tanggal)) }}</td>
                                                <td>{{ $item->judul }}</td>
                                                <td class="text-dark font-weight-medium ">
                                                    <span class="badge bg-success">Terverifikasi</span>
                                                </td>

                                                <td class="text-dark font-weight-medium text-end">
                                                    <a href="javascript:void(0)" onclick="detailLhk({{ $item->id }})"
                                                        class="text-info edit "><i data-feather="eye"
                                                            class="feather-sm fill-white"></i></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>

                                </table>
                            </div>

                        </div>
                        <div class="tab-pane p-3" id="ditolak" role="tabpanel">
                            <div class="table-responsive ">
                                <table
                                    class="
                                    table
                                    mb-0
                                    text-nowrap
                                    varient-table
                                    align-middle
                                    fs-3
                                ">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="text-muted">No.</th>
                                            <th scope="col" class="text-muted">Pegawai</th>
                                            <th scope="col" class="text-muted">Tgl. Laporan</th>
                                            <th scope="col" class="text-muted">Judul</th>
                                            <th scope="col" class="text-muted">
                                                Status
                                            </th>
                                            <th scope="col" class="text-muted text-end">
                                                Opsi
                                            </th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($tolak as $item)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        @php
                                                            $path = asset('back/images/users/1.jpg');
                                                            if ($item->pegawai->foto != null) {
                                                                if (Storage::exists($item->pegawai->foto)) {
                                                                    $path = Storage::url($item->pegawai->foto);
                                                                } else {
                                                                    $path = asset($item->pegawai->foto);
                                                                }
                                                            }
                                                        @endphp
                                                        <img src="{{ $path }}" class="rounded-circle" width="35"
                                                            height="35" style="object-fit: cover;" alt="flexy">
                                                        <div class="ms-3">
                                                            <h6 class="mb-0 fw-bold">{{ $item->pegawai->nama_lengkap }}
                                                            </h6>
                                                            <span
                                                                class="text-muted fs-9">{{ $item->pegawai->jabatan->nama }}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>{{ date('d F Y', strtotime($item->tanggal)) }}</td>
                                                <td>{{ $item->judul }}i</td>
                                                <td class="text-dark font-weight-medium ">
                                                    <span class="badge bg-danger">Di Tolak</span>
                                                </td>

                                                <td class="text-dark font-weight-medium text-end">
                                                    <a href="javascript:void(0)" onclick="detailLhk({{ $item->id }})"
                                                        class="text-info edit "><i data-feather="eye"
                                                            class="feather-sm fill-white"></i></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>

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

        </section>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="detailLhk" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                Detail Laporan Kinerja Harian
            </h5>
            <hr>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div>
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="d-flex align-items-center">
                                <img src="{{ asset('back') }}/images/users/1.jpg" class="rounded-3" width="50"
                                    height="50" style="object-fit: cover;" id="foto_canvas" />
                                <div class="ms-3">
                                    <h5 id="nama_lengkap_canvas">Gia L Ayura</h5>
                                    <h6 class="card-subtitle mb-0" id="tanggal_canvas">20 November 2021 at 5:06 PM</h6>
                                </div>
                            </div>
                            {{-- <div class="ms-auto">
                                <div class="dropdown">
                                    <a href="#" class="link" id="dropdownMenuButton" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        <i data-feather="more-horizontal" class="feather-sm"></i>
                                    </a>

                                </div>
                            </div> --}}
                        </div>
                        <div class="mt-4" id="uraian_canvas">
                        </div>
                        <div class="mt-4" id="lampiran_canvas_section" style="display: none">
                            <i class="fa fa-paperclip"></i><a href="#" style="color:black" id="lampiran_canvas" download> Lampiran</a>
                        </div>
                        <div class="d-flex flex-row comment-row py-3">
                            <div id="verifikator" style="display: none">
                                <div class="p-2">
                                    <img src="{{ asset('back') }}/images/users/4.jpg" alt="user" width="50"
                                        class="rounded-circle" id="foto_verifikasi_canvas" height="50"
                                        style="object-fit: cover;" />
                                </div>
                                <div class="comment-text w-100">
                                    <h5 class="font-weight-medium" id="nama_lengkap_verifikator_canvas">Michael Jorden</h5>
                                    <h6 class="card-subtitle mb-0 text-primary">Verifikator</h6>
                                    <span class="mb-3 d-block mt-3" id="uraian_verifikasi_canvas">Mohon untuk kedepannya
                                        laporan dilengkapi dengan bukti
                                        eviden
                                    </span>
                                    <span class="mb-3 d-block mt-3" id="alasan_canvas">Mohon untuk kedepannya
                                        laporan dilengkapi dengan bukti
                                        eviden
                                    </span>
                                    <div class="comment-footer d-md-flex align-items-center ">
                                        <div class="text-muted" id="tanggal_verifikasi_canvas">April 14, 2021</div>
                                        <div class=" ms-auto" id="status_canvas">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
    <!--This page plugins -->
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>
    <script src="{{ asset('back') }}/assets/extra-libs/prism/prism.js"></script>

    <script>
        $('.select1').select2({
            templateResult: function(data) {
                if (!data.element) {
                    return data.text;
                }

                var $element = $(data.element);

                var $wrapper = $('<span></span>');
                $wrapper.addClass($element[0].className);

                $wrapper.text(data.text);

                return $wrapper;
            }
        });

        //Edit Data

        var offCanvasDetailLhk = document.getElementById("detailLhk");
        var offCanvasEdit = new bootstrap.Offcanvas(offCanvasDetailLhk, {
            backdrop: true
        });

        function detailLhk(id) {

            fetch("{{ url('laporan-kinerja-harian-detail') }}/" + id).then(function(response) {
                response.json().then(function(resp) {

                    var nama_lengkap = resp.data.pegawai.nama_lengkap;
                    var foto = resp.data.pegawai.foto;
                    var tanggal = resp.data.tanggal;
                    var uraian = resp.data.uraian;
                    var lampiran = resp.data.lampiran ? resp.data.lampiran : '';
                    var status = resp.data.status;

                    $('#nama_lengkap_canvas').html(nama_lengkap);
                    $('#tanggal_canvas').html(tanggal);
                    $('#foto_canvas').attr('src', foto);
                    $('#uraian_canvas').html(uraian);
                    if (lampiran) {
                        $('#lampiran_canvas_section').show();
                        $('#lampiran_canvas').attr('href',lampiran);
                    }else{
                        $('#lampiran_canvas_section').hide();
                    }

                    if (status != 'periksa') {
                        document.getElementById('verifikator').style.display = 'block';

                        var nama_lengkap_varifikator = resp.data.verifikators.nama_lengkap;
                        var foto_verifikasi = resp.data.verifikators.foto;
                        var tanggal_verifikasi = resp.data.tanggal_verifikasi;
                        var uraian_verifikasi = resp.data.uraian_verifikasi ? resp.data.uraian_verifikasi : '';
                        var alasan = resp.data.alasan ? resp.data.alasan : '';

                        $('#nama_lengkap_verifikator_canvas').html(nama_lengkap_varifikator);
                        $('#tanggal_verifikasi_canvas').html(tanggal_verifikasi);
                        $('#foto_verifikasi_canvas').attr('src', foto_verifikasi);
                        $('#uraian_verifikasi_canvas').html(uraian_verifikasi);
                        $('#alasan_canvas').html(alasan);

                        if (status == 'verif') {
                            $('#status_canvas').html(
                                '<span class=" badge bg-light-success text-success ounded-pill ont-weight-medium fs-1 py-1 ">Terverifikasi</span>'
                            );
                        } else {
                            $('#status_canvas').html(
                                '<span class=" badge bg-light-danger text-danger ounded-pill ont-weight-medium fs-1 py-1 ">Ditolak</span>'
                            );
                        }
                    } else {
                        document.getElementById('verifikator').style.display = 'none';
                    }

                });
            });

            offCanvasEdit.show();
        }
    </script>

@endsection