<?php session_start(); if($_SESSION['role']!= 'admin_dpw') die('Akses ditolak');?>
<h1 class="h3 mb-4 text-gray-800">Visi Misi DPW Papua Barat</h1>

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <button class="btn btn-primary btn-sm" id="btnTambah"><i class="fas fa-plus"></i> Tambah Tahun Baru</button>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="tabelData" width="100%">
                <thead><tr><th>No</th><th>Tahun</th><th>Visi</th><th>Misi</th><th>Aksi</th></tr></thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="modalForm" tabindex="-1">
<div class="modal-dialog modal-lg"><div class="modal-content">
    <form id="formData">
    <div class="modal-header"><h5 class="modal-title">Form Visi Misi</h5><button class="close" data-dismiss="modal">&times;</button></div>
    <div class="modal-body">
        <input type="hidden" name="id" id="id">
        <div class="form-group">
            <label>Tahun</label>
            <input type="number" name="tahun" class="form-control" placeholder="2024" min="2020" max="2030" required>
        </div>
        <div class="form-group">
            <label>Visi</label>
            <textarea name="visi" class="form-control" rows="4" required></textarea>
        </div>
        <div class="form-group">
            <label>Misi</label>
            <textarea name="misi" class="form-control" rows="6" required></textarea>
            <small class="text-muted">Pisahkan tiap poin misi dengan enter</small>
        </div>
    </div>
    <div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button><button type="submit" class="btn btn-primary">Simpan</button></div>
    </form>
</div></div></div>

<script>
loadTabel();

function loadTabel(){
    $.get(BASE_URL+'/api/get_visi_misi.php', function(res){
        let html = '';
        res.data.forEach((d,i)=>{
            html += `<tr>
                <td>${i+1}</td>
                <td><span class="badge badge-primary">${d.tahun}</span></td>
                <td>${d.visi.substring(0,100)}...</td>
                <td>${d.misi.substring(0,100)}...</td>
                <td>
                    <button class="btn btn-info btn-sm btnDetail" data-id="${d.id}"><i class="fa fa-eye"></i></button>
                    <button class="btn btn-warning btn-sm btnEdit" data-id="${d.id}"><i class="fa fa-edit"></i></button>
                    <button class="btn btn-danger btn-sm btnHapus" data-id="${d.id}"><i class="fa fa-trash"></i></button>
                </td>
            </tr>`;
        });
        $('#tabelData tbody').html(html);
        $('#tabelData').DataTable();
    });
}

$('#btnTambah').click(()=>{ $('#formData')[0].reset(); $('#id').val(''); $('#modalForm').modal('show'); });

$(document).on('click','.btnEdit',function(){
    let id = $(this).data('id');
    $.get(BASE_URL+'/api/get_visi_misi_detail.php?id='+id, function(res){
        let d = res.data;
        $('#id').val(d.id); 
        Object.keys(d).forEach(k=> $(`[name=${k}]`).val(d[k]));
        $('#modalForm').modal('show');
    });
});

$(document).on('click','.btnDetail',function(){
    let id = $(this).data('id');
    $.get(BASE_URL+'/api/get_visi_misi_detail.php?id='+id, function(res){
        let d = res.data;
        Swal.fire({
            title: `Visi Misi DPW Tahun ${d.tahun}`,
            html: `<div class="text-left">
                    <h6><b>VISI:</b></h6><p>${d.visi}</p>
                    <h6><b>MISI:</b></h6><p>${d.misi.replace(/\n/g, '<br>')}</p>
                   </div>`,
            width: '800px'
        });
    });
});

$('#formData').submit(function(e){
    e.preventDefault();
    $.post(BASE_URL+'/api/simpan_visi_misi.php', $(this).serialize(), function(res){
        if(res.status=='success'){ 
            $('#modalForm').modal('hide'); 
            Swal.fire('Sukses',res.message,'success'); 
            loadTabel(); 
        } else Swal.fire('Error',res.message,'error');
    }, 'json');
});

$(document).on('click','.btnHapus',function(){
    let id = $(this).data('id');
    Swal.fire({title:'Hapus data?',icon:'warning',showCancelButton:true}).then(r=>{
        if(r.isConfirmed){ $.post(BASE_URL+'/api/hapus_visi_misi.php',{id:id},res=>{ loadTabel(); Swal.fire('Sukses',res.message,'success'); }); }
    });
});
</script>