@extends('layouts.app')

@section('title', 'Konfigurasi Bobot Nilai - SIAKAD')
@section('page-title', 'Konfigurasi Bobot Nilai')

@section('content')
<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Tambah Konfigurasi Baru</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.bobot-nilai.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Mata Kuliah</label>
                        <select name="matakuliah_id" class="form-select @error('matakuliah_id') is-invalid @enderror">
                            <option value="">-- Umum (Semua MK) --</option>
                            @foreach($matakuliahs as $mk)
                                <option value="{{ $mk->id }}" {{ old('matakuliah_id') == $mk->id ? 'selected' : '' }}>
                                    {{ $mk->nama }} ({{ $mk->kode }})
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted">Pilih mata kuliah untuk konfigurasi spesifik, atau kosongkan untuk umum</small>
                        @error('matakuliah_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Tugas (%)</label>
                            <input type="number" name="tugas" class="form-control @error('tugas') is-invalid @enderror"
                                value="{{ old('tugas', 25) }}" min="0" max="100" step="0.01" required>
                            @error('tugas')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">UTS (%)</label>
                            <input type="number" name="uts" class="form-control @error('uts') is-invalid @enderror"
                                value="{{ old('uts', 25) }}" min="0" max="100" step="0.01" required>
                            @error('uts')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">UAS (%)</label>
                            <input type="number" name="uas" class="form-control @error('uas') is-invalid @enderror"
                                value="{{ old('uas', 35) }}" min="0" max="100" step="0.01" required>
                            @error('uas')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Presensi (%)</label>
                            <input type="number" name="presensi" class="form-control @error('presensi') is-invalid @enderror"
                                value="{{ old('presensi', 15) }}" min="0" max="100" step="0.01" required>
                            @error('presensi')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="alert alert-info py-2 mb-0">
                            <small>Total: <span id="totalPersen">100</span>%</small>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-plus-lg me-2"></i>Simpan Konfigurasi
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <div>
                    <h5 class="mb-0">Daftar Konfigurasi Bobot</h5>
                    <small class="text-muted">Kelola berbagai konfigurasi bobot penilaian</small>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Mata Kuliah</th>
                            <th class="text-center">Tugas</th>
                            <th class="text-center">UTS</th>
                            <th class="text-center">UAS</th>
                            <th class="text-center">Presensi</th>
                            <th class="text-center">Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($bobotList as $bobot)
                        <tr>
                            <td>
                                <strong>{{ $bobot->matakuliah->nama ?? 'UMUM' }}</strong>
                                @if($bobot->matakuliah)
                                    <br><small class="text-muted">{{ $bobot->matakuliah->kode }}</small>
                                @else
                                    <br><small class="text-muted">Konfigurasi umum (fallback)</small>
                                @endif
                            </td>
                            <td class="text-center">{{ $bobot->tugas }}%</td>
                            <td class="text-center">{{ $bobot->uts }}%</td>
                            <td class="text-center">{{ $bobot->uas }}%</td>
                            <td class="text-center">{{ $bobot->presensi }}%</td>
                            <td class="text-center">
                                @if($bobot->is_default)
                                    <span class="badge bg-success">Default</span>
                                @else
                                    <span class="badge bg-secondary">Inactive</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('admin.bobot-nilai.edit', $bobot) }}" class="action-btn edit" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                @if(!$bobot->is_default)
                                    <form action="{{ route('admin.bobot-nilai.destroy', $bobot) }}" method="POST" class="d-inline">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="action-btn delete" title="Hapus"
                                            onclick="return confirm('Yakin hapus konfigurasi ini?')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <div class="text-muted">
                                    <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                                    <span>Belum ada konfigurasi bobot</span>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .action-btn.success {
        background: rgba(16, 185, 129, 0.1);
        color: var(--success);
    }
    .action-btn.success:hover {
        background: var(--success);
        color: white;
    }
</style>
@endpush

@push('scripts')
<script>
document.querySelectorAll('input[name="tugas"], input[name="uts"], input[name="uas"], input[name="presensi"]').forEach(input => {
    input.addEventListener('input', updateTotal);
});

function updateTotal() {
    const tugas = parseFloat(document.querySelector('input[name="tugas"]').value) || 0;
    const uts = parseFloat(document.querySelector('input[name="uts"]').value) || 0;
    const uas = parseFloat(document.querySelector('input[name="uas"]').value) || 0;
    const presensi = parseFloat(document.querySelector('input[name="presensi"]').value) || 0;
    const total = tugas + uts + uas + presensi;

    const alert = document.querySelector('.alert-info');
    alert.className = total === 100 ? 'alert alert-info py-2 mb-0' : 'alert alert-danger py-2 mb-0';
    document.getElementById('totalPersen').textContent = total.toFixed(2);
}
</script>
@endpush