@extends('backend.layout.app')

@section('content')
<div class="page-content">
    <div class="row justify-content-center">
        <div class="col-lg-8">

            <form action="{{ route('admin.notification.update', $notification->id) }}" method="POST">
                @csrf
                @method('PUT')

                <!-- Notification Info -->
                <div class="card shadow-sm mb-4 border-0">
                    <div class="card-header bg-light">
                        <h5 class="mb-0 text-primary">✏️ Edit Notification</h5>
                        @if ($errors->any())
    <div class="alert alert-danger mt-2">
        <ul class="mb-0 ">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
                    </div>
                    <div class="card-body row g-3">

                        <!-- Title -->
                        <div class="col-lg-12 mb-3">
                            <label class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" name="title"
                                value="{{ old('title', $notification->title) }}"
                                class="form-control @error('title') is-invalid @enderror" required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>


                        <!-- Message -->
                        <div class="col-12 mb-3">
                            <label class="form-label">Message <span class="text-danger">*</span></label>
                            <textarea name="message" rows="4" id="editor"
                                class="form-control @error('message') is-invalid @enderror" required>{{ old('message', $notification->message) }}</textarea>
                            @error('message')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Target Audience -->
                <div class="card shadow-sm mb-4 border-0">
                    <div class="card-header bg-light">
                        <h5 class="mb-0 text-success">🎯 Target Audience</h5>
                    </div>
                    <div class="card-body row g-3">

                        <!-- Type -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Type <span class="text-danger">*</span></label>
                            <select name="target_type" id="type"
                                class="form-select @error('type') is-invalid @enderror" required>
                                <option value="global" {{ old('type', $notification->type) == 'global' ? 'selected' : '' }}>Global</option>
                                <option value="user" {{ old('type', $notification->type) == 'user' ? 'selected' : '' }}> Specific User</option>
                                <option value="course_enroll" {{ old('type', $notification->type) == 'course_enroll' ? 'selected' : '' }}>Specific Course</option>
                           
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- User Target -->
                        <div class="col-md-6 mb-3 target-box" id="user_box" style="display:none;">
                            <label class="form-label">Select User</label>
                            <select name="user_id" class="form-select select2">
                                <option value="">-- Choose User --</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ old('user_id', $notification->user_id) == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }} ({{ $user->email }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Course Target -->
                        <div class="col-md-6 mb-3 target-box" id="course_box" style="display:none;">
                            <label class="form-label">Select Course</label>
                            <select name="course_id" class="form-select select2">
                                <option value="">-- Choose Course --</option>
                                @foreach($courses as $course)
                                    <option value="{{ $course->id }}" {{ old('course_id', $notification->course_id) == $course->id ? 'selected' : '' }}>
                                        {{ $course->title }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Submit -->
                <div class="d-flex justify-content-between mb-4">
                    <a href="{{ route('admin.notification.index') }}" class="btn btn-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary">Update Notification</button>
                </div>

            </form>

        </div>
    </div>
</div>

@push('js')
<script>
    $(document).ready(function () {
        function toggleTargetBox() {
            let type = $('#type').val();
            $('.target-box').hide();
            if (type === 'user') {
                $('#user_box').show();
            } else if (type === 'course_enroll') {
                $('#course_box').show();
            }
        }
        $('#type').on('change', toggleTargetBox);
        toggleTargetBox(); // run on load
    });
</script>
@endpush
@endsection