@extends('backend.layout.app')

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


                <form action="{{ route('admin.notification.store') }}" method="POST">
                    @csrf

                    <!-- Notification Info -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-primary">🔔 Notification Info</h5>
                        </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" class="form-control @error('title') is-invalid @enderror"
                                    name="title" value="{{ old('title') }}" required placeholder="Notification Title">
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

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

                        </div>
                    </div>

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

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

                            <!-- Select User -->
                            <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 @error('user_id') is-invalid @enderror">
                                    <option value="">-- Choose User --</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}"
                                            {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }} ({{ $user->email }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('user_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Select Course -->
                            <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 @error('course_id') is-invalid @enderror">
                                    <option value="">-- Choose Course --</option>
                                    @foreach ($courses as $course)
                                        <option value="{{ $course->id }}"
                                            {{ old('course_id') == $course->id ? 'selected' : '' }}>
                                            {{ $course->title }}
                                        </option>
                                    @endforeach
                                </select>

                                @error('course_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>

                    </div>
                    <!-- After the Target Audience card -->


            </div>

            <!-- Submit -->
            <div class="col-12 mb-3">
                <button type="submit" class="btn btn-primary">Send Notification</button>
                <a href="{{ route('admin.notification.index') }}" class="btn btn-secondary">Cancel</a>
            </div>

            </form>

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

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