@extends('layouts.admin')

@section('content')
    @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

    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-sm">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Manajemen Perangkat Daerah</h5>
                    <div>
                        <a href="{{ route('pd.pdf') }}" class="btn btn-danger btn-sm">Export PDF</a>
                        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalImport">Import
                            Excel</button>
                        <button class="btn btn-primary btn-sm" onclick="addData()">Tambah Data</button>
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-bordered dt-responsive nowrap" id="table-pd" style="width:100%">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Kode</th>
                                <th>Nama Perangkat Daerah</th>
                                <th>Kepala (NIP)</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modalImport" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <form action="{{ route('pd.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5>Import Excel</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-info">
                            <p class="mb-1">Silakan unduh template di bawah ini terlebih dahulu untuk format yang benar.
                            </p>
                            <a href="{{ route('pd.template') }}" class="btn btn-sm btn-outline-primary">
                                <i class="fa fa-file-excel-o"></i> Unduh Template Excel
                            </a>
                        </div>
                        <div class="form-group">
                            <label>Pilih File (.xlsx)</label>
                            <input type="file" name="file_excel" 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>

    <div class="modal fade" id="modalForm" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <form id="formPD">
                @csrf
                <input type="hidden" name="id" id="id">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTitle">Form Perangkat Daerah</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label>Kode PD</label>
                            <input type="text" name="kode_pd" id="kode_pd" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label>Nama Perangkat Daerah</label>
                            <input type="text" name="nama_pd" id="nama_pd" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label>Nama Kepala</label>
                            <input type="text" name="nama_kepala" id="nama_kepala" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Status</label>
                            <select name="status" id="status" class="form-select">
                                <option value="SKPD">SKPD</option>
                                <option value="Unit SKPD">Unit SKPD</option>
                            </select>
                        </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 Data</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Inisialisasi Datatable Responsive
            var table = $('#table-pd').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: "{{ route('pd.index') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'kode_pd',
                        name: 'kode_pd'
                    },
                    {
                        data: 'nama_pd',
                        name: 'nama_pd'
                    },
                    {
                        data: 'nama_kepala',
                        name: 'nama_kepala',
                        render: function(data, type, row) {
                            return data + '<br><small class="text-muted">' + row.nip_kepala +
                                '</small>';
                        }
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });
        });

        // Fungsi Hapus dengan SweetAlert2
        function deleteData(id, nama) {
            Swal.fire({
                title: 'Hapus Data?',
                text: "Anda akan menghapus " + nama,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "/perangkat-daerah/" + id,
                        type: "DELETE",
                        data: {
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            Swal.fire('Berhasil!', response.success, 'success');
                            $('#table-pd').DataTable().ajax.reload();
                        }
                    });
                }
            });
        }

        // Munculkan Modal Tambah
        function addData() {
            $('#id').val(''); // Kosongkan ID
            $('#formPD')[0].reset(); // Reset isi form
            $('#modalTitle').text('Tambah Perangkat Daerah');
            $('#modalForm').modal('show');
        }

        // Munculkan Modal Edit dengan Data
        function editData(id) {
            $.get("/perangkat-daerah/" + id + "/edit", function(data) {
                $('#modalTitle').text('Edit Perangkat Daerah');
                $('#modalForm').modal('show');

                // Isi input dengan data dari server
                $('#id').val(data.id);
                $('#kode_pd').val(data.kode_pd);
                $('#nama_pd').val(data.nama_pd);
                $('#nama_kepala').val(data.nama_kepala);
                $('#status').val(data.status);
            });
        }

        // Proses Simpan (Insert/Update)
        $('#formPD').on('submit', function(e) {
            e.preventDefault();
            let id = $('#id').val();
            let url = id ? "/perangkat-daerah/" + id : "/perangkat-daerah";
            let method = id ? "PUT" : "POST";

            $.ajax({
                url: url,
                type: method,
                data: $(this).serialize(),
                success: function(response) {
                    $('#modalForm').modal('hide');
                    $('#table-pd').DataTable().ajax.reload();
                    Swal.fire('Berhasil!', response.success, 'success');
                },
                error: function(err) {
                    Swal.fire('Gagal!', 'Terjadi kesalahan validasi atau sistem.', 'error');
                }
            });
        });
    </script>
@endpush