@extends('layouts.admin')

@section('content')
    <style>
        /* Mengatur tampilan dasar tag */
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            border: none;
            color: white;
            padding: 2px 10px;
            border-radius: 4px;
        }

        /* Memberikan warna berbeda berdasarkan urutan */
        .select2-selection__choice:nth-child(5n+1) {
            background-color: #ff5f5f;
        }

        /* Merah */
        .select2-selection__choice:nth-child(5n+2) {
            background-color: #4ebf71;
        }

        /* Hijau */
        .select2-selection__choice:nth-child(5n+3) {
            background-color: #3e92cc;
        }

        /* Biru */
        .select2-selection__choice:nth-child(5n+4) {
            background-color: #f3a712;
        }

        /* Oranye */
        .select2-selection__choice:nth-child(5n+5) {
            background-color: #9b59b6;
        }

        /* Ungu */

        /* Menyesuaikan tombol silang (x) agar tetap terlihat bagus */
        .select2-selection__choice__remove {
            color: rgba(255, 255, 255, 0.7) !important;
            margin-right: 5px;
        }

        .select2-selection__choice__remove:hover {
            color: #fff !important;
        }
    </style>
    <div class="card shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h4>Konteks Pemda: {{ $konteksPemda->nama ?? '' }}</h4>
            <div class="">
                <a href="{{ route('manajemen-risiko.show', $risiko->id) }}" class="btn btn-info btn-sm"><i
                        class="fa fa-arrow-left"></i>
                    Kembali</a>
            </div>
        </div>
        <div class="card-body">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <h4 class="card-title text-center mb-5">Tambah Konteks Strategis Pemda <br> <small>{{ $risiko->pemda }}</small>
            </h4>
            <form id="forms-sample" action="{{ route('manajemen-risiko.store-konteks-pemda', ['id' => $risiko->id]) }}"
                method="POST"> @csrf
                <table class="table">
                    <tr>
                        <td style="width: 200px">Urusan Pemerintahan</td>
                        <td>
                            <select class="form-control" name="urusan_pemerintahan[]" id="urusanPemerintahan"
                                onchange="changeUrusanPemerintahan(this)" multiple required style="width: 100%">
                                @foreach ($urusans as $urusan)
                                    <option value="{{ $urusan->id }}">{{ $urusan->urusan }}</option>
                                @endforeach
                            </select>
                            <input type="hidden" name="urusan_pemerintahan_id">
                            <input type="hidden" name="manajemen_risiko_id" value="{{ $risiko->id }}">
                        </td>
                    </tr>
                    <tr>
                        <td>Periode yang Dinilai</td>
                        <td><b>{{ $risiko->periode }}</b></td>
                    </tr>
                    <tr>
                        <td>Tahun Penilaian</td>
                        <td><b>{{ $risiko->tahun_penilaian }}</b></td>
                    </tr>
                    <tr>
                        <td>Sumber Data</td>
                        <td>
                            <select name="rpjmd_id" required id="rpjmd_id" class="form-control" required
                                onchange="fetchRpjmdDetail(this.value)" style="width: 100%">
                                <option value="">Pilih Sumber</option>
                                @foreach ($sumberDatas as $sumber)
                                    <option value="{{ $sumber->id }}">{{ $sumber->entitas . ' ' . $sumber->periode }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="align-top">Tujuan Strategis RPJMD</td>
                        <td id="tujuanRPJMD"></td>
                    </tr>
                    <tr>
                        <td class="align-top">Penetapan konteks Risiko Strategis Pemda</td>
                        <td>
                            <textarea class="form-control" id="penetapan_konteks" name="penetapan_konteks"
                                placeholder="Penetapan konteks Risiko Strategis Pemda">{{ env('APP_ENV') != 'production' ? 'Penetapan Konteks' : '' }}</textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="align-top">Nama Dinas Terkait</td>
                        <td>
                            <select name="dinas_terkait[]" id="dinasTerkaits" class="form-control" multiple="multiple">
                                @foreach ($perangkat_daerah as $pd)
                                    <option value="{{ $pd->id }}">{{ $pd->nama_pd }}</option>
                                @endforeach
                            </select>
                            {{-- <div id="roomDinasTerkait">
                                <select id="dinasTerkaits" name="dinas_terkait[]"
                                    class="selectDinas form-control form-control-sm mb-2">
                                    <option value="0">Tidak Ada</option>
                                    @foreach ($entitass as $entitas)
                                        <option value="{{ $entitas->id }}">{{ $entitas->nama_pd }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <button class="btn btn-success btn-sm btn-block mt-2" type="button"
                                onclick="addDinasTerkait()">Tambah</button> --}}
                        </td>
                    </tr>
                    <tr>
                        <td class="align-top">Sasaran RPJMD</td>
                        <td id="sasaranRPJMD">
                        </td>
                    </tr>
                    <tr>
                        <td>IKU Sasaran RPJMD</td>
                        <td id="sasaranIkuRPJMD">
                            <div id="wrapper-iku"></div>
                        </td>
                    </tr>
                    <tr>
                        <td class="align-top">Prioritas pembangunan dan program unggulan</td>
                        <td>
                            <div id="wrapper-program">
                                <div class="input-group mb-2">
                                    <input type="text" name="programs[]" class="form-control"
                                        placeholder="Prioritas pembangunan dan program unggulan">
                                    <button type="button" class="btn btn-success"
                                        onclick="addInput('#wrapper-program', 'programs[]')"><i
                                            class="fa fa-plus"></i></button>
                                </div>
                            </div>
                            {{-- <div id="PrioritasPembangunan">
                                <input type="text" class="form-control mb-1" id="prioritas" name="prioritas[]"
                                    placeholder="Prioritas pembangunan dan program unggulan"
                                    value="{{ env('APP_ENV') != 'production' ? 'Prioritas' : '' }}">
                            </div>
                            <a href="#!" class="btn btn-sm btn-success mt-2 btn-block"
                                onclick="addInputText('#PrioritasPembangunan','prioritas','prioritas[]','Prioritas pembangunan dan program unggulan')"
                                style="border-radius: 5px">Tambah</a> --}}
                        </td>
                    </tr>
                    <tr>
                        <td class="align-top">Tujuan</td>
                        <td>
                            <textarea class="form-control" id="tujuan" name="tujuan" placeholder="Tujuan">{{ env('APP_ENV') != 'production' ? 'Tujuan 3.2 Meningkatnya derajat kesehatan masyarakat' : '' }}</textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="align-top">Sasaran</td>
                        <td>
                            <textarea class="form-control" id="sasaran" name="sasaran" placeholder="Sasaran">{{ env('APP_ENV') != 'production' ? 'Sasaran 3.2.2 Meningkatnya kualitas kesehatan masyarakat' : '' }}</textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="align-top">IKU Strategis</td>
                        <td>
                            <div id="wrapper-iku-strategis">
                                <div class="input-group mb-2">
                                    <input type="text" name="ikustrategis[]" class="form-control"
                                        placeholder="IKU Strategis">
                                    <button type="button" class="btn btn-success"
                                        onclick="addInput('#wrapper-iku-strategis', 'ikustrategis[]')"><i
                                            class="fa fa-plus"></i></button>
                                </div>
                            </div>
                            {{-- <div id="programs">
                                <input type="text" class="form-control mb-1" id="program" name="program[]"
                                    placeholder="Program"
                                    value="{{ env('APP_ENV') != 'production' ? 'Program Peningkatan Keselamatan Ibu Melahirkan dan Anak' : '' }}">
                            </div> --}}
                            {{-- <a href="#!" class="btn btn-sm btn-success mt-2 btn-block"
                                onclick="addInputText('#programs','program','program[]','Program')"
                                style="border-radius: 5px">Tambah</a> --}}
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td><button type="submit" 
                                class="btn btn-primary  btn-block me-2">Simpan</button></td>
                    </tr>
                </table>
            </form>
            <hr>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#urusanPemerintahan').select2({
                placeholder: "Pilih Urusan Pemerintahan",
                allowClear: true,
                width: '100%',
                theme: 'bootstrap-5'
            });
            $('#rpjmd_id').select2({
                placeholder: "Pilih Sumber Data",
                allowClear: true,
                width: '100%',
                theme: 'bootstrap-5'
            });
            $('#dinasTerkaits').select2({
                placeholder: "Pilih Dinas Terkait",
                allowClear: true,
                width: '100%',
                theme: 'bootstrap-5'
            });
        });
        // Fungsi dinamis untuk menambah input (IKU & Program)
        function addInput(wrapperId, name) {
            let html = `
            <div class="input-group mb-2">
                <input type="text" name="${name}" class="form-control">
                <button type="button" class="btn btn-danger" onclick="$(this).closest('.input-group').remove()"><i class="fa fa-trash"></i></button>
            </div>`;
            $(wrapperId).append(html);
        }

        function fetchRpjmdDetail(rpjmdId) {
            if (!rpjmdId) return;

            // Tampilkan loading jika perlu
            Swal.fire({
                title: 'Mengambil data RPJMD...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: "{{ route('manajemen-risiko.get-rpjmd-detail', ['id' => '__ID__']) }}".replace('__ID__',
                    rpjmdId),
                type: "GET",
                dataType: "json",
                success: function(data) {
                    Swal.close();

                    // 1. Isi Tujuan & Sasaran (Textarea)
                    $('#tujuanRPJMD').html(data.tujuan);
                    $('#sasaranRPJMD').html(data.sasaran);
                    $('#wrapper-iku').html(data.iku);

                    // 2. Isi IKU Strategis (Dinamis Input)
                    // $('#wrapper-iku').empty(); // Kosongkan dulu
                    // if (data.iku.length > 0) {
                    //     data.iku.forEach(function(val) {
                    //         appendIkuRow(val);
                    //     });
                    // } else {
                    //     appendIkuRow(''); // Sediakan 1 input kosong jika data IKU tidak ada
                    // }
                },
                error: function() {
                    Swal.fire('Error', 'Gagal mengambil detail RPJMD', 'error');
                }
            });
        }

        function appendIkuRow(value) {
            let html = `
        <div class="input-group mb-2">
            <input type="text" name="iku_strategis[]" class="form-control" value="${value}" placeholder="Input IKU">
            <button type="button" class="btn btn-danger" onclick="$(this).closest('.input-group').remove()">
                <i class="fa fa-trash"></i>
            </button>
        </div>`;
            $('#wrapper-iku').append(html);
        }
    </script>
@endpush