@extends('layouts.admin')

@section('title', 'Send Announcement')
@section('page-title', 'Send Announcement')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <a href="{{ route('admin.notifications.index') }}" class="text-decoration-none text-secondary">
            <i class="bi bi-arrow-left"></i> Back to Notifications
        </a>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="admin-card">
            <h5 class="mb-4 fw-bold">Compose Notification</h5>
            <form action="{{ route('admin.notifications.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="mb-3">
                    <label class="form-label fw-bold">Announcement Title <span class="text-danger">*</span></label>
                    <input type="text" name="title" class="form-control rounded-3 @error('title') is-invalid @enderror" placeholder="e.g. PTM Meeting Rescheduled" value="{{ old('title') }}" required>
                    @error('title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Description / Details <span class="text-danger">*</span></label>
                    <textarea name="description" rows="5" class="form-control rounded-3 @error('description') is-invalid @enderror" placeholder="Type notification content here..." required>{{ old('description') }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Category <span class="text-danger">*</span></label>
                        <select name="category" class="form-select rounded-3 @error('category') is-invalid @enderror" required>
                            <option value="General">General</option>
                            <option value="PTM">PTM Meeting</option>
                            <option value="Exam">Exam Announcement</option>
                            <option value="Results">Academic Results</option>
                            <option value="Emergency">Emergency / Urgency</option>
                        </select>
                        @error('category')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Attachment (Optional)</label>
                        <input type="file" name="attachment" class="form-control rounded-3 @error('attachment') is-invalid @enderror">
                        <small class="text-muted">PDF or Images up to 2MB.</small>
                        @error('attachment')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Target Audience Section -->
                <div class="border rounded-3 p-4 bg-light mb-4">
                    <h6 class="fw-bold mb-3"><i class="bi bi-people-fill text-primary"></i> Target Audience Targeting</h6>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Audience Scope <span class="text-danger">*</span></label>
                            <select name="target_type" id="target_type" class="form-select rounded-3" onchange="toggleTargetDropdowns()" required>
                                <option value="school">Entire School</option>
                                <option value="branch">Specific Branch</option>
                                <option value="class">Specific Class</option>
                                <option value="section">Specific Section</option>
                                <option value="student">Individual Student</option>
                            </select>
                        </div>

                        <!-- Dynamic Target ID Fields -->
                        <div class="col-md-6 mb-3 d-none" id="target-branch-wrapper">
                            <label class="form-label fw-bold">Select Branch <span class="text-danger">*</span></label>
                            <select name="target_id_branch" id="target_id_branch" class="form-select rounded-3">
                                @foreach($branches as $b)
                                    <option value="{{ $b->id }}">{{ $b->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 mb-3 d-none" id="target-class-wrapper">
                            <label class="form-label fw-bold">Select Class <span class="text-danger">*</span></label>
                            <select name="target_id_class" id="target_id_class" class="form-select rounded-3">
                                @foreach($classes as $c)
                                    <option value="{{ $c->id }}">{{ $c->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 mb-3 d-none" id="target-section-wrapper">
                            <label class="form-label fw-bold">Select Section <span class="text-danger">*</span></label>
                            <select name="target_id_section" id="target_id_section" class="form-select rounded-3">
                                @foreach($sections as $s)
                                    <option value="{{ $s->id }}">{{ $s->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 mb-3 d-none" id="target-student-wrapper">
                            <label class="form-label fw-bold">Select Student <span class="text-danger">*</span></label>
                            <select name="target_id_student" id="target_id_student" class="form-select rounded-3">
                                @foreach($students as $st)
                                    <option value="{{ $st->id }}">{{ $st->name }} ({{ $st->roll_number }})</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Input field matching target_id in form submit -->
                        <input type="hidden" name="target_id" id="target_id" value="">
                    </div>
                </div>

                <!-- Scheduling Section -->
                <div class="border rounded-3 p-4 bg-light mb-4">
                    <h6 class="fw-bold mb-3"><i class="bi bi-clock-fill text-primary"></i> Schedule Notification (Optional)</h6>
                    <p class="text-muted small">Leave empty to deliver immediately.</p>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Schedule Date</label>
                            <input type="date" name="schedule_date" class="form-control rounded-3">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Schedule Time</label>
                            <input type="time" name="schedule_time" class="form-control rounded-3">
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary rounded-3 w-100 py-2.5" onclick="setTargetIdBeforeSubmit()">
                    <i class="bi bi-send-fill me-1"></i> Send / Schedule Notification
                </button>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function toggleTargetDropdowns() {
        const type = document.getElementById('target_type').value;
        
        // Hide all
        document.getElementById('target-branch-wrapper').classList.add('d-none');
        document.getElementById('target-class-wrapper').classList.add('d-none');
        document.getElementById('target-section-wrapper').classList.add('d-none');
        document.getElementById('target-student-wrapper').classList.add('d-none');

        // Show active
        if (type === 'branch') {
            document.getElementById('target-branch-wrapper').classList.remove('d-none');
        } else if (type === 'class') {
            document.getElementById('target-class-wrapper').classList.remove('d-none');
        } else if (type === 'section') {
            document.getElementById('target-section-wrapper').classList.remove('d-none');
        } else if (type === 'student') {
            document.getElementById('target-student-wrapper').classList.remove('d-none');
        }
    }

    function setTargetIdBeforeSubmit() {
        const type = document.getElementById('target_type').value;
        let value = null;

        if (type === 'branch') {
            value = document.getElementById('target_id_branch').value;
        } else if (type === 'class') {
            value = document.getElementById('target_id_class').value;
        } else if (type === 'section') {
            value = document.getElementById('target_id_section').value;
        } else if (type === 'student') {
            value = document.getElementById('target_id_student').value;
        }

        document.getElementById('target_id').value = value;
    }

    // run once on start
    document.addEventListener('DOMContentLoaded', () => {
        toggleTargetDropdowns();
    });
</script>
@endsection