@extends('layouts.app')

@section('title', 'Academic Structure')

@push('styles')
<style>
    .tab-btn { padding: 8px 20px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; background: transparent; color: var(--text-muted); border-radius: 6px; }
    .tab-btn.active { background: var(--primary); color: white; }
    .tab-btn:hover:not(.active) { background: #F5F3F1; }
    .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
    .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); }
    .form-input:focus { border-color: var(--primary-light); }
    .form-select { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); }
    .form-select:focus { border-color: var(--primary-light); }
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; }
    .btn-primary { background: var(--primary); color: white; }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-outline { background: transparent; border: 1px solid var(--card-border); color: var(--text-primary); }
    .btn-outline:hover { background: #F5F3F1; }
    .btn-danger { background: var(--danger); color: white; }
    .btn-danger:hover { background: #B91C1C; }
    .btn-sm { padding: 4px 10px; font-size: 13px; }
    [x-cloak] { display: none !important; }
</style>
@endpush

@section('content')

<div x-data="{ tab: 'boards', delModal: false, delId: null, delUrl: '', openDelete(id, url) { delId = id; delUrl = url; delModal = true; }, closeDelete() { delModal = false; delId = null; delUrl = ''; } }">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
        <div>
            <h1 style="font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;">Academic structure</h1>
            <p style="font-size: 13px; color: var(--text-muted);">Manage boards, classes, streams, and subjects</p>
        </div>
    </div>

    <div style="display: flex; gap: 4px; background: #F5F3F1; padding: 4px; border-radius: 8px; margin-bottom: 24px; width: fit-content;">
        <button @click="tab = 'boards'" class="tab-btn" :class="{ 'active': tab === 'boards' }">Boards</button>
        <button @click="tab = 'classes'" class="tab-btn" :class="{ 'active': tab === 'classes' }">Classes</button>
        <button @click="tab = 'streams'" class="tab-btn" :class="{ 'active': tab === 'streams' }">Streams</button>
        <button @click="tab = 'subjects'" class="tab-btn" :class="{ 'active': tab === 'subjects' }">Subjects</button>
    </div>

    <div x-show="tab === 'boards'" x-transition>
        <div style="display: grid; grid-template-columns: 360px 1fr; gap: 24px;">
            <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px;">
                <h3 style="font-size: 15px; font-weight: 600; margin-bottom: 16px;">Add board</h3>
                <form method="POST" action="{{ route('structure.boards.store') }}">
                    @csrf
                    <div style="margin-bottom: 12px;">
                        <label class="form-label">Board name</label>
                        <input type="text" name="name" required class="form-input" placeholder="e.g. CBSE">
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center;">Save</button>
                </form>
            </div>
            <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden;">
                <div style="padding: 14px 20px; border-bottom: 1px solid var(--card-border); font-weight: 600; font-size: 14px;">All boards</div>
                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                    <thead>
                        <tr style="background: #FAFAF8;">
                            <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase;">Name</th>
                            <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($boards as $board)
                            <tr style="border-top: 1px solid var(--card-border);">
                                <td style="padding: 12px 20px; font-weight: 500;">{{ $board->name }}</td>
                                <td style="padding: 12px 20px;">
                                    <button @click="openDelete({{ $board->id }}, '/structure/boards/' + {{ $board->id }})" class="btn btn-danger btn-sm">Delete</button>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="2" style="padding: 24px 20px; text-align: center; color: var(--text-muted);">No boards added.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div x-show="tab === 'classes'" x-transition x-cloak>
        <div style="display: grid; grid-template-columns: 360px 1fr; gap: 24px;">
            <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px;">
                <h3 style="font-size: 15px; font-weight: 600; margin-bottom: 16px;">Add class</h3>
                <form method="POST" action="{{ route('structure.classes.store') }}">
                    @csrf
                    <div style="margin-bottom: 12px;">
                        <label class="form-label">Class name</label>
                        <input type="text" name="name" required class="form-input" placeholder="e.g. 10">
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center;">Save</button>
                </form>
            </div>
            <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden;">
                <div style="padding: 14px 20px; border-bottom: 1px solid var(--card-border); font-weight: 600; font-size: 14px;">All classes</div>
                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                    <thead>
                        <tr style="background: #FAFAF8;">
                            <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase;">Name</th>
                            <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($classes as $class)
                            <tr style="border-top: 1px solid var(--card-border);">
                                <td style="padding: 12px 20px; font-weight: 500;">{{ $class->name }}</td>
                                <td style="padding: 12px 20px;">
                                    <button @click="openDelete({{ $class->id }}, '/structure/classes/' + {{ $class->id }})" class="btn btn-danger btn-sm">Delete</button>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="2" style="padding: 24px 20px; text-align: center; color: var(--text-muted);">No classes added.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div x-show="tab === 'streams'" x-transition x-cloak>
        <div style="display: grid; grid-template-columns: 360px 1fr; gap: 24px;">
            <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px;">
                <h3 style="font-size: 15px; font-weight: 600; margin-bottom: 16px;">Add stream</h3>
                <form method="POST" action="{{ route('structure.streams.store') }}">
                    @csrf
                    <div style="margin-bottom: 12px;">
                        <label class="form-label">Stream name</label>
                        <input type="text" name="name" required class="form-input" placeholder="e.g. Science">
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center;">Save</button>
                </form>
            </div>
            <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden;">
                <div style="padding: 14px 20px; border-bottom: 1px solid var(--card-border); font-weight: 600; font-size: 14px;">All streams</div>
                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                    <thead>
                        <tr style="background: #FAFAF8;">
                            <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase;">Name</th>
                            <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($streams as $stream)
                            <tr style="border-top: 1px solid var(--card-border);">
                                <td style="padding: 12px 20px; font-weight: 500;">{{ $stream->name }}</td>
                                <td style="padding: 12px 20px;">
                                    <button @click="openDelete({{ $stream->id }}, '/structure/streams/' + {{ $stream->id }})" class="btn btn-danger btn-sm">Delete</button>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="2" style="padding: 24px 20px; text-align: center; color: var(--text-muted);">No streams added.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div x-show="tab === 'subjects'" x-transition x-cloak>
        <div style="display: grid; grid-template-columns: 360px 1fr; gap: 24px;">
            <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px;">
                <h3 style="font-size: 15px; font-weight: 600; margin-bottom: 16px;">Add subject</h3>
                <form method="POST" action="{{ route('structure.subjects.store') }}">
                    @csrf
                    <div style="display: grid; gap: 12px;">
                        <div>
                            <label class="form-label">Subject name</label>
                            <input type="text" name="name" required class="form-input" placeholder="e.g. Mathematics">
                        </div>
                        <div>
                            <label class="form-label">Board</label>
                            <select name="board_id" class="form-select">
                                <option value="">Select board</option>
                                @foreach ($boards as $board)
                                    <option value="{{ $board->id }}">{{ $board->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Class</label>
                            <select name="class_id" class="form-select">
                                <option value="">Select class</option>
                                @foreach ($classes as $class)
                                    <option value="{{ $class->id }}">{{ $class->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Stream</label>
                            <select name="stream_id" class="form-select">
                                <option value="">Select stream</option>
                                @foreach ($streams as $stream)
                                    <option value="{{ $stream->id }}">{{ $stream->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center;">Save</button>
                    </div>
                </form>
            </div>
            <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden;">
                <div style="padding: 14px 20px; border-bottom: 1px solid var(--card-border); display: flex; align-items: center; justify-content: space-between;">
                    <span style="font-weight: 600; font-size: 14px;">All subjects</span>
                    <div style="display: flex; gap: 8px;">
                        <select x-data x-ref="boardFilter" class="form-select" style="width: 140px; padding: 4px 8px; font-size: 12px;" @change="$el.closest('table').querySelectorAll('[data-board]').forEach(el => el.style.display = $el.value ? (el.dataset.board === $el.value ? '' : 'none') : '')">
                            <option value="">All boards</option>
                            @foreach ($boards as $board)
                                <option value="{{ $board->id }}">{{ $board->name }}</option>
                            @endforeach
                        </select>
                        <select x-data x-ref="classFilter" class="form-select" style="width: 120px; padding: 4px 8px; font-size: 12px;" @change="$el.closest('table').querySelectorAll('[data-class]').forEach(el => el.style.display = $el.value ? (el.dataset.class === $el.value ? '' : 'none') : '')">
                            <option value="">All classes</option>
                            @foreach ($classes as $class)
                                <option value="{{ $class->id }}">{{ $class->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                    <thead>
                        <tr style="background: #FAFAF8;">
                            <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase;">Name</th>
                            <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase;">Board</th>
                            <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase;">Class</th>
                            <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase;">Stream</th>
                            <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($subjects as $subject)
                            <tr style="border-top: 1px solid var(--card-border);" data-board="{{ $subject->board_id }}" data-class="{{ $subject->class_id }}">
                                <td style="padding: 12px 20px; font-weight: 500;">{{ $subject->name }}</td>
                                <td style="padding: 12px 20px; color: var(--text-muted);">{{ $subject->board->name ?? '—' }}</td>
                                <td style="padding: 12px 20px; color: var(--text-muted);">{{ $subject->classModel->name ?? '—' }}</td>
                                <td style="padding: 12px 20px; color: var(--text-muted);">{{ $subject->stream->name ?? '—' }}</td>
                                <td style="padding: 12px 20px;">
                                    <button @click="openDelete({{ $subject->id }}, '/structure/subjects/' + {{ $subject->id }})" class="btn btn-danger btn-sm">Delete</button>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" style="padding: 24px 20px; text-align: center; color: var(--text-muted);">No subjects added.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div x-show="delModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center">
        <div class="fixed inset-0 bg-black/50" @click="closeDelete()"></div>
        <div class="relative bg-white rounded-xl shadow-xl p-6 w-full max-w-sm mx-4">
            <h3 class="text-lg font-semibold mb-2">Confirm Delete</h3>
            <p class="text-gray-600 text-sm mb-6">Are you sure? This cannot be undone.</p>
            <div class="flex justify-end gap-3">
                <button @click="closeDelete()" class="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50">Cancel</button>
                <form method="POST" x-bind:action="delUrl" style="display:inline">
                    @csrf @method('DELETE')
                    <button type="submit" class="px-4 py-2 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>