@extends('layouts.app')
@section('title', 'Grading Scales')
@section('breadcrumb', 'Academic › Grading Scales')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0" style="color:#0f3d23;">
            <i class="bi bi-sliders me-2" style="color:#c9a94d;"></i>Grading Scales
        </h4>
        <p class="text-muted mb-0" style="font-size:.85rem;">{{ $school->name }}</p>
    </div>
    <button class="btn" style="background:#1a6b3c;color:#fff;border-radius:8px;"
            data-bs-toggle="modal" data-bs-target="#createScaleModal">
        <i class="bi bi-plus-lg me-1"></i>Create Custom Scale
    </button>
</div>

{{-- MCSS Default Scale (always shown for reference) --}}
<div class="card table-card mb-4" style="border-left:4px solid #c9a94d;">
    <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
        <span class="fw-semibold">
            <i class="bi bi-award me-1" style="color:#c9a94d;"></i>MCSS Standard Grading Scale
            <span class="badge ms-2" style="background:#e8f5ee;color:#1a6b3c;font-size:.7rem;">System Default</span>
        </span>
        <span class="text-muted" style="font-size:.75rem;">Used when no custom scale is configured</span>
    </div>
    <div class="table-responsive">
        <table class="table table-sm mb-0 align-middle" style="font-size:.83rem;">
            <thead><tr><th>Range</th><th>Grade</th><th>GPA</th><th>Remark</th></tr></thead>
            <tbody>
                @foreach($defaultScale as $band)
                <tr>
                    <td>{{ $band['min'] }} – {{ $band['max'] }}</td>
                    <td><span class="fw-bold" style="color:{{ $band['letter']==='F'?'#c62828':'#1a6b3c' }}">{{ $band['letter'] }}</span></td>
                    <td>{{ $band['gpa'] }}</td>
                    <td class="text-muted">{{ $band['remark'] }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

{{-- Custom Scales --}}
@forelse($scales as $scale)
<div class="card table-card mb-3">
    <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
        <div>
            <span class="fw-semibold">{{ $scale->name }}</span>
            @if($scale->is_default)
            <span class="badge ms-2 badge-status-active" style="font-size:.7rem;">
                <i class="bi bi-check me-1"></i>Default
            </span>
            @endif
        </div>
        <div class="d-flex gap-2">
            @if(!$scale->is_default)
            <form action="{{ route('school.grading.set-default',$scale) }}" method="POST" class="d-inline">
                @csrf
                <button class="btn btn-sm btn-outline-success" title="Set as default">
                    <i class="bi bi-pin me-1"></i>Set Default
                </button>
            </form>
            <form action="{{ route('school.grading.destroy',$scale) }}" method="POST" class="d-inline"
                  onsubmit="return confirm('Delete this grading scale?')">
                @csrf @method('DELETE')
                <button class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-trash"></i>
                </button>
            </form>
            @endif
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-sm mb-0 align-middle" style="font-size:.83rem;">
            <thead><tr><th>Range</th><th>Grade</th><th>GPA</th><th>Remark</th></tr></thead>
            <tbody>
                @foreach(collect($scale->grades)->sortByDesc('min') as $band)
                <tr>
                    <td>{{ $band['min'] }} – {{ $band['max'] }}</td>
                    <td><span class="fw-bold" style="color:{{ $band['letter']==='F'?'#c62828':'#1a6b3c' }}">{{ $band['letter'] }}</span></td>
                    <td>{{ $band['gpa'] }}</td>
                    <td class="text-muted">{{ $band['remark'] }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@empty
<div class="alert" style="background:#e8f5ee;border-left:4px solid #1a6b3c;border-radius:8px;">
    <i class="bi bi-info-circle me-1"></i>
    No custom scales defined. The MCSS standard scale above is used for all grading.
    Create a custom scale only if your school uses a different grade system.
</div>
@endforelse

{{-- Create Scale Modal --}}
<div class="modal fade" id="createScaleModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background:#0f3d23;color:#fff;">
                <h5 class="modal-title"><i class="bi bi-sliders me-2"></i>Create Custom Grading Scale</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('school.grading.store') }}" method="POST">
            @csrf
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Scale Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" required placeholder="e.g. Junior High Scale 2024">
                </div>
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_default" value="1" id="makeDefault">
                        <label class="form-check-label" for="makeDefault">
                            Set as default scale for this school
                        </label>
                    </div>
                </div>

                <div class="fw-semibold mb-2" style="font-size:.85rem;">Grade Bands <span class="text-danger">*</span></div>
                <div class="alert py-2 mb-3" style="background:#fff3cd;font-size:.8rem;">
                    <i class="bi bi-lightbulb me-1"></i>
                    Ranges must cover 0–100 completely with no gaps. Min and Max are inclusive.
                </div>

                <div id="gradeBands">
                    {{-- Rows injected by JS --}}
                </div>

                <button type="button" id="addBand" class="btn btn-sm btn-outline-secondary mt-2" style="border-radius:6px;">
                    <i class="bi bi-plus me-1"></i>Add Grade Band
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn" style="background:#1a6b3c;color:#fff;">Save Scale</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Prefill with MCSS defaults
const defaultBands = [
    {min:90,max:100,letter:'A',  gpa:4.0,remark:'Excellent'},
    {min:80,max:89, letter:'B+', gpa:3.5,remark:'Very Good'},
    {min:70,max:79, letter:'B',  gpa:3.0,remark:'Good'},
    {min:60,max:69, letter:'C+', gpa:2.5,remark:'Above Average'},
    {min:50,max:59, letter:'C',  gpa:2.0,remark:'Average'},
    {min:40,max:49, letter:'D',  gpa:1.0,remark:'Below Average'},
    {min:0, max:39, letter:'F',  gpa:0.0,remark:'Fail'},
];

function bandRow(idx, b = {}) {
    return `<div class="row g-2 mb-2 band-row" data-idx="${idx}">
        <div class="col-1"><input type="number" name="grades[${idx}][min]" class="form-control form-control-sm" placeholder="Min" min="0" max="100" value="${b.min??''}" required></div>
        <div class="col-1"><input type="number" name="grades[${idx}][max]" class="form-control form-control-sm" placeholder="Max" min="0" max="100" value="${b.max??''}" required></div>
        <div class="col-2"><input type="text"   name="grades[${idx}][letter]" class="form-control form-control-sm" placeholder="A, B+…" maxlength="5" value="${b.letter??''}" required></div>
        <div class="col-2"><input type="number" name="grades[${idx}][gpa]"    class="form-control form-control-sm" placeholder="0–4" min="0" max="4" step="0.5" value="${b.gpa??''}" required></div>
        <div class="col-5"><input type="text"   name="grades[${idx}][remark]" class="form-control form-control-sm" placeholder="Remark (Excellent, Good…)" value="${b.remark??''}" required></div>
        <div class="col-1"><button type="button" class="btn btn-sm btn-outline-danger remove-band"><i class="bi bi-trash"></i></button></div>
    </div>`;
}

const container = document.getElementById('gradeBands');
let idx = 0;

// Add header row
container.insertAdjacentHTML('beforebegin',`
<div class="row g-2 mb-1" style="font-size:.72rem;color:#888;">
    <div class="col-1">Min%</div><div class="col-1">Max%</div>
    <div class="col-2">Letter</div><div class="col-2">GPA</div>
    <div class="col-5">Remark</div><div class="col-1"></div>
</div>`);

// Load defaults
defaultBands.forEach(b => { container.insertAdjacentHTML('beforeend', bandRow(idx++, b)); });

document.getElementById('addBand').addEventListener('click', () => {
    container.insertAdjacentHTML('beforeend', bandRow(idx++));
});

container.addEventListener('click', e => {
    if (e.target.closest('.remove-band')) {
        if (container.querySelectorAll('.band-row').length > 2) {
            e.target.closest('.band-row').remove();
        } else {
            alert('A grading scale must have at least 2 bands.');
        }
    }
});
</script>
@endpush