@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">Manajemen Risiko</h5>
        <button class="btn btn-primary btn-sm" onclick="addRisiko()">
            <i class="fa fa-plus"></i> Tambah Risiko
        </button>
    </div>
    <div class="card-body">
        <table class="table table-bordered table-striped w-100" id="table-risiko">
            <thead class="table-light">
                <tr>
                    <th width="5%">No</th>
                    <th>Pemda</th>
                    <th>Periode</th>
                    <th>Tahun Penilaian</th>
                    <th>Tujuan Strategis</th>
                    <th width="15%">Aksi</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<div class="modal fade" id="modalRisiko" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="formRisiko">
            @csrf
            <input type="hidden" name="id" id="risiko_id">
            
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Form Manajemen Risiko</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Nama Pemda</label>
                            <input type="text" name="pemda" id="pemda" class="form-control" 
                                placeholder="Contoh: Pemerintah Kabupaten Lamongan" required>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Periode</label>
                            <input type="text" name="periode" id="periode" class="form-control" 
                                placeholder="Contoh: 2021-2026" required>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Tahun Penilaian</label>
                            <input type="number" name="tahun_penilaian" id="tahun_penilaian" class="form-control" 
                                placeholder="Contoh: 2024" required>
                        </div>
                        
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Tujuan Strategis</label>
                            <textarea name="tujuan_strategis" id="tujuan_strategis" class="form-control" 
                                rows="4" placeholder="Masukkan tujuan strategis..." required></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="btnSimpan">Simpan Data</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Inisialisasi DataTable
        var table = $('#table-risiko').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('manajemen-risiko.index') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                {data: 'pemda', name: 'pemda'},
                {data: 'periode', name: 'periode'},
                {data: 'tahun_penilaian', name: 'tahun_penilaian'},
                {data: 'tujuan_strategis', name: 'tujuan_strategis'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ]
        });

        // Fungsi Tombol Tambah
        window.addRisiko = function() {
            $('#risiko_id').val(''); // Kosongkan ID agar dianggap data baru
            $('#formRisiko')[0].reset();
            $('#modalTitle').text('Tambah Manajemen Risiko');
            $('#modalRisiko').modal('show');
        }

        window.showRisiko = function(id) {
            window.location.href = "/manajemen-risiko/" + id + "/detail";
        }

        // Fungsi Tombol Edit (Mengambil data via AJAX)
        window.editRisiko = function(id) {
            $('#modalTitle').text('Edit Manajemen Risiko');
            $.get("/manajemen-risiko/" + id + "/edit", function(data) {
                $('#risiko_id').val(data.id);
                $('#pemda').val(data.pemda);
                $('#periode').val(data.periode);
                $('#tahun_penilaian').val(data.tahun_penilaian);
                $('#tujuan_strategis').val(data.tujuan_strategis);
                $('#modalRisiko').modal('show');
            }).fail(function() {
                Swal.fire('Error', 'Tidak dapat mengambil data', 'error');
            });
        }

        // Submit Form (Tambah atau Update)
        $('#formRisiko').on('submit', function(e) {
            e.preventDefault();
            $('#btnSimpan').attr('disabled', true).text('Menyimpan...');

            $.ajax({
                url: "{{ route('manajemen-risiko.store') }}",
                type: "POST",
                data: $(this).serialize(),
                success: function(res) {
                    $('#modalRisiko').modal('hide');
                    table.ajax.reload();
                    Swal.fire('Berhasil', res.success, 'success');
                },
                error: function(xhr) {
                    let err = xhr.responseJSON.errors;
                    let msg = "";
                    $.each(err, function(key, val) {
                        msg += val[0] + "<br>";
                    });
                    Swal.fire('Gagal', msg, 'error');
                },
                complete: function() {
                    $('#btnSimpan').attr('disabled', false).text('Simpan Data');
                }
            });
        });

        // Fungsi Hapus Data
        window.deleteRisiko = function(id) {
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: "Data yang dihapus tidak dapat dikembalikan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "/manajemen-risiko/" + id,
                        type: "DELETE",
                        data: { _token: "{{ csrf_token() }}" },
                        success: function(res) {
                            table.ajax.reload();
                            Swal.fire('Terhapus!', res.success, 'success');
                        }
                    });
                }
            });
        }
    });
</script>
@endpush