{{--Form Add Sasaran--}}
<div class="modal fade" id="addSasaran" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0">
            <div class="modal-header bg-inverse-danger">
                <h5 class="modal-title text-uppercase text-danger" id="exampleModalLabel">Formulir Sasaran RPJMD</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><small><i data-feather="x-circle" class="text-danger"></i></small></span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formAddSasaran">
                    <div class="form-group">
                        <label>Tujuan <code>*</code></label>
                        <select id="fieldAddTujuan" class="w-100" aria-label="fieldAddTujuan">
                            <option></option>
                            @foreach ($rpjmdTujuan as $tujuan)
                                <option value="{!! $tujuan->id !!}">{!! $tujuan->tujuan !!}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Sasaran <code>*</code></label>
                        <input id="fieldAddSasaran" aria-label="fieldAddSasaran" type="text" class="form-control"
                               autocomplete="off"
                               placeholder="Tulis sasaran RPJMD disini....">
                    </div>
                    <div class="form-group">
                        <label>Indikator Kinerja <code>*</code></label>
                        <input id="fieldAddIndikator" aria-label="fieldAddIndikator" type="text" class="form-control"
                               autocomplete="off" placeholder="Tulis indikator kinerja disini....">
                    </div>
                    <div class="form-group">
                        <label>Satuan <code>*</code></label>
                        <input id="fieldAddSatuan" aria-label="fieldAddSatuan" type="text" class="form-control"
                               autocomplete="off" placeholder="Tulis satuan disini....">
                    </div>
                    <div class="table-responsive" style="border-radius:2px !important; width:100%">
                        <table class="table table-bordered table-hover table-sm">
                            <thead>
                            <tr>
                                <th rowspan="2" style="vertical-align: middle;" class="text-center">
                                    AWAL RPJMD <br> {!! $tahunAwal - 1 !!}
                                </th>
                                <th colspan="5" style="vertical-align: middle;" class="text-center">
                                    TARGET
                                </th>
                            </tr>
                            <tr>
                                @for ($i = $tahunAwal; $i <= $tahunAkhir; $i++)
                                    <th class="text-center">{!! $i !!}</th>
                                @endfor
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                @for ($i = $tahunAwal - 1; $i <= $tahunAkhir; $i++)
                                    <td class="text-center">
                                        <input id="fieldAddTarget[{!! $i !!}]" name="fieldAddTarget[{!! $i !!}]"
                                               type="text" class="form-control text-center" autocomplete="off"
                                               aria-label="fieldAddTarget[{!! $i !!}]" placeholder="-">
                                    </td>
                                @endfor
                            </tr>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="saveSasaran(this)" type="button" class="btn btn-danger text-uppercase text-white">
                    Simpan
                </button>
                <button type="button" class="btn btn-outline-secondary text-uppercase" data-dismiss="modal">Batal
                </button>
            </div>
        </div>
    </div>
</div>

{{--Form Edit Sasaran--}}
<div class="modal fade" id="editSasaran" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0">
            <div class="modal-header bg-inverse-danger">
                <h5 class="modal-title text-uppercase text-danger" id="exampleModalLabel">Perbaharui Sasaran RPJMD</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><small><i data-feather="x-circle" class="text-danger"></i></small></span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formEditSasaran">
                    <div class="form-group">
                        <label>Tujuan <code>*</code></label>
                        <select id="fieldEditTujuan" class="w-100" aria-label="fieldEditTujuan">
                            <option></option>
                            @foreach ($rpjmdTujuan as $tujuan)
                                <option value="{!! $tujuan->id !!}">{!! $tujuan->tujuan !!}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Sasaran <code>*</code></label>
                        <input id="fieldEditSasaran" type="text" class="form-control" autocomplete="off"
                               aria-label="fieldEditSasaran" placeholder="Tulis sasaran RPJMD disini....">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="updateSasaran(this)" type="button" class="btn btn-danger text-uppercase text-white">
                    Perbaharui
                </button>
                <button type="button" class="btn btn-outline-secondary text-uppercase" data-dismiss="modal">Batal
                </button>
            </div>
        </div>
    </div>
</div>

{{--Form Add Sasaran Indikator--}}
<div class="modal fade" id="addSasaranIndikator" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0">
            <div class="modal-header bg-inverse-danger">
                <h5 class="modal-title text-uppercase text-danger" id="exampleModalLabel">Formulir Indikator Sasaran
                                                                                          RPJMD</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><small><i data-feather="x-circle" class="text-danger"></i></small></span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formAddSasaranIndikator">
                    <div class="alert alert-danger" role="alert" id="fieldAddSasaran"></div>
                    <div class="form-group">
                        <label>Indikator Kinerja <code>*</code></label>
                        <input id="fieldAddIndikator" aria-label="fieldAddIndikator" type="text" class="form-control"
                               autocomplete="off" placeholder="Tulis indikator kinerja disini....">
                    </div>
                    <div class="form-group">
                        <label>Satuan <code>*</code></label>
                        <input id="fieldAddSatuan" aria-label="fieldAddSatuan" type="text" class="form-control"
                               autocomplete="off" placeholder="Tulis satuan disini....">
                    </div>
                    <div class="table-responsive" style="border-radius:2px !important; width:100%">
                        <table class="table table-bordered table-hover table-sm">
                            <thead>
                            <tr>
                                <th rowspan="2" style="vertical-align: middle;" class="text-center">
                                    AWAL RPJMD <br> {!! $tahunAwal - 1 !!}
                                </th>
                                <th colspan="5" style="vertical-align: middle;" class="text-center">
                                    TARGET
                                </th>
                            </tr>
                            <tr>
                                @for ($i = $tahunAwal; $i <= $tahunAkhir; $i++)
                                    <th class="text-center">{!! $i !!}</th>
                                @endfor
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                @for ($i = $tahunAwal - 1; $i <= $tahunAkhir; $i++)
                                    <td class="text-center">
                                        <input id="fieldAddTarget[{!! $i !!}]" name="fieldAddTarget[{!! $i !!}]"
                                               type="text" class="form-control text-center" autocomplete="off"
                                               aria-label="fieldAddTarget[{!! $i !!}]" placeholder="-">
                                    </td>
                                @endfor
                            </tr>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="saveSasaranIndikator(this)" type="button"
                        class="btn btn-danger text-uppercase text-white">
                    Simpan
                </button>
                <button type="button" class="btn btn-outline-secondary text-uppercase" data-dismiss="modal">Batal
                </button>
            </div>
        </div>
    </div>
</div>

{{--Form Edit Sasaran Indikator--}}
<div class="modal fade" id="editSasaranIndikator" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0">
            <div class="modal-header bg-inverse-danger">
                <h5 class="modal-title text-uppercase text-danger" id="exampleModalLabel">
                    Perbaharui Indikator Sasaran RPJMD
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><small><i data-feather="x-circle" class="text-danger"></i></small></span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formEditSasaranIndikator">
                    <div class="alert alert-danger" role="alert" id="fieldEditSasaran"></div>
                    <div class="form-group">
                        <label>Indikator Kinerja <code>*</code></label>
                        <input id="fieldEditIndikator" aria-label="fieldEditIndikator" type="text" class="form-control"
                               autocomplete="off" placeholder="Tulis indikator kinerja disini....">
                    </div>
                    <div class="form-group">
                        <label>Satuan <code>*</code></label>
                        <input id="fieldEditSatuan" aria-label="fieldEditSatuan" type="text" class="form-control"
                               autocomplete="off" placeholder="Tulis satuan disini....">
                    </div>
                    <div class="table-responsive" style="border-radius:2px !important; width:100%">
                        <table class="table table-bordered table-hover table-sm">
                            <thead>
                            <tr>
                                <th rowspan="2" style="vertical-align: middle;" class="text-center">
                                    AWAL RPJMD <br> {!! $tahunAwal - 1 !!}
                                </th>
                                <th colspan="5" style="vertical-align: middle;" class="text-center">
                                    TARGET
                                </th>
                            </tr>
                            <tr>
                                @for ($i = $tahunAwal; $i <= $tahunAkhir; $i++)
                                    <th class="text-center">{!! $i !!}</th>
                                @endfor
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                @for ($i = $tahunAwal - 1; $i <= $tahunAkhir; $i++)
                                    <td class="text-center">
                                        <input id="fieldEditTarget[{!! $i !!}]" name="fieldEditTarget[{!! $i !!}]"
                                               type="text" class="form-control text-center" autocomplete="off"
                                               aria-label="fieldEditTarget[{!! $i !!}]" placeholder="-">
                                    </td>
                                @endfor
                            </tr>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="updateSasaranIndikator(this)" type="button"
                        class="btn btn-danger text-uppercase text-white">Perbaharui
                </button>
                <button type="button" class="btn btn-outline-secondary text-uppercase" data-dismiss="modal">Batal
                </button>
            </div>
        </div>
    </div>
</div>