@extends('layouts.app')
@section('title', '我要申請 - 閱讀卡管理平台')
@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-file-earmark-plus me-1"></i>我要申請</h5>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('apply.store') }}" id="applyForm">
            @csrf

            {{-- 1. 學校 --}}
            <div class="mb-4 row">
                <label class="col-sm-2 col-form-label fw-semibold">學校：</label>
                <div class="col-sm-10">
                    @if($isAdmin)
                    <select id="schoolSelect" name="school_code" class="form-select" required>
                        <option value="">請選擇</option>
                        @foreach($schools as $code => $name)
                        <option value="{{ $code }}" {{ $school == $code ? 'selected' : '' }}>{{ $name }}</option>
                        @endforeach
                    </select>
                    @else
                    <input type="hidden" name="school_code" value="{{ $school }}">
                    <span class="form-control-plaintext">{{ $schoolName ?? $school }}</span>
                    @endif
                </div>
            </div>

            {{-- 2. 申請對象 --}}
            <div class="mb-4 row">
                <label class="col-sm-2 col-form-label fw-semibold">申請對象：</label>
                <div class="col-sm-10 pt-2">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="target" id="targetStudent" value="student" checked>
                        <label class="form-check-label" for="targetStudent">學生</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="target" id="targetTeacher" value="teacher">
                        <label class="form-check-label" for="targetTeacher">教師</label>
                    </div>
                </div>
            </div>

            {{-- 3. 選擇人員 --}}
            <div class="mb-4 row">
                <label class="col-sm-2 col-form-label fw-semibold">選擇人員：</label>
                <div class="col-sm-10">
                    <div id="loadingIndicator" class="text-muted d-none">
                        <div class="spinner-border spinner-border-sm me-1" role="status"></div>資料讀取中...
                    </div>

                    {{-- 學生區 --}}
                    <div id="studentSection">
                        <div id="studentContainer" class="border rounded p-3" style="max-height: 500px; overflow-y: auto;">
                            <p class="text-muted mb-0">{{ $school ? '載入中...' : '請先選擇學校' }}</p>
                        </div>
                        <div class="mt-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleAll('.stu-check', true)">全選</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleAll('.stu-check', false)">取消全選</button>
                            <span class="ms-2 text-muted">已選 <span class="badge bg-primary" id="stuCount">0</span> 人</span>
                        </div>
                    </div>

                    {{-- 教師區 --}}
                    <div id="teacherSection" class="d-none">
                        <div id="teacherContainer" class="border rounded p-3" style="max-height: 500px; overflow-y: auto;">
                            <p class="text-muted mb-0">{{ $school ? '載入中...' : '請先選擇學校' }}</p>
                        </div>
                        <div class="mt-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleAll('.tea-check', true)">全選</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleAll('.tea-check', false)">取消全選</button>
                            <span class="ms-2 text-muted">已選 <span class="badge bg-info" id="teaCount">0</span> 人</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 4. 申請原因 --}}
            <div class="mb-4 row">
                <label class="col-sm-2 col-form-label fw-semibold">申請原因：</label>
                <div class="col-sm-10 pt-2">
                    @foreach($types as $key => $type)
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="apply_type" value="{{ $key }}" id="type_{{ $key }}" {{ $key == 1 ? 'checked' : '' }} required>
                        <label class="form-check-label" for="type_{{ $key }}">
                            {{ $type['name'] }} ${{ $type['cost'] }}
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="row">
                <div class="col-sm-10 offset-sm-2">
                    <button type="submit" class="btn btn-primary" onclick="return confirm('是否確認送出申請？')">
                        <i class="bi bi-send me-1"></i>送出申請
                    </button>
                    <a href="{{ route('apply.index') }}" class="btn btn-secondary ms-2">返回</a>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
const school = '{{ $school }}';
const isAdmin = {{ $isAdmin ? 'true' : 'false' }};

// 切換申請對象
document.querySelectorAll('input[name="target"]').forEach(radio => {
    radio.addEventListener('change', function() {
        if (this.value === 'student') {
            document.getElementById('studentSection').classList.remove('d-none');
            document.getElementById('teacherSection').classList.add('d-none');
        } else {
            document.getElementById('studentSection').classList.add('d-none');
            document.getElementById('teacherSection').classList.remove('d-none');
        }
    });
});

function toggleAll(selector, checked) {
    document.querySelectorAll(selector).forEach(cb => cb.checked = checked);
    updateCounts();
}

function updateCounts() {
    document.getElementById('stuCount').textContent = document.querySelectorAll('.stu-check:checked').length;
    document.getElementById('teaCount').textContent = document.querySelectorAll('.tea-check:checked').length;
}

function loadStudents(schoolCode) {
    if (!schoolCode) {
        document.getElementById('studentContainer').innerHTML = '<p class="text-muted mb-0">請先選擇學校</p>';
        return;
    }
    document.getElementById('loadingIndicator').classList.remove('d-none');
    document.getElementById('studentContainer').innerHTML = '';

    fetch(`{{ url('ilc-data/student-tree') }}?school=${schoolCode}`)
        .then(r => r.json())
        .then(data => {
            document.getElementById('loadingIndicator').classList.add('d-none');
            let html = '';

            const firstVal = Object.values(data)[0];
            if (firstVal && typeof firstVal === 'object' && firstVal.idno) {
                html += '<div class="row">';
                Object.values(data).forEach(stu => {
                    const val = `${stu.uid},${stu.name},${stu.idno},${stu.seat},${stu.ban}`;
                    html += `<div class="col-sm-6 col-md-4 col-lg-3">
                        <div class="form-check">
                            <input class="form-check-input stu-check" type="checkbox" name="students[]" value="${val}" id="stu_${stu.idno}" onchange="updateCounts()">
                            <label class="form-check-label" for="stu_${stu.idno}">${stu.seat}號 ${stu.name}</label>
                        </div></div>`;
                });
                html += '</div>';
            } else {
                Object.keys(data).sort().forEach(grade => {
                    html += `<div class="mb-3">
                        <h6 class="text-primary fw-bold border-bottom pb-1 cursor-pointer" onclick="toggleSection('grade_${grade}')">
                            <i class="bi bi-chevron-down me-1"></i>${grade}年級
                        </h6>
                        <div id="grade_${grade}">`;
                    const bans = data[grade];
                    Object.keys(bans).sort().forEach(ban => {
                        html += `<div class="ms-2 mb-2">
                            <div class="fw-semibold text-secondary mb-1 cursor-pointer" onclick="toggleSection('ban_${ban}')">
                                <i class="bi bi-chevron-down me-1"></i>${ban}班
                                <button type="button" class="btn btn-outline-secondary btn-sm ms-2 py-0 px-1" style="font-size:.7rem" onclick="event.stopPropagation();toggleAll('.ban-${ban}', true)">全選</button>
                            </div>
                            <div id="ban_${ban}" class="row ms-1">`;
                        Object.values(bans[ban]).forEach(stu => {
                            const val = `${stu.uid},${stu.name},${stu.idno},${stu.seat},${stu.ban}`;
                            html += `<div class="col-sm-6 col-md-4 col-lg-3">
                                <div class="form-check">
                                    <input class="form-check-input stu-check ban-${ban}" type="checkbox" name="students[]" value="${val}" id="stu_${stu.idno}" onchange="updateCounts()">
                                    <label class="form-check-label small" for="stu_${stu.idno}">${stu.seat}號 ${stu.name}</label>
                                </div></div>`;
                        });
                        html += '</div></div>';
                    });
                    html += '</div></div>';
                });
            }

            if (!html) html = '<p class="text-muted mb-0">沒有學生資料</p>';
            document.getElementById('studentContainer').innerHTML = html;
        })
        .catch(() => {
            document.getElementById('loadingIndicator').classList.add('d-none');
            document.getElementById('studentContainer').innerHTML = '<p class="text-danger mb-0">載入失敗</p>';
        });
}

function loadTeachers(schoolCode) {
    if (!schoolCode) {
        document.getElementById('teacherContainer').innerHTML = '<p class="text-muted mb-0">請先選擇學校</p>';
        return;
    }
    document.getElementById('teacherContainer').innerHTML = '<div class="text-muted"><div class="spinner-border spinner-border-sm me-1"></div>載入中...</div>';

    fetch(`{{ url('ilc-data/teacher-list') }}?school=${schoolCode}`)
        .then(r => r.json())
        .then(data => {
            let html = '<div class="row">';
            Object.values(data).forEach(tea => {
                const val = `${tea.uid},${tea.name},${tea.idno},,`;
                html += `<div class="col-sm-6 col-md-4 col-lg-3">
                    <div class="form-check">
                        <input class="form-check-input tea-check" type="checkbox" name="teachers[]" value="${val}" id="tea_${tea.idno}" onchange="updateCounts()">
                        <label class="form-check-label" for="tea_${tea.idno}">${tea.name} 老師</label>
                    </div></div>`;
            });
            html += '</div>';

            if (Object.keys(data).length === 0) html = '<p class="text-muted mb-0">沒有教師資料</p>';
            document.getElementById('teacherContainer').innerHTML = html;
        })
        .catch(() => {
            document.getElementById('teacherContainer').innerHTML = '<p class="text-danger mb-0">載入失敗</p>';
        });
}

function toggleSection(id) {
    const el = document.getElementById(id);
    el.style.display = el.style.display === 'none' ? '' : 'none';
}

// Init
document.addEventListener('DOMContentLoaded', function() {
    if (isAdmin) {
        const sel = document.getElementById('schoolSelect');
        sel.addEventListener('change', function() {
            loadStudents(this.value);
            loadTeachers(this.value);
        });
        if (sel.value) {
            loadStudents(sel.value);
            loadTeachers(sel.value);
        }
    } else if (school) {
        loadStudents(school);
        loadTeachers(school);
    }
});
</script>
<style>.cursor-pointer{cursor:pointer}</style>
@endpush
@endsection