@extends('admin.layout')
@section('title','Study Materials')
@section('page-title','Study Materials')

@section('content')
<div style="display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start;">

<!-- Add Material Form -->
<div class="card">
    <div class="card-header"><h3><i class="fas fa-plus" style="color:var(--red);margin-right:8px;"></i>Add Material</h3></div>
    <div class="card-body">
        <form method="POST" action="{{ route('admin.material.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="form-grid" style="gap:12px;">
                <div class="form-group"><label>Title *</label><input name="title" required></div>
                <div class="form-group"><label>Description</label><textarea name="description" rows="2" style="resize:none;"></textarea></div>
                <div class="form-group"><label>Type *</label>
                    <select name="type" id="matType" onchange="toggleUrl(this.value)">
                        <option value="pdf">PDF</option>
                        <option value="video">Video (URL)</option>
                        <option value="link">Link</option>
                        <option value="image">Image</option>
                        <option value="audio">Audio</option>
                    </select>
                </div>
                <div class="form-group" id="fileField"><label>Upload File</label><input type="file" name="file"></div>
                <div class="form-group" id="urlField" style="display:none;"><label>External URL</label><input name="external_url" placeholder="https://…"></div>
                <div class="form-group"><label>For Course *</label>
                    <select name="course" required>
                        @foreach(['All','N5','N4','N3','N2','N1','Kaiwa','Online'] as $c)
                        <option value="{{ $c }}">{{ $c }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group"><label>Topic</label><input name="topic" placeholder="e.g. Hiragana, Grammar…"></div>
                <div class="form-group"><label>Sort Order</label><input type="number" name="sort_order" value="0"></div>
            </div>
            <button type="submit" class="btn btn-primary" style="margin-top:14px;width:100%;"><i class="fas fa-save"></i> Add Material</button>
        </form>
    </div>
</div>

<!-- Materials List -->
<div>
    <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;">
        <form method="GET">
            <select name="course" onchange="this.form.submit()" style="padding:8px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;outline:none;">
                <option value="">All Courses</option>
                @foreach(['N5','N4','N3','N2','N1','Kaiwa','Online','All'] as $c)
                <option value="{{ $c }}" {{ request('course')==$c?'selected':'' }}>{{ $c }}</option>
                @endforeach
            </select>
        </form>
        <span style="font-size:13px;color:#64748b;">{{ $materials->total() }} materials</span>
    </div>

    <div class="card">
        <table>
            <thead><tr><th>Title</th><th>Type</th><th>Course</th><th>Topic</th><th></th></tr></thead>
            <tbody>
                @forelse($materials as $m)
                <tr>
                    <td>
                        <div style="font-weight:600;color:#0f172a;">{{ $m->title }}</div>
                        @if($m->description)<div style="font-size:11px;color:#94a3b8;">{{ Str::limit($m->description,60) }}</div>@endif
                    </td>
                    <td>
                        <span class="badge badge-blue"><i class="fas {{ $m->typeIcon() }}"></i> {{ ucfirst($m->type) }}</span>
                    </td>
                    <td><span class="badge badge-gray">{{ $m->course }}</span></td>
                    <td style="font-size:12px;color:#64748b;">{{ $m->topic ?: '—' }}</td>
                    <td>
                        @if($m->file_path)
                        <a href="{{ asset('uploads/materials/'.$m->file_path) }}" target="_blank" class="btn btn-outline btn-sm btn-icon" title="View"><i class="fas fa-eye"></i></a>
                        @elseif($m->external_url)
                        <a href="{{ $m->external_url }}" target="_blank" class="btn btn-outline btn-sm btn-icon" title="Open"><i class="fas fa-external-link-alt"></i></a>
                        @endif
                        <form method="POST" action="{{ route('admin.material.delete',$m) }}" style="display:inline;" onsubmit="return confirm('Delete?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-icon" style="background:#fef2f2;color:#dc2626;border:none;"><i class="fas fa-trash"></i></button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr><td colspan="5" style="text-align:center;padding:40px;color:#94a3b8;">No materials yet.</td></tr>
                @endforelse
            </tbody>
        </table>
        @if($materials->hasPages())
        <div style="padding:14px 20px;">{{ $materials->links() }}</div>
        @endif
    </div>
</div>
</div>
@endsection

@push('scripts')
<script>
function toggleUrl(v) {
    document.getElementById('fileField').style.display = (v==='video'||v==='link') ? 'none' : 'flex';
    document.getElementById('urlField').style.display  = (v==='video'||v==='link') ? 'flex' : 'none';
}
</script>
@endpush