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

@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-book me-2" style="color:#c9a94d;"></i>Subjects
        </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="#addSubjectModal">
        <i class="bi bi-plus-lg me-1"></i>Add Subject
    </button>
</div>

<div class="row g-3 mb-4">
    @php
    $cats = ['core' => ['label'=>'Core Subjects', 'color'=>'#1a6b3c', 'bg'=>'#e8f5ee'],
             'elective' => ['label'=>'Elective Subjects', 'color'=>'#1565c0', 'bg'=>'#e3f2fd'],
             'vocational' => ['label'=>'Vocational', 'color'=>'#6a1b9a', 'bg'=>'#f3e5f5']];
    @endphp
    @foreach($cats as $key => $cat)
    @php $group = $subjects->where('category', $key); @endphp
    <div class="col-lg-4">
        <div class="card table-card h-100">
            <div class="card-header py-2 d-flex justify-content-between"
                 style="background:{{ $cat['bg'] }}; border-left:3px solid {{ $cat['color'] }};">
                <span class="fw-semibold" style="color:{{ $cat['color'] }}; font-size:.85rem;">
                    {{ $cat['label'] }}
                </span>
                <span class="badge" style="background:{{ $cat['color'] }}; color:#fff; font-size:.72rem;">
                    {{ $group->count() }}
                </span>
            </div>
            <ul class="list-group list-group-flush">
                @forelse($group->sortBy('name') as $subject)
                <li class="list-group-item px-3 py-2 d-flex justify-content-between align-items-center
                            {{ !$subject->is_active ? 'opacity-50' : '' }}">
                    <div>
                        <span class="fw-semibold" style="font-size:.85rem;">{{ $subject->name }}</span>
                        <span class="badge bg-secondary ms-1" style="font-size:.65rem;">{{ $subject->code }}</span>
                        @if(!$subject->is_active)
                        <span class="badge bg-danger ms-1" style="font-size:.65rem;">Inactive</span>
                        @endif
                        <div class="text-muted" style="font-size:.72rem;">
                            Used in {{ $subject->class_subjects_count }} class(es)
                        </div>
                    </div>
                    <form action="{{ route('school.academic.subjects.toggle', $subject) }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-sm {{ $subject->is_active ? 'btn-outline-warning' : 'btn-outline-success' }}"
                                title="{{ $subject->is_active ? 'Deactivate' : 'Activate' }}">
                            <i class="bi bi-toggle-{{ $subject->is_active ? 'on' : 'off' }}"></i>
                        </button>
                    </form>
                </li>
                @empty
                <li class="list-group-item text-center py-3 text-muted" style="font-size:.82rem;">
                    No {{ $key }} subjects yet.
                </li>
                @endforelse
            </ul>
        </div>
    </div>
    @endforeach
</div>

{{-- Add Subject Modal --}}
<div class="modal fade" id="addSubjectModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#0f3d23; color:#fff;">
                <h5 class="modal-title"><i class="bi bi-book me-2"></i>Add Subject</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('school.academic.subjects.store') }}" method="POST">
            @csrf
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Subject Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" required
                           placeholder="e.g. Mathematics, English Language">
                </div>
                <div class="row g-3">
                    <div class="col-md-5">
                        <label class="form-label fw-semibold">Subject Code <span class="text-danger">*</span></label>
                        <input type="text" name="code" class="form-control" required
                               placeholder="e.g. MATH" style="text-transform:uppercase;"
                               maxlength="10">
                    </div>
                    <div class="col-md-7">
                        <label class="form-label fw-semibold">Category <span class="text-danger">*</span></label>
                        <select name="category" class="form-select" required>
                            <option value="core">Core (Compulsory)</option>
                            <option value="elective">Elective</option>
                            <option value="vocational">Vocational</option>
                        </select>
                    </div>
                </div>

                {{-- Common MCSS subjects quick-add --}}
                <div class="mt-3">
                    <div class="form-label fw-semibold" style="font-size:.8rem;">Quick Add Common Subjects</div>
                    <div class="d-flex flex-wrap gap-1">
                        @foreach([
                            ['Mathematics','MATH','core'],
                            ['English Language','ENG','core'],
                            ['General Science','SCI','core'],
                            ['Social Studies','SOC','core'],
                            ['Liberian History','LH','core'],
                            ['Economics','ECON','elective'],
                            ['Government','GOVT','elective'],
                            ['Geography','GEO','elective'],
                            ['Literature','LIT','elective'],
                            ['Biology','BIO','elective'],
                            ['Chemistry','CHEM','elective'],
                            ['Physics','PHY','elective'],
                            ['Agriculture','AGRI','vocational'],
                            ['Business Studies','BUS','vocational'],
                            ['Computer Studies','COMP','vocational'],
                        ] as [$sname, $scode, $scat])
                        <button type="button" class="btn btn-sm btn-outline-secondary quick-subject"
                                style="font-size:.72rem; border-radius:4px;"
                                data-name="{{ $sname }}" data-code="{{ $scode }}" data-cat="{{ $scat }}">
                            {{ $sname }}
                        </button>
                        @endforeach
                    </div>
                </div>
            </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;">Add Subject</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.quick-subject').forEach(btn => {
    btn.addEventListener('click', function () {
        document.querySelector('[name="name"]').value     = this.dataset.name;
        document.querySelector('[name="code"]').value     = this.dataset.code;
        document.querySelector('[name="category"]').value = this.dataset.cat;
        // Highlight selected
        document.querySelectorAll('.quick-subject').forEach(b => b.classList.remove('active','btn-success'));
        this.classList.add('active','btn-outline-success');
    });
});
// Auto-uppercase code field
document.querySelector('[name="code"]')?.addEventListener('input', function() {
    this.value = this.value.toUpperCase();
});
</script>
@endpush