@extends('user.template')
@section('title', $title)
@section('head')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('content')

    <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.mr') }}">Manajemen Risiko</a></li>
                    <li class="breadcrumb-item"><a
                            href="{{ route('user.mr.show', ['id' => $mr->id]) }}">{{ $mr->pemda }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Kertas Kerja</li>
                    <li class="breadcrumb-item active" aria-current="page">Tambah</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 Strategis Pemda <br>
                        <small>{{ $mr->pemda }}</small></h4>
                    <table class="table table-sm">
                        <tr>
                            <td>Nama Pemda</td>
                            <td><b>{{ $mr->pemda }}</b></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 style="width: 200px">Urusan Pemerintahan</td>
                            <td><b>{{ $selectUrusan }}</b></td>
                        </tr>
                        <tr>
                            <td>Tujuan Strategis Pemerintah</td>
                            <td>{{ $konteks->tujuan }}</td>
                        </tr>
                        <tr>
                            <td>Sasaran</td>
                            <td>{{ $konteks->sasaran }}</td>
                        </tr>
                    </table>

                    <table class="table table-sm mt-4 table-bordered">
                        <tr class="text-center">
                            <td rowspan="2">No</td>
                            <td rowspan="2">Indikator Kinerja</td>
                            <td colspan="3">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>Uraian</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->indikator_kinerja }}</td>
                                <td class="align-top">{{ $kk->risiko_uraian }}</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 (count(json_decode($kk->dampak_uraian, true)) > 1)
                                        <ol>
                                            @foreach (json_decode($kk->dampak_uraian, true) as $dampak)
                                                <li>{{ $dampak }}</li>
                                            @endforeach
                                        </ol>
                                    @else
                                        {{ json_decode($kk->dampak_uraian, true)[0] }}
                                    @endif
                                </td>
                                <td class="align-top">{{ $kk->dampak_pihak_terkena }}</td>
                                <td class="align-top">
                                    <button class="btn btn-outline-secondary btn-sm" data-toggle="modal"
                                        data-name="Edit {{ $title }}" 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_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>
                    <hr>
                    <button class="btn btn-success btn-block" data-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">
            <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="menu" value="kk_strategis_pemda">
                    <div class="modal-body">
                        <div id="inputHidden"></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_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_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-outline-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">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-outline-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-link" data-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="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('#indikator_keluaran').val('')
                modal.find('#risiko_tahap').val('')
                modal.find('#risiko_uraian').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('#indikator_keluaran').val(button.data('indikator_keluaran'))
                modal.find('#risiko_tahap').val(button.data('risiko_tahap'))
                modal.find('#risiko_uraian').val(button.data('risiko_uraian'))
                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