@extends('user.template')
@section('title', $title)
@section('head')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('content')
    <style>
        table.table.table-sm.mt-4.table-bordered,
        table.table.table-sm.mt-4.table-bordered tr td
        {
            font-size: 85%;
        }
    </style>
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                    <h3 class="font-weight-bold">Tambah Kertas Kerja Strategis Pemda</h3>
                    <h6 class="font-weight-normal mb-0">{{ $mr->pemda }}</h6>
                </div>
                <div class="col-12 col-xl-4">
                    <div class="justify-content-end d-flex">
                        <div class="flex-md-grow-1 flex-xl-grow-0">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 mb-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('user.dinas.terkait') }}">Dinas Terkait</a></li>
                    <li class="breadcrumb-item"><a
                            href="{{ route('user.dinas.terkait.show', ['mr_id' => $mr->id]) }}">{{ $mr->pemda }}</a></li>
                    <li class="breadcrumb-item"><a
                            href="{{ route('user.dinas.terkait.dinas.show', ['mr_id' => $mr->id, 'dinas_id' => $dinas->id]) }}">{{ $dinas->entitas }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row justify-content-md-center">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title text-center mb-5">Tambah Kertas Kerja Operasional Pemda <br>
                        <small>{{ $mr->pemda }}</small>
                    </h4>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <tr>
                                <td>Nama Pemda</td>
                                <td><b>{{ $mr->pemda }}</b></td>
                            </tr>
                            <tr>
                                <td>Nama OPD</td>
                                <td>{{ $dinas->entitas }}</td>
                            </tr>
                            <tr>
                                <td>Tahun Penilaian</td>
                                <td><b>{{ $mr->tahun }}</b></td>
                            </tr>
                            <tr>
                                <td>Periode yang Dinilai</td>
                                <td><b>{{ $mr->periode }}</b></td>
                            </tr>
                            <tr>
                                <td>Tujuan Strategis</td>
                                <td>{{ $konteks->tujuan }}</td>
                            </tr>
                            <tr>
                                <td>Sasaran strategis OPD</td>
                                <td>{{ $konteks->sasaran }}</td>
                            </tr>
                            <tr>
                                <td style="width: 200px">Urusan Pemerintahan</td>
                                <td><b>{{ $selectUrusan }}</b></td>
                            </tr>
                            <tr>
                                <td>OPD yang Dinilai</td>
                                <td>{{ $dinas->entitas }}</td>
                            </tr>
                        </table>

                        <table class="table table-sm mt-4 table-bordered">
                            <tr class="text-center">
                                <td rowspan="2">No</td>
                                <td rowspan="2">Kegiatan</td>
                                <td rowspan="2">Indikator Keluaran</td>
                                <td colspan="5">Risiko</td>
                                <td colspan="2">Sebab</td>
                                <td rowspan="2">C/UC</td>
                                <td colspan="2">Dampak</td>
                                <td rowspan="2">Action</td>
                            </tr>
                            <tr class="text-center">
                                <td>Tahap</td>
                                <td>Uraian</td>
                                <td>Skenario Risiko<div style="font-size:70%">(siapa (who) melakukan apa (what))</td>
                                <td>Kode <br>Risiko</td>
                                <td>Pemilik</td>
                                <td>Uraian</td>
                                <td>Sumber</td>
                                <td>Uraian</td>
                                <td>Pihak yang Terkena</td>
                            </tr>
                            @foreach ($kertasKerjas as $n => $kk)
                                <tr class="kertasKerja{{ $kk->id }}">
                                    <td class="text-center align-top">{{ $n + 1 }}</td>
                                    <td class="align-top">{{ $kk->kegiatan }}</td>
                                    <td class="align-top">{{ $kk->indikator_kinerja }}</td>
                                    <td class="align-top">{{ $kk->risiko_tahap }}</td>
                                    <td class="align-top">{{ $kk->risiko_uraian }}</td>
                                    <td class="align-top">{{ $kk->risiko_skenario }}</td>
                                    <td class="align-top">{{ $kk->risiko_kode }}</td>
                                    <td class="align-top">{{ $kk->risiko_pemilik }}</td>
                                    <td class="align-top">
                                        @if (count(json_decode($kk->sebab_uraian, true)) > 1)
                                            <ol>
                                                @foreach (json_decode($kk->sebab_uraian, true) as $sebabUraian)
                                                    <li>{{ $sebabUraian }}</li>
                                                @endforeach
                                            </ol>
                                        @else
                                            {{ json_decode($kk->sebab_uraian, true)[0] }}
                                        @endif
                                    </td>
                                    <td class="align-top">{{ $kk->sebab_sumber }}</td>
                                    <td class="text-center align-top">{{ $kk->c_or_uc }}</td>
                                    <td class="align-top">
                                        @if (isset(json_decode($kk->dampak_uraian)[1]))
                                            <ol>
                                                @foreach (json_decode($kk->dampak_uraian, true) as $dampak)
                                                    <li>{{ $dampak }}</li>
                                                @endforeach
                                            </ol>
                                        @else
                                            {{ json_decode($kk->dampak_uraian, true)[0] ?? null }}
                                        @endif
                                    </td>
                                    <td class="align-top">{{ $kk->dampak_pihak_terkena }}</td>
                                    <td class="align-top">
                                        <button style="margin-bottom:4px;" class="btn btn-success btn-sm" data-bs-toggle="modal"
                                            data-name="Edit {{ $title }}" data-kegiatan="{{ $kk->kegiatan }}"
                                            data-ket="edit" href="#modalData" data-id="{{ $kk->id }}"
                                            data-indikator_kinerja="{{ $kk->indikator_kinerja }}"
                                            data-risiko_tahap="{{ $kk->risiko_tahap }}"
                                            data-risiko_uraian="{{ $kk->risiko_uraian }}"
                                            data-risiko_skenario="{{ $kk->risiko_skenario }}"data-risiko_kode="{{ $kk->risiko_kode }}"
                                            data-risiko_pemilik="{{ $kk->risiko_pemilik }}"
                                            data-sebab_uraian="{{ $kk->sebab_uraian }}"
                                            data-sebab_sumber="{{ $kk->sebab_sumber }}" data-c_or_uc="{{ $kk->c_or_uc }}"
                                            data-dampak_uraian="{{ $kk->dampak_uraian }}"
                                            data-dampak_pihak_terkena="{{ $kk->dampak_pihak_terkena }}">Edit</button>
                                        <a class="btn btn-danger btn-sm" href="#"
                                            onclick="hapus('{{ route('user.kertas.kerja.delete', ['id' => $kk->id]) }}', 'kertasKerja{{ $kk->id }}', 'Hapus {{ $title }} ?')">Hapus</a>
                                    </td>
                                </tr>
                            @endforeach

                        </table>
                    </div>
                    <hr>
                    <button class="btn btn-success btn-block" data-bs-toggle="modal"
                        data-name="Tambah {{ $title }} Baru" data-ket="tambah" href="#modalData">Buat
                        {{ $title }} Baru</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modalData" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                </div>
                <form method="post" id="formAction" class="form-horizontal"> @csrf
                    <input type="hidden" name="konteks_id" value="{{ $konteks->id }}">
                    <input type="hidden" name="dinas_terkait_id" value="{{ $dinas->id }}">
                    <input type="hidden" name="menu" value="kk_operasional_opd">
                    <div class="modal-body">
                        <div id="inputHidden"></div>
                        <div class="form-group">
                            <label for="kegiatan">Kegiatan</label>
                            <input type="text" name="kegiatan" class="form-control" required id="kegiatan"
                                placeholder="Kegiatan">
                        </div>
                        <div class="form-group">
                            <label for="indikator_kinerja">Indikator Kinerja</label>
                            <input type="text" name="indikator_kinerja" class="form-control" required
                                id="indikator_kinerja" placeholder="Indikator Kinerja">
                        </div>
                        <div class="form-group">
                            <label for="risiko_tahap">Tahap Risiko</label>
                            <input type="text" name="risiko_tahap" class="form-control" required id="risiko_tahap"
                                placeholder="Tahap Risiko">
                        </div>
                        <div class="form-group">
                            <label for="risiko_uraian">Uraian Risiko</label>
                            <input type="text" name="risiko_uraian" class="form-control" required id="risiko_uraian"
                                placeholder="Uraian Risiko">
                        </div>
                        <div class="form-group">
                            <label for="risiko_uraian">Skenario Risiko</label>
                            <input type="text" name="risiko_skenario" class="form-control" required
                                id="risiko_skenario" placeholder="Skenario Risiko">
                        </div>
                        <div class="form-group">
                            <label for="risiko_kode">Kode Risiko</label>
                            <input type="text" name="risiko_kode" class="form-control" required id="risiko_kode"
                                placeholder="Kode Risiko">
                        </div>
                        <div class="form-group">
                            <label for="risiko_pemilik">Pemilik Risiko</label>
                            <input type="text" name="risiko_pemilik" class="form-control" required
                                id="risiko_pemilik" placeholder="Pemilik Risiko">
                        </div>
                        <div class="form-group">
                            <label for="dampak_uraian">Sebab Uraian</label>
                            <div id="sebab_uraians">
                            </div>
                            <a href="#!" class="btn btn-sm btn-success mt-2 btn-block"
                                onclick="addInputText('#sebab_uraians','sebab_uraian','sebab_uraian[]','Sebab Uraian','')"
                                style="border-radius: 5px">Tambah Sebab Uraian</a>
                        </div>
                        <div class="form-group">
                            <label for="sebab_sumber">Sumber Sebab</label>
                            <input type="text" name="sebab_sumber" class="form-control" required id="sebab_sumber"
                                placeholder="Sumber Sebab">
                        </div>
                        <div class="form-group">
                            <label for="pemda">C/UC</label>
                            <select name="c_or_uc" id="c_or_uc" class="form-control">
                                <option value="C" selected>C</option>
                                <option value="UC">UC</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="dampak_uraian">Dampak Uraian</label>
                            <div id="dampak_uraians">
                            </div>
                            <a href="#!" class="btn btn-sm btn-success mt-2 btn-block"
                                onclick="addInputText('#dampak_uraians','dampak_uraian','dampak_uraian[]','Dampak Uraian','')"
                                style="border-radius: 5px">Tambah Dampak Uraian</a>
                        </div>
                        <div class="form-group">
                            <label for="dampak_pihak_terkena">Dampak Pihak Terkena</label>
                            <input type="text" name="dampak_pihak_terkena" class="form-control" required
                                id="dampak_pihak_terkena" placeholder="Dampak Pihak Terkena">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')

    <script src="{{ asset('js/sweetalert2.js') }}"></script>

    <script>
        function addInputText(roomId, id, name, menu, value = null) {
            var rand = Math.floor(Math.random() * (9999 - 1) + 1);
            var html = '<div id="ss' + rand +
                '"> <button type="button" class="btn btn-sm btn-danger close" onclick="removeInput(`ss' + rand +
            '`)" style="position: absolute; right: 30px;"> <span aria-hidden="true">&times;</span> </button><input type="text" class="form-control mb-1" id="' +
                id + '" name="' + name + '" value="' + value + '" placeholder="' + menu + '"></div>'
            $(roomId).append(html);
        }

        function removeInput(id) {
            console.log(id);
            $("#" + id).remove();
        }

        $('#modalData').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var name = button.data('name')
            var ket = button.data('ket')

            var modal = $(this)
            modal.find('.modal-title').text(name)

            if (ket == 'tambah') {
                modal.find('#formAction').attr('action', "{{ route('user.kertas.kerja.store') }}")
                modal.find('#inputHidden').html('')

                modal.find('#indikator_kinerja').val('')
                modal.find('#kegiatan').val('')
                modal.find('#risiko_tahap').val('')
                modal.find('#risiko_uraian').val('')
                modal.find('#risiko_skenario').val('')
                modal.find('#risiko_kode').val('')
                modal.find('#risiko_pemilik').val('')
                modal.find('#sebab_sumber').val('')
                modal.find('#c_or_uc').val('C')
                modal.find('#dampak_pihak_terkena').val('')
                $('#dampak_uraians').empty();
                addInputText('#dampak_uraians', 'dampak_uraian', 'dampak_uraian[]', 'Dampak Uraian', '')
                $('#sebab_uraians').empty();
                addInputText('#sebab_uraians', 'sebab_uraian', 'sebab_uraian[]', 'Sebab Uraian', '')

            } else {
                var id = button.data('id')

                var dampakUraian = button.data('dampak_uraian');
                $('#dampak_uraians').empty();
                dampakUraian.forEach(element => {
                    addInputText('#dampak_uraians', 'dampak_uraian', 'dampak_uraian[]', 'Dampak Uraian',
                        element)
                });

                var SebabUraian = button.data('sebab_uraian');
                $('#sebab_uraians').empty();
                SebabUraian.forEach(element => {
                    addInputText('#sebab_uraians', 'sebab_uraian', 'sebab_uraian[]', 'Sebab Uraian',
                        element)
                });

                modal.find('#indikator_kinerja').val(button.data('indikator_kinerja'))
                modal.find('#kegiatan').val(button.data('kegiatan'))
                modal.find('#risiko_tahap').val(button.data('risiko_tahap'))
                modal.find('#risiko_uraian').val(button.data('risiko_uraian'))
                modal.find('#risiko_skenario').val(button.data('risiko_skenario'))
                modal.find('#risiko_kode').val(button.data('risiko_kode'))
                modal.find('#risiko_pemilik').val(button.data('risiko_pemilik'))
                modal.find('#sebab_sumber').val(button.data('sebab_sumber'))
                modal.find('#c_or_uc').val(button.data('c_or_uc'))
                modal.find('#dampak_pihak_terkena').val(button.data('dampak_pihak_terkena'))

                modal.find('#inputHidden').html('<input type="hidden" name="id" value="' + id +
                    '"><input type="hidden" name="_method" value="put">')
                modal.find('#formAction').attr('action', "{{ route('user.kertas.kerja.update') }}")

            }
        })
    </script>
@endsection