@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">
            <h5 class="mb-0">Edit Konteks Pemda</h5>
        </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
            @if (session('info'))
                <div class="alert alert-info alert-dismissible fade show" role="alert">
                    {{ session('info') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <form id="formKonteks" action="{{ route('manajemen-risiko.store-konteks-pemda', ['id' => $risiko->id]) }}"
                method="POST">
                @csrf
                <input type="hidden" name="id" value="{{ $konteksPemda->id }}">
                <input type="hidden" name="manajemen_risiko_id" value="{{ $manajemen_risiko_id }}">

                <table class="table">
                    <tr>
                        <th>Urusan Pemerintahan</th>
                        <td>
                            <select name="urusan_pemerintahan[]" id="urusanPemerintahan" class="form-control"
                                multiple="multiple">
                                @php $urusan = $konteksPemda->urusan_pemerintahan ?? []; @endphp
                                @foreach ($urusans as $u)
                                    <option value="{{ $u->id }}" {{ in_array($u->id, $urusan) ? 'selected' : '' }}>
                                        {{ $u->urusan }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>Periode yang Dinilai</th>
                        <td><b>{{ $konteksPemda->manajemenRisiko->periode }}</b></td>
                    </tr>
                    <tr>
                        <th>Tahun Penilaian</th>
                        <td><b>{{ $konteksPemda->manajemenRisiko->tahun_penilaian }}</b></td>
                    </tr>
                    <tr>
                        <th width="200px">Sumber Data</th>
                        <td>
                            <select name="rpjmd_id" id="rpjmd_id" class="form-select select2" required
                                onchange="fetchRpjmdDetail(this.value)">
                                <option value="">-- Pilih RPJMD --</option>
                                @foreach ($rpjmds as $r)
                                    <option value="{{ $r->id }}"
                                        {{ $konteksPemda->rpjmd_id == $r->id ? 'selected' : '' }}>{{ $r->periode }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th class="align-top">Tujuan Strategis RPJMD</th>
                        <td id="tujuanRPJMD"></td>
                    </tr>
                    <tr>
                        <th class="align-top">Penetapan konteks Risiko Strategis Pemda</th>
                        <td>
                            <textarea class="form-control" id="penetapan_konteks" name="penetapan_konteks"
                                placeholder="Penetapan konteks Risiko Strategis Pemda">{{ $konteksPemda->penetapan_konteks }}</textarea>
                        </td>
                    </tr>
                    <tr>
                        <th>Dinas Terkait</th>
                        <td>
                            <select name="dinas_terkait[]" id="dinasTerkaits" class="form-control" multiple="multiple">
                                @foreach ($perangkat_daerah as $pd)
                                    <option value="{{ $pd->id }}"
                                        {{ in_array($pd->id, $selected_dinas) ? 'selected' : '' }}>{{ $pd->nama_pd }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th class="align-top">Sasaran RPJMD</th>
                        <td id="sasaranRPJMD">
                        </td>
                    </tr>
                    <tr>
                        <th class="align-top">IKU Sasaran RPJMD</th>
                        <td id="sasaranIkuRPJMD">
                            <div id="wrapper-iku"></div>
                        </td>
                    </tr>
                    <tr>
                        <th class="align-top">Program Prioritas</th>
                        <td id="wrapper-program">
                            @foreach ($konteksPemda->programs as $prog)
                                <div class="input-group mb-2">
                                    <input type="text" name="programs[]" class="form-control"
                                        value="{{ $prog->nama_program }}">
                                    <button type="button" class="btn btn-danger"
                                        onclick="$(this).closest('.input-group').remove()"><i
                                            class="fa fa-trash"></i></button>
                                </div>
                            @endforeach
                            <button type="button" class="btn btn-sm btn-success" style="margin:10px;"
                                onclick="addInput('#wrapper-program', 'programs[]')">+ Tambah Program</button>
                        </td>
                    </tr>
                    <tr>
                        <td class="align-top">Tujuan</td>
                        <td>
                            <textarea class="form-control" id="tujuan" name="tujuan" placeholder="Tujuan">{{ $konteksPemda->tujuan }}</textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="align-top">Sasaran</td>
                        <td>
                            <textarea class="form-control" id="sasaran" name="sasaran" placeholder="Sasaran">{{ $konteksPemda->sasaran }}</textarea>
                        </td>
                    </tr>
                    {{-- <tr>
                        <th class="align-top">Tujuan & Sasaran RPJMD</th>
                        <td>
                            <div id="tujuan" class="border p-2 bg-light mb-2">{!! $konteksPemda->tujuan !!}</div>
                            <div id="sasaran" class="border p-2 bg-light">{!! $konteksPemda->sasaran !!}</div>
                        </td>
                    </tr> --}}
                    <tr>
                        <th class="align-top">IKU Strategis</th>
                        <td id="wrapper-iku-strategis">
                            @foreach ($konteksPemda->iku_strategis ?? [] as $iku)
                                <div class="input-group mb-2">
                                    <input type="text" name="iku_strategis[]" class="form-control"
                                        value="{{ $iku }}">
                                    <button type="button" class="btn btn-danger"
                                        onclick="$(this).closest('.input-group').remove()"><i
                                            class="fa fa-trash"></i></button>
                                </div>
                            @endforeach
                            <button type="button" class="btn btn-sm btn-success" style="margin:10px;"
                                onclick="addInput('#wrapper-iku-strategis', 'iku_strategis[]')">+ Tambah
                                IKU</button>
                        </td>
                    </tr>
                </table>
                <div class="mt-3">
                    <button type="submit" class="btn btn-primary">Update Konteks</button>
                    <a href="{{ route('manajemen-risiko.show-konteks-pemda', $risiko->id) }}" class="btn btn-info">Kembali</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2, #urusanPemerintahan, #dinasTerkaits').select2({
                theme: 'bootstrap-5',
                width: '100%'
            });

            // $('#formKonteks').on('submit', function(e) {
            //     e.preventDefault();
            //     $.ajax({
            //         url: "{{ route('manajemen-risiko.store-konteks-pemda') }}",
            //         type: "POST",
            //         data: $(this).serialize(),
            //         success: function(res) {
            //             Swal.fire('Berhasil', res.success, 'success').then(() => {
            //                 window.location.href =
            //                     "{{ route('manajemen-risiko.index') }}";
            //             });
            //         }
            //     });
            // });
        });

        // Gunakan fungsi fetchRpjmdDetail dan appendIkuRow yang sama dengan di Create
        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');
                }
            });
        }
        fetchRpjmdDetail($('#rpjmd_id').val()); // Panggil saat load untuk data yang sudah dipilih
        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);
        }

        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);
        }
    </script>
@endpush