@extends('layouts.app')
@section('title', 'Grade System')
@section('content')
    <h2>Grade System</h2>

    <h4>বর্তমান ব্যবহৃত System</h4>
    @php $active = $customSystem ?? $defaultSystem; @endphp
    <table class="table table-bordered bg-white" style="max-width:500px;">
        <thead><tr><th>Range (%)</th><th>Grade</th></tr></thead>
        <tbody>
        @foreach($active->bands as $band)
            <tr><td>{{ $band->min_percent }} - {{ $band->max_percent }}</td><td>{{ $band->grade_label }}</td></tr>
        @endforeach
        </tbody>
    </table>

    @if(auth()->user()->hasRole('institution_head'))
        <h4 class="mt-4">নিজস্ব Custom Grade System তৈরি/আপডেট করুন</h4>
        <p class="text-muted"><small>এটি আপনার প্রতিষ্ঠানের সকল Branch-এর জন্য প্রযোজ্য হবে।</small></p>
        <form method="POST" action="{{ route('grade-systems.store') }}" style="max-width:600px;">
            @csrf
            <input type="text" name="name" class="form-control mb-2" placeholder="System-এর নাম" value="{{ $customSystem->name ?? 'Custom Grade System' }}" required>
            <div id="bandsContainer">
                <div class="d-flex gap-2 mb-2">
                    <input type="number" name="bands[0][min_percent]" class="form-control" placeholder="Min %" required>
                    <input type="number" name="bands[0][max_percent]" class="form-control" placeholder="Max %" required>
                    <input type="text" name="bands[0][grade_label]" class="form-control" placeholder="Grade Label" required>
                </div>
            </div>
            <button type="button" class="btn btn-sm btn-secondary mb-2" onclick="addBandRow()">+ Band যোগ করুন</button>
            <br>
            <button type="submit" class="btn btn-primary">সংরক্ষণ করুন</button>
        </form>
        <script>
            let bandIndex = 1;
            function addBandRow() {
                const c = document.getElementById('bandsContainer');
                const row = document.createElement('div');
                row.className = 'd-flex gap-2 mb-2';
                row.innerHTML = `<input type="number" name="bands[${bandIndex}][min_percent]" class="form-control" placeholder="Min %" required>
                    <input type="number" name="bands[${bandIndex}][max_percent]" class="form-control" placeholder="Max %" required>
                    <input type="text" name="bands[${bandIndex}][grade_label]" class="form-control" placeholder="Grade Label" required>`;
                c.appendChild(row);
                bandIndex++;
            }
        </script>
    @endif
@endsection