@extends('layouts.app')

@php
use App\Models\Alumni;
@endphp

@section('content')
<div class="container-fluid p-0">
    <div class="d-flex h-100">
        <!-- Sidebar -->
        <div class="sidebar" style="width: 250px; min-height: 100vh; position: fixed; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);">
            <div class="p-4 text-center">
                <img src="{{ asset('images/logo.png') }}" alt="STIKOM BALI" 
                     class="img-fluid mb-3" style="max-width: 120px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));">
                <h5 class="fw-bold text-primary mb-4">Dashboard CDC STIKOM Bali</h5>
            </div>
            <div class="nav flex-column px-3">
                <a href="{{ route('admin.alumni.index') }}" 
                   class="nav-link mb-2 py-2 px-3 rounded-3 d-flex align-items-center {{ request()->routeIs('admin.alumni.*') ? 'active bg-primary text-white' : 'text-dark hover-link' }}"
                   style="transition: all 0.3s ease;">
                    <i class="bi bi-people me-3 fs-5"></i>
                    <span class="fw-medium">Kelola Alumni</span>
                </a>
                <a href="{{ route('admin.reports') }}" 
                   class="nav-link mb-2 py-2 px-3 rounded-3 d-flex align-items-center {{ request()->routeIs('admin.reports') ? 'active bg-primary text-white' : 'text-dark hover-link' }}"
                   style="transition: all 0.3s ease;">
                    <i class="bi bi-file-text me-3 fs-5"></i>
                    <span class="fw-medium">Laporan</span>
                </a>
            </div>
        </div>

        <!-- Add this style section at the bottom of your file -->
        <style>
            .hover-link {
                border: 1px solid transparent;
            }
            .hover-link:hover {
                background-color: #e9ecef;
                color: #0d6efd !important;
                transform: translateX(5px);
                border-color: #dee2e6;
            }
            .active {
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
          .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    z-index: 1030;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-right: 1px solid #e9ecef;
    box-shadow: 2px 0 8px rgba(0,0,0,0.05);
}
            @media (max-width: 991.98px) {
                .table-responsive table {
                    min-width: 1200px;
                }
                .table th, .table td {
                    white-space: nowrap;
                }
            }

            
.table-responsive {
    overflow-x: auto;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 991.98px) {
    .sidebar {
        position: static;
        width: 100%;
        min-height: auto;
        height: auto;
    }
 .flex-grow-1 {
    margin-left: 250px !important;
    min-width: 1200px; /* atau sesuai kebutuhan tabel */
    background-color: #f8f9fa;
    min-height: 100vh;
    overflow-x: auto;
}
}

@media (max-width: 991.98px) {
    .sidebar {
        position: static;
        width: 100%;
        min-height: auto;
        height: auto;
    }
   
    .p.p-4 {
    min-width: 1200px; /* atau sesuai kebutuhan tabel */
    padding: 2rem !important;
}
  .flex-grow-1 {
        margin-left: 0 !important;
        min-width: unset;
    }
       .p-4 {
        min-width: unset;
    }
}
        </style>



        <!-- Rest of your content -->
        <!-- Main Content -->
        <div class="flex-grow-1" style="margin-left: 250px; background-color: #f8f9fa; min-height: 100vh;">
            <div class="p-4">
                <!-- Header -->
                <div class="d-flex justify-content-between align-items-center mb-4 bg-white p-3 rounded shadow-sm">
                    <h4 class="mb-0">Data Alumni</h4>
                    <div class="d-flex align-items-center">
                        <span class="badge bg-primary p-2 me-3">
                            <i class="bi bi-people-fill me-2"></i>
                       Total: {{ $alumni->count() }}
                        </span>
                        <!-- Admin Profile Dropdown -->
                        <div class="dropdown">
                            <button class="btn btn-link text-dark text-decoration-none dropdown-toggle d-flex align-items-center" 
                                    type="button" 
                                    id="adminDropdown" 
                                    data-bs-toggle="dropdown" 
                                    aria-expanded="false">
                                <i class="bi bi-person-circle fs-5 me-2"></i>
                                <span>Admin</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="adminDropdown">
                                <li>
                                    <form action="{{ route('admin.logout') }}" method="POST">
                                        @csrf
                                        <button type="submit" class="dropdown-item d-flex align-items-center">
                                            <i class="bi bi-box-arrow-right me-2"></i>
                                            Logout
                                        </button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-body bg-white rounded-3">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <!-- Di dalam div class="d-flex gap-3" -->
                                <div class="d-flex gap-3">
                                    <!-- Near the top of your table or content area -->
                                    <div class="mb-3">
                                        <a href="{{ route('admin.alumni.create') }}" class="btn btn-success me-2">
                                            <i class="bi bi-plus-circle me-2"></i>Tambah Data
                                        </a>
                                        <a href="{{ route('admin.alumni.import-form') }}" class="btn btn-primary me-2">
                                            <i class="bi bi-upload me-2"></i>Import Excel
                                        </a>
                                        
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <form action="{{ route('admin.alumni.index') }}" method="GET">
                                    <div class="input-group">
                                        <input type="text" 
                                               name="search" 
                                               class="form-control" 
                                               placeholder="Cari nama, NIM, pekerjaan..." 
                                               value="{{ request('search') }}">
                                        <button class="btn btn-primary" type="submit">
                                            <i class="bi bi-search"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Alumni Table -->
                <div class="card shadow-sm border-0">
                    <div class="card-body bg-white rounded-3 p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="bg-light">
                                <tr>
                                    <th>Nama</th>
                                    <th>NIM</th>
                                    <th>Tahun Lulus</th>
                                    <th>Tahun Yudisium</th>
                                    <th>Periode Wisuda</th>
                                    <th>Pekerjaan</th>
                                    <th>Perusahaan</th>
                                    <th>Bidang</th>
                                    <th>Rata-rata Gaji</th>
                                    <th>Masa Tunggu</th>
                                    <th>Jenis Instansi</th>
                                    <th>Relevansi</th>
                                    <th>Tingkat Kesesuaian</th>
                                    <th>Perkuliahan</th>
                                    <th>Diskusi</th>
                                    <th>Praktikum</th>
                                    <th>Tugas</th>
                                    <th>Magang</th>
                                    <th>Penelitian</th>
                                    <th>Seminar</th>
                                    <th>Konsultasi</th>
                                    <th>Aksi</th>
                                </tr>
                                </thead>
                                <tbody>
                                    @forelse($alumni as $alum)
                                    <tr>
                    <td>{{ $alum->nama }}</td>
                    <td>{{ $alum->nim }}</td>
                    <td>{{ $alum->tahun_lulus }}</td>
                    <td>{{ $alum->tahun_yudisium }}</td>
                    <td>{{ $alum->periode_wisuda }}</td>
                    <td>{{ $alum->pekerjaan }}</td>
                    <td>{{ $alum->perusahaan }}</td>
                    <td>{{ $alum->bidang }}</td>
                    <td>
                        @if($alum->rata_rata_gaji)
                            Rp {{ number_format($alum->rata_rata_gaji, 0, ',', '.') }}
                        @else
                            -
                        @endif
                    </td>
                    <td>{{ $alum->masa_tunggu ?? '-' }}</td>
                    <td>{{ $alum->jenis_instansi }}</td>
                    <td>
                          @if($alum->relevansi)
                            <span class="badge bg-success">Relevan</span>
                        @else
                            <span class="badge bg-secondary">Tidak</span>
                        @endif
                    </td>
                    <td>{{ $alum->tingkat_kesesuaian }}</td>
                    <td>{{ $alum->rating_perkuliahan ?? '-' }}</td>
                    <td>{{ $alum->rating_diskusi ?? '-' }}</td>
                    <td>{{ $alum->rating_praktikum ?? '-' }}</td>
                    <td>{{ $alum->rating_tugas ?? '-' }}</td>
                    <td>{{ $alum->rating_magang ?? '-' }}</td>
                    <td>{{ $alum->rating_penelitian ?? '-' }}</td>
                    <td>{{ $alum->rating_seminar ?? '-' }}</td>
                    <td>{{$alum->rating_konsultasi ?? '-' }}</td>
                    <td>
                        <a href="{{ route('admin.alumni.edit', $alum->id) }}" class="btn btn-sm btn-warning"><i class="bi bi-pencil"></i></a>
                    
<button class="btn btn-sm btn-danger delete-alumni" data-id="{{ $alum->id }}"><i class="bi bi-trash"></i></button>
                    </td>
                                    
                                    </tr>
                                  @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                    </div>
                </div>
            </div>
        </div>
@push('scripts')
<script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })

    // Delete Alumni Handler
    document.querySelectorAll('.delete-alumni').forEach(button => {
        button.addEventListener('click', function() {
            const id = this.dataset.id;
            
            if (confirm('Yakin ingin menghapus?')) {
                fetch(`/admin/alumni/${id}`, {
                  method: 'DELETE',
    headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
    }
})
.then(response => response.json())
.then(data => {
    if (data.success) {
        location.reload(); // reload halaman agar tabel update
    }
});
            }
        });
    });
    // Add this new code for handling form submissions
    document.querySelectorAll('[id^="editRelevanceModal"]').forEach(modal => {
    const form = modal.querySelector('form');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        fetch(this.action, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams(new FormData(this))
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update the badge in the table
                const row = this.closest('tr');
                const relevanceBadge = row.querySelector('td:nth-last-child(2) .badge');
                const newValue = this.querySelector('select[name="relevansi"]').value;
                
                if (newValue === '1') {
                    relevanceBadge.className = 'badge bg-success';
                    relevanceBadge.textContent = 'Sesuai';
                } else {
                    relevanceBadge.className = 'badge bg-warning';
                    relevanceBadge.textContent = 'Tidak Sesuai';
                }
                
                // Close the modal
                bootstrap.Modal.getInstance(modal).hide();
            } else {
                alert('Gagal mengupdate data');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat mengupdate data');
        });
    });
});
</script>
@endpush

    </div>
</div>