@extends('layouts.app')

@section('title', 'Penilaian Pengajuan UKT')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="h3 text-dark mb-2">
                    Penilaian Pengajuan UKT
                </h2>
                <div class="badge bg-primary text-white">
                    <i class="fas fa-database mr-1"></i> Total: {{ $validPengajuans->total() }} Data
                </div>
            </div>
            <hr class="mt-2 mb-4" style="border-top: 2px solid #4e73df;">
        </div>
    </div>

    <!-- Filter Section -->
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body p-3">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <div class="form-group mb-0"> <!-- mb-0 untuk menghilangkan margin bottom -->
                        <select name="status_form_id" id="status_form_id" 
                                class="form-control"
                                onchange="window.location.href='{{ route('admin.penilaian.index') }}?status_form_id='+this.value">
                            <option value="">Semua Status Form</option>
                            @foreach($forms as $form)
                                <option value="{{ $form->id }}" {{ request('status_form_id') == $form->id ? 'selected' : '' }}>
                                    {{ $form->nama_form }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <a href="{{ route('admin.penilaian.index') }}" 
                        class="btn btn-primary w-200"> 
                        Reset
                    </a>
                </div>
            </div>
        </div>
    </div>
        
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3">
            <h5 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-list-check mr-2"></i>Daftar Pengajuan
            </h5>
        </div>
        <div class="card-body">
            <form id="batchForm" action="{{ route('admin.penilaian.process-batch') }}" method="POST">
                @csrf
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="table-info">
                            <tr>
                                <th width="50" class="text-center fw-dark">
                                    <input type="checkbox" id="selectAll">
                                </th>
                                <th>NIM</th>
                                <th>Nama Mahasiswa</th>
                                <th>Program Studi</th>
                                <th class="text-center">UKT Saat Ini</th>
                                <th class="text-center">Tanggal Pengajuan</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Hasil Perhitungan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($validPengajuans as $pengajuan)
                            <tr>
                                <td class="text-center align-middle">
                                    <input type="checkbox" name="selected_ids[]" 
                                           value="{{ $pengajuan->id }}" 
                                           class="pengajuan-checkbox"
                                           {{ $pengajuan->hasilPenilaian ? 'disabled' : '' }}>
                                </td>
                                <td class="align-middle">{{ $pengajuan->mahasiswa->nim }}</td>
                                <td class="align-middle">
                                    <div>
                                        <strong>{{ $pengajuan->mahasiswa->user->name }}</strong>
                                        <div class="text-muted small">{{ $pengajuan->mahasiswa->user->email }}</div>
                                    </div>
                                </td>
                                <td class="align-middle">{{ $pengajuan->mahasiswa->program_studi }}</td>
                                <td class="text-center align-middle">
                                    <span class="badge bg-info text-white">
                                        Rp {{ number_format($pengajuan->ukt_saat_ini, 0, ',', '.') }}
                                    </span>
                                </td>
                                <td class="text-center align-middle">
                                    {{ $pengajuan->created_at->translatedFormat('d F Y') }}
                                </td>
                                <td class="text-center align-middle">
                                    @if ($pengajuan->status_validasi == 'valid')
                                        <span class="badge bg-success text-white">
                                            <i class="fas fa-check-circle mr-1"></i> Valid
                                        </span>
                                    @elseif ($pengajuan->status_validasi == 'pending')
                                        <span class="badge bg-warning text-dark">
                                            <i class="fas fa-clock mr-1"></i> Menunggu
                                        </span>
                                    @else
                                        <span class="badge bg-secondary text-white">
                                            <i class="fas fa-times-circle mr-1"></i> Tidak Valid
                                        </span>
                                    @endif
                                </td>
                                <td class="text-center align-middle">
                                    @if($pengajuan->hasilPenilaian)
                                        <a href="{{ route('admin.penilaian.result', $pengajuan->id) }}" 
                                            class="btn btn-sm btn-outline-primary"
                                            title="Lihat detail perhitungan">
                                            <i class="fas fa-calculator"></i> Hasil
                                        </a>
                                    @else
                                        <span class="badge bg-secondary text-white">Belum diproses</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center py-4">
                                    <div class="empty-state">
                                        <i class="fas fa-file-alt fa-3x mb-3 text-muted"></i>
                                        <h4>Tidak ada pengajuan</h4>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($validPengajuans->count() > 0)
                <div class="row mt-4">
                    <div class="col-md-4">
                        <div class="card bg-light border-0">
                            <div class="card-body">
                                <h5 class="card-title text-primary">
                                    <i class="fas fa-bolt mr-2"></i>Proses Massal
                                </h5>
                                <div class="form-group">
                                    <label class="small text-muted">Jumlah Data</label>
                                    <select name="limit" class="form-control" required>
                                        <option value="10">10 Data</option>
                                        <option value="25">25 Data</option>
                                        <option value="50">50 Data</option>
                                        <option value="100">100 Data</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-success btn-block">
                                    <i class="fas fa-play-circle mr-2"></i>Proses Sekarang
                                </button>
                                <div class="progress mt-3" id="progressBar" style="display: none; height: 20px;">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                         role="progressbar" style="width: 0%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </form>
        </div>
    </div>

    @if($validPengajuans->count() > 0)
    <div class="row mt-4">
        <div class="col-12">
            <div class="d-flex justify-content-center">
                <nav aria-label="Page navigation">
                    {{ $validPengajuans->links() }}
                </nav>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('styles')
<style>
    .alert {
        min-width: 300px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .progress {
        height: 8px;
        margin-top: 10px;
    }

    .table {
        font-size: 0.9rem;
    }
    .table th {
        white-space: nowrap;
        vertical-align: middle;
    }
    .table td {
        vertical-align: middle;
    }
    .badge {
        font-weight: 500;
        padding: 0.35em 0.65em;
        font-size: 0.85em;
    }
    .empty-state {
        opacity: 0.7;
    }
    .card-header {
        border-bottom: 1px solid rgba(0,0,0,.05);
    }
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
    .form-control {
        font-size: 0.9rem;
    }
    .form-group label {
        font-size: 0.85rem;
        font-weight: 500;
    }
</style>
@endpush

@push('js')
<script>
$(document).ready(function() {
    // Fungsi untuk menampilkan notifikasi
    function showAlert(type, message) {
        const icon = {
            'success': 'fa-check-circle',
            'error': 'fa-times-circle',
            'info': 'fa-info-circle'
        }[type];

        const alert = $(`
            <div class="alert alert-${type} alert-dismissible fade show" 
                 style="position: fixed; top: 20px; right: 20px; z-index: 9999;">
                <i class="fas ${icon} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
        
        $('body').append(alert);
        
        // Hilangkan setelah 5 detik
        setTimeout(() => alert.alert('close'), 5000);
    }

    // Tampilkan notifikasi dari session
    @if(session('success'))
        showAlert('success', '{{ session('success') }}');
    @endif
    
    @if(session('error'))
        showAlert('error', '{{ session('error') }}');
    @endif

    // Proses form dengan loading sederhana
    $('#batchForm').submit(function() {
        $('#progressBar').show();
        $(this).find('button[type="submit"]')
            .prop('disabled', true)
            .html('<i class="fas fa-spinner fa-spin"></i> Memproses...');
    });

    // Select all checkbox
    $('#selectAll').change(function() {
        $('.pengajuan-checkbox:not(:disabled)').prop('checked', this.checked);
    });

    // Disable select all if no checkboxes available
    if ($('.pengajuan-checkbox:not(:disabled)').length === 0) {
        $('#selectAll').prop('disabled', true);
    }

    
});
</script>
@endpush