@php
    use App\Models\V2\Organisasi\NomenklaturOrganisasi;
@endphp
@extends('layoutsV2.master')
@push('plugin-styles')
    {!! Html::style('/assets/plugins/select2/select2.min.css') !!}
    {!! Html::style('/assets/plugins/sweetalert2/sweetalert2.min.css') !!}
    {!! Html::style('/assets/plugins/prismjs/prism.css') !!}
    {!! Html::style('/assets/plugins/simplemde/simplemde.min.css') !!}
    <link href="{{ asset('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css') }}"
          rel="stylesheet">
@endpush
@section('content')
    <div class="row mb-3">
        <div class="col-lg-6">
            <h5 class="mb-3 mb-md-0">{{ENV('APP_TITLE')}}</h5>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header text-uppercase">
                    Verifikasi Pengukuran Realisasi Kinerja
                    @if(request('data-skpd'))
                        {!! $organisasi->where('kode_organisasi', request('data-skpd'))->last()?->nama !!}
                        (<span id="show_id_organisasi">{{request('data-skpd')}}</span>)
                    @endif
                </div>
                <div class="card-body">
                    <div class="row">
                        <input type="text" readonly disabled hidden id="edited_id_show">
                        <div class="col-lg-2">
                            <div class="form-group">
                                <select id="filter_year" class="form-control w-100">
                                    @foreach($year as $item)
                                        <option value="{{$item->tahun}}"
                                                @if($item->tahun==$now->format('Y'))
                                                    selected
                                                @endif
                                        >Tahun {{$item->tahun}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <select id="filter_triwulan" class="form-control w-100">
                                    @foreach(['I', 'II', 'III', 'IV'] as $item)
                                        <option value="{{ $item }}"
                                                @if(isTriwulan(now()->month) === $item) selected @endif>
                                            Triwulan {{ $item }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="form-group">
                                <select id="filter_opd" class="form-control w-100">
                                    <option></option>
                                    @if($organisasi instanceof \App\Models\V2\Organisasi\NomenklaturOrganisasi)
                                        <option
                                                value="{!! $organisasi->kode_organisasi !!}"
                                                selected>{!! strtoupper($organisasi->aktif?->last()?->pivot->nama)!!}</option>
                                    @else
                                        <option></option>
                                        @foreach($organisasi ?? collect()  as $org)
                                            <option
                                                    value="{{ $org->kode_organisasi }}" {{ $org->kode_organisasi == request('data-skpd') ? 'selected' : '' }}>
                                                {{ $org->nama }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive" style="border-radius:2px !important;" id="show_content">
                        <div class="alert alert-info mb-0">Pilih tahun dan satuan kerja perangkat daerah terlebih
                            dahulu
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('pagesV2.verifikasi.renaksi.triwulan.modal')
@endsection
@push('plugin-scripts')
    {!! Html::script('/assets/plugins/select2/select2.min.js') !!}
    {!! Html::script('/assets/plugins/sweetalert2/sweetalert2.min.js') !!}
    {!! Html::script('/assets/plugins/prismjs/prism.js') !!}
    {!! Html::script('/assets/plugins/tinymce/tinymce.min.js') !!}
    {!! Html::style('/assets/plugins/simplemde/simplemde.min.css') !!}
@endpush

@push('custom-scripts')
    {!! Html::script('/assets/js/tinymce.js') !!}
    {!! Html::script('/assets/js/select2.js') !!}
    {!! Html::script('/assets/js/sweet-alert.js') !!}
    {!! Html::script('/assets/js/demo.js') !!}
    {!! Html::script('/assets/js/email.js') !!}
    <script>
        let form = {};

        function loading() {
            $('#show_content').html('<i class="fa fa-spin fa-spinner"></i> Sedang dalam proses...');
        }

        function data() {
            form.tahun = $('#filter_year').val();
            form.triwulan = $('#filter_triwulan').val();
            form.skpd = $('#filter_opd').val();

            loading();

            if (form.tahun && form.triwulan && form.skpd) {
                axios.post(window.location.origin + '/v2/verifikasi/renaksi-triwulan', {
                    tahun: form.tahun,
                    triwulan: form.triwulan,
                    skpd: form.skpd,
                }).then(r => {
                    $('#show_content').html(r?.data?.data);
                }).catch(e => {
                    $('#show_content').html('<div class="alert alert-danger">Data tidak dapat ditampilkan</div>');
                });
            }
            else {
                $('#show_content')
                        .html('<div class="alert alert-info">Pilih tahun dan satuan kerja perangkat daerah terlebih dahulu</div>');
            }
        }

        $(document).ready(() => {
            $('#filter_year').select2({
                placeholder: 'Pilih Tahun',
            }).on('change', (e) => data());

            $('#filter_triwulan').select2({
                placeholder: 'Pilih Triwulan',
            }).on('change', (e) => data());

            $('#filter_opd').select2({
                placeholder: 'Pilih Satuan Kerja Perangkat Daerah',
            }).on('change', (e) => data());

            $(document).on('click', '.btn-verifikasi', function(ev) {
                const row = $(this).closest('tr');
                form.rkpdId = row.data('rkpd');
                form.target = row.data('target');
                form.tipe = row.data('tipe');

                axios.post(window.location.origin + '/v2/verifikasi/renaksi-triwulan/show', {
                    tahun: $('#filter_year').val(),
                    triwulan: $('#filter_triwulan').val(),
                    skpd: $('#filter_opd').val(),
                    dataId: form.rkpdId,
                    dataTipe: form.tipe,
                    dataTarget: form.target,
                }).then(r => {
                    $('#modal-verifikasi .modal-body').html(r?.data?.data);

                    $('#f_verifikator').select2({
                        placeholder: 'Pilih Verifikator',
                    }).on('change', (e) => console.log('sss'));

                    tinymce.init({
                        selector: 'textarea#f_analisis',
                        menubar: false,
                        statusbar: false,
                        toolbar: false,
                        min_height: 70,
                        readonly : 1
                    });

                    tinymce.init({
                        selector: 'textarea#f_comment',
                    });
                }).catch(e => console.error(e));
                $('#modal-verifikasi').modal('show').on('hidden.bs.modal', () => {
                    form = {};
                    $('#modal-verifikasi .modal-body').empty();
                    tinymce.remove()
                });

            });

            $('#modal-verifikasi').on('click', '#btn-simpan', function(ev) {
                const posted = {
                    tahun: $('#filter_year').val(),
                    triwulan: $('#filter_triwulan').val(),
                    skpd: $('#filter_opd').val(),
                    dataId: form.rkpdId,
                    dataTipe: form.tipe,
                    dataTarget: form.target,
                    verifikasi: $('#f_verifikator :selected').data('verifikator-id'),
                    comment: tinymce.get('f_comment').getContent(),
                };

                axios.post(window.location.origin + '/v2/verifikasi/renaksi-triwulan/store', posted)
                        .then(r => {
                            Swal.fire({
                                title: 'Success',
                                text: r?.data?.message ?? 'Berhasil menyimpan data!',
                                icon: 'success',
                            });
                            $('#modal-verifikasi').modal('hide');
                            $('#filter_opd').trigger('change');
                        })
                        .catch(e => {
                            Swal.fire({
                                title: 'Failed',
                                text: e?.response?.data?.message ?? 'Gagal menyimpan data!',
                                icon: 'error',
                            });

                        });
            });

        });
    </script>
@endpush