@extends('layouts.admin')

@section('title', 'Edit Announcement')
@section('page-title', 'Edit 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">Edit Compose Notification</h5>
            <form action="{{ route('admin.notifications.update', $notification->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <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', $notification->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', $notification->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" {{ old('category', $notification->category) == 'General' ? 'selected' : '' }}>General</option>
                            <option value="PTM" {{ old('category', $notification->category) == 'PTM' ? 'selected' : '' }}>PTM Meeting</option>
                            <option value="Exam" {{ old('category', $notification->category) == 'Exam' ? 'selected' : '' }}>Exam Announcement</option>
                            <option value="Results" {{ old('category', $notification->category) == 'Results' ? 'selected' : '' }}>Academic Results</option>
                            <option value="Emergency" {{ old('category', $notification->category) == 'Emergency' ? 'selected' : '' }}>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. Leave empty to keep current attachment.</small>
                        @if($notification->attachment_path)
                            <div class="mt-1 small text-success">
                                <i class="bi bi-file-earmark-check"></i> Current: {{ basename($notification->attachment_path) }}
                            </div>
                        @endif
                        @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" {{ old('target_type', $notification->target_type) == 'school' ? 'selected' : '' }}>Entire School</option>
                                <option value="branch" {{ old('target_type', $notification->target_type) == 'branch' ? 'selected' : '' }}>Specific Branch</option>
                                <option value="class" {{ old('target_type', $notification->target_type) == 'class' ? 'selected' : '' }}>Specific Class</option>
                                <option value="section" {{ old('target_type', $notification->target_type) == 'section' ? 'selected' : '' }}>Specific Section</option>
                                <option value="student" {{ old('target_type', $notification->target_type) == 'student' ? 'selected' : '' }}>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 }}" {{ $notification->target_type == 'branch' && $notification->target_id == $b->id ? 'selected' : '' }}>{{ $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 }}" {{ $notification->target_type == 'class' && $notification->target_id == $c->id ? 'selected' : '' }}>{{ $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 }}" {{ $notification->target_type == 'section' && $notification->target_id == $s->id ? 'selected' : '' }}>{{ $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 }}" {{ $notification->target_type == 'student' && $notification->target_id == $st->id ? 'selected' : '' }}>{{ $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="{{ $notification->target_id }}">
                    </div>
                </div>

                @php
                    $scheduleDate = $notification->scheduled_at ? date('Y-m-d', strtotime($notification->scheduled_at)) : '';
                    $scheduleTime = $notification->scheduled_at ? date('H:i', strtotime($notification->scheduled_at)) : '';
                @endphp

                <!-- 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" value="{{ old('schedule_date', $scheduleDate) }}">
                        </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" value="{{ old('schedule_time', $scheduleTime) }}">
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary rounded-3 w-100 py-2.5" onclick="setTargetIdBeforeSubmit()">
                    <i class="bi bi-check-lg me-1"></i> Update 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