@extends('admin.layout')

@section('content')
<link rel="stylesheet" href="{{ asset('css/fitur-admin.css') }}">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="dashboard-section">
    <div class="mb-4 d-flex justify-content-between align-items-center">
        <div>
            <h4 class="fw-bold text-dark">Data Master Prospek Kerja</h4>
            <p class="text-muted small">Kelola daftar karir dan estimasi gaji untuk setiap jurusan.</p>
        </div>
        <a href="{{ route('admin.prospek-kerja.create') }}" class="btn text-white px-4 shadow-sm" style="background-color: var(--primary-green); border-radius: 10px;">
            <i class="fas fa-plus me-2"></i>Tambah Prospek
        </a>
    </div>

    <div class="table-container-modern shadow-sm">
        <div class="table-responsive">
            <table class="table table-modern mb-0">
                <thead>
                    <tr>
                        <th class="text-center" width="60">No</th>
                        <th>Nama Profesi</th>
                        <th>Asal Jurusan</th>
                        <th>Estimasi Gaji</th>
                        <th class="text-center" width="150">Opsi</th>
                    </tr>
                </thead>
                <tbody id="prospek-table-body">
                    <tr><td colspan="5" class="text-center py-5 text-muted">Memuat data...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    async function fetchProspek() {
        const token = localStorage.getItem('access_token');
        try {
            const response = await fetch(`/api/admin/prospek-kerja`, {
                headers: { 
                    'Authorization': 'Bearer ' + token,
                    'Accept': 'application/json'
                }
            });
            const result = await response.json();
            const tbody = document.getElementById('prospek-table-body');
            tbody.innerHTML = '';

            if(!result.data || result.data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center py-4">Tidak ada data prospek kerja.</td></tr>';
                return;
            }

            result.data.forEach((item, index) => {
                const namaJurusan = item.jurusan ? item.jurusan.nama_jurusan : '<span class="text-danger">Jurusan Dihapus</span>';
                
                const row = `
                    <tr>
                        <td class="text-center text-muted">${index + 1}</td>
                        <td class="fw-bold text-dark">${item.nama_profesi}</td>
                        <td><span class="badge bg-light text-dark border px-3 py-2">${namaJurusan}</span></td>
                        <td class="small text-success fw-bold">${item.range_gaji || 'Belum diatur'}</td>
                        <td class="text-center">
                            <div class="opsi-wrapper">
                                <a href="/admin/prospek-kerja/${item.id}/edit" class="btn-action btn-edit" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button onclick="deleteProspek(${item.id})" class="btn-action btn-delete" title="Hapus">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>`;
                tbody.innerHTML += row;
            });
        } catch (error) { 
            document.getElementById('prospek-table-body').innerHTML = '<tr><td colspan="5" class="text-center text-danger">Gagal memuat data.</td></tr>';
        }
    }

    async function deleteProspek(id) {
        const res = await Swal.fire({
            title: 'Hapus data?',
            text: "Data yang dihapus tidak dapat dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            confirmButtonText: 'Ya, Hapus'
        });

        if (res.isConfirmed) {
            const token = localStorage.getItem('access_token');
            try {
                const response = await fetch('/api/admin/prospek-kerja/' + id, { 
                    method: 'DELETE', 
                    headers: { 'Authorization': 'Bearer ' + token } 
                });
                if(response.ok) {
                    Swal.fire('Terhapus!', 'Data berhasil dihapus.', 'success');
                    fetchProspek();
                }
            } catch (error) { Swal.fire('Error!', 'Koneksi gagal.', 'error'); }
        }
    }
    
    document.addEventListener('DOMContentLoaded', fetchProspek);
</script>
@endsection