@extends('layouts.admin')

@section('content')

    <div class="card shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Detail RPJMD - Periode {{ $rpjmd->periode }}</h5>
            <div>
                <button class="btn btn-danger btn-sm" onclick="confirmDeleteAll()">
                    <i class="fa fa-trash"></i> Kosongkan Detail
                </button>
                <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalImportDetail">
                    <i class="fa fa-file-excel-o"></i> Import Detail
                </button>
                <a href="{{ route('rpjmd.index') }}" class="btn btn-info btn-sm">
                    <i class="fa fa-arrow-left"></i> Kembali
                </a>
            </div>
        </div>
        <div class="card-body">
            @if ($rpjmd->rpjmdDatas->isEmpty())
                <div class="alert alert-info">Belum ada data detail untuk RPJMD ini. Silakan tambahkan melalui fitur import.
                </div>
            @else
                <table class="table table-bordered align-middle">
                    <thead class="table-light text-center">
                        <tr>
                            <th>No</th>
                            <th>Misi</th>
                            <th>Tujuan</th>
                            <th>Sasaran</th>
                            <th>Indikator Sasaran</th>
                            <th width="100px">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                        $no = 1; // Inisialisasi nomor urut
                        @endphp
                        @foreach ($rpjmd->rpjmdDatas as $data)
                            @php
                                // Menghitung total baris (indikator) untuk satu Misi/Tujuan
                                $totalIndikatorMisi = $data->sasarans->sum(function ($s) {
                                    return $s->indikators->count();
                                });
                            @endphp

                            @foreach ($data->sasarans as $sIdx => $sasaran)
                                @foreach ($sasaran->indikators as $iIdx => $indikator)
                                    <tr>
                                        {{-- Kolom No, Misi, dan Tujuan hanya muncul di baris pertama setiap Misi --}}
                                        @if ($sIdx == 0 && $iIdx == 0)
                                            <td rowspan="{{ $totalIndikatorMisi }}" class="text-center">{{ $no++ }}
                                            </td>
                                            <td rowspan="{{ $totalIndikatorMisi }}">{{ $data->misi }}</td>
                                            <td rowspan="{{ $totalIndikatorMisi }}">{{ $data->tujuan }}</td>
                                        @endif

                                        {{-- Kolom Sasaran hanya muncul di baris pertama setiap Sasaran --}}
                                        @if ($iIdx == 0)
                                            <td rowspan="{{ $sasaran->indikators->count() }}">
                                                {{ $sasaran->sasaran }}
                                                <br>
                                                <button class="btn btn-xs btn-link p-0 text-primary"
                                                    style="font-size: 10px;" onclick="addIndikator({{ $sasaran->id }})">
                                                    <i class="fa fa-plus"></i> Tambah Indikator
                                                </button>
                                            </td>
                                        @endif

                                        {{-- Kolom Indikator --}}
                                        <td>{{ $indikator->indikator }}</td>

                                        {{-- Kolom Aksi --}}
                                        <td class="text-center">
                                            <div class="btn-group">
                                                <button class="btn btn-sm text-info"
                                                    onclick="editIndikator({{ $indikator->id }}, '{{ $indikator->indikator }}', {{ $sasaran->id }})">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                                <button class="btn btn-sm text-danger"
                                                    onclick="deleteIndikator({{ $indikator->id }})">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>

    <div class="modal fade" id="modalIndikator" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <form id="formIndikator">
                @csrf
                <input type="hidden" name="id" id="ind_id">
                <input type="hidden" name="rpjmd_sasaran_id" id="ind_sasaran_id">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5>Form Indikator</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Nama Indikator Sasaran</label>
                            <textarea name="indikator_sasaran" id="ind_nama" class="form-control" rows="3" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modalImportDetail" tabindex="-1">
        <div class="modal-dialog">
            <form action="{{ route('rpjmd.import-detail', $rpjmd->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Import Detail RPJMD</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-info">
                            <h6>Perhatian:</h6>
                            <p class="small">Pastikan format file sesuai dengan template. Kolom Misi, Tujuan, dan Sasaran
                                cukup diisi pada baris pertama jika memiliki banyak Indikator.</p>
                            <a href="{{ route('rpjmd.download-template') }}" class="btn btn-sm btn-outline-primary">
                                <i class="fa fa-download"></i> Unduh Template Excel
                            </a>
                        </div>
                        <div class="form-group">
                            <label>Pilih File Excel (.xlsx)</label>
                            <input type="file" name="file" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-success">Proses Import</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Hapus Semua Detail
        function confirmDeleteAll() {
            Swal.fire({
                title: 'Kosongkan Semua Data?',
                text: "Semua misi, tujuan, sasaran, dan indikator pada periode ini akan dihapus permanen!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                confirmButtonText: 'Ya, Hapus Semua!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('rpjmd.delete-all-detail', $rpjmd->id) }}",
                        type: "DELETE",
                        data: {
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(res) {
                            location.reload();
                        }
                    });
                }
            });
        }

        // Tambah Indikator Manual
        function addIndikator(sasaranId) {
            $('#ind_id').val('');
            $('#ind_sasaran_id').val(sasaranId);
            $('#ind_nama').val('');
            $('#modalIndikator').modal('show');
        }

        // Edit Indikator Manual
        function editIndikator(id, nama, sasaranId) {
            $('#ind_id').val(id);
            $('#ind_sasaran_id').val(sasaranId);
            $('#ind_nama').val(nama);
            $('#modalIndikator').modal('show');
        }

        // Simpan Indikator
        $('#formIndikator').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: "{{ route('rpjmd.store-indikator') }}",
                type: "POST",
                data: $(this).serialize(),
                success: function(res) {
                    $('#modalIndikator').modal('hide');
                    Swal.fire('Berhasil', res.success, 'success').then(() => location.reload());
                }
            });
        });

        // Hapus Satu Indikator
        function deleteIndikator(id) {
            Swal.fire({
                title: 'Hapus Indikator?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "/rpjmd/indikator/" + id,
                        type: "DELETE",
                        data: {
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(res) {
                            location.reload();
                        }
                    });
                }
            });
        }
    </script>
@endpush