@extends('layouts.side_bar')

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-12 col-xl-10">
            <div class="card border-0 shadow-sm mb-4 bg-info-subtle">
                <div class="card-body d-flex flex-wrap justify-content-between align-items-center gap-2 p-4">
                    <div>
                        <h2 class="h4 mb-1">Post Notice</h2>
                        <p class="text-secondary mb-0">Create a new announcement for your students</p>
                    </div>
                    <a href="{{ route('notices.index') }}" class="btn btn-outline-secondary rounded-pill">Back to List</a>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 p-lg-5">
                    <form method="POST" action="{{ route('notices.store') }}" class="row g-3">
                        @csrf

                        <div class="col-md-6">
                            <label for="course_id" class="form-label">Course</label>
                            <select id="course_id" name="course_id" class="form-select border-2 border-secondary-subtle @error('course_id') is-invalid @enderror" required>
                                <option value="">Select course</option>
                                @foreach ($courses as $course)
                                    <option value="{{ $course->id }}" {{ old('course_id') === (string)$course->id ? 'selected' : '' }}>
                                        {{ $course->title }}
                                    </option>
                                @endforeach
                            </select>
                            @error('course_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="subject_id" class="form-label">Subject</label>
                            <select id="subject_id" name="subject_id" class="form-select border-2 border-secondary-subtle @error('subject_id') is-invalid @enderror" required>
                                <option value="">Select subject</option>
                                @foreach ($subjects as $subject)
                                    <option value="{{ $subject->id }}" {{ old('subject_id') === (string)$subject->id ? 'selected' : '' }}>
                                        {{ $subject->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('subject_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label for="title" class="form-label">Notice Title</label>
                            <input id="title" type="text" name="title" value="{{ old('title') }}" class="form-control border-2 border-secondary-subtle @error('title') is-invalid @enderror" required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label for="content" class="form-label">Notice Content</label>
                            <textarea id="content" name="content" rows="6" class="form-control border-2 border-secondary-subtle @error('content') is-invalid @enderror" required>{{ old('content') }}</textarea>
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="priority" class="form-label">Priority</label>
                            <select id="priority" name="priority" class="form-select border-2 border-secondary-subtle @error('priority') is-invalid @enderror" required>
                                <option value="low" {{ old('priority', 'normal') === 'low' ? 'selected' : '' }}>Low</option>
                                <option value="normal" {{ old('priority', 'normal') === 'normal' ? 'selected' : '' }}>Normal</option>
                                <option value="high" {{ old('priority', 'normal') === 'high' ? 'selected' : '' }}>High</option>
                            </select>
                            @error('priority')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="type" class="form-label">Notice Type</label>
                            <select id="type" name="type" class="form-select border-2 border-secondary-subtle @error('type') is-invalid @enderror" required>
                                <option value="message" {{ old('type', 'message') === 'message' ? 'selected' : '' }}>Message</option>
                                <option value="link" {{ old('type') === 'link' ? 'selected' : '' }}>Class Link</option>
                                <option value="record" {{ old('type') === 'record' ? 'selected' : '' }}>Class Record</option>
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6" id="record-date-group" style="display: none;">
                            <label for="record_date" class="form-label">Record Date</label>
                            <input id="record_date" type="date" name="record_date" value="{{ old('record_date') }}" class="form-control border-2 border-secondary-subtle @error('record_date') is-invalid @enderror">
                            @error('record_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <div class="form-check mt-4">
                                <input id="is_pinned" type="checkbox" name="is_pinned" class="form-check-input border-2" value="1" {{ old('is_pinned') ? 'checked' : '' }}>
                                <label for="is_pinned" class="form-check-label">Pin this notice (important)</label>
                            </div>
                        </div>

                        <div class="col-12 d-flex gap-2 pt-3">
                            <button type="submit" class="btn btn-primary rounded-pill px-4">Post Notice</button>
                            <a href="{{ route('notices.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const typeSelect = document.getElementById('type');
        const recordGroup = document.getElementById('record-date-group');
        const recordInput = document.getElementById('record_date');

        function toggleRecord() {
            if (!typeSelect) return;
            if (typeSelect.value === 'record') {
                recordGroup.style.display = '';
                recordInput.required = true;
            } else {
                recordGroup.style.display = 'none';
                recordInput.required = false;
                recordInput.value = '';
            }
        }

        if (typeSelect) {
            typeSelect.addEventListener('change', toggleRecord);
            toggleRecord();
        }
    });
</script>
@endpush