@extends('layouts.app')

@section('title', 'Schedule Push Notification - Admin Panel')
@section('page_title', 'Schedule Notification')

@section('content')
<div class="row">
    <div class="col-md-12 col-xl-12">
        @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Schedule Push Notification</h5>
                <a href="{{ route('notifications.index') }}" class="btn btn-secondary btn-sm">
                    <i class="feather icon-list"></i> View Queue
                </a>
            </div>
            <div class="card-body">
                <form action="{{ route('notifications.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <div class="form-group row">
                                <label for="rel_type" class="col-md-4 col-form-label font-weight-bold">Send To</label>
                                <div class="col-md-8">
                                    <select class="form-control @error('rel_type') is-invalid @enderror" id="rel_type" name="rel_type">
                                        <option value="all" {{ old('rel_type') == 'all' ? 'selected' : '' }}>To All Users</option>
                                        <option value="version" {{ old('rel_type') == 'version' ? 'selected' : '' }}>To Specific Version Code</option>
                                        <option value="user" {{ old('rel_type') == 'user' ? 'selected' : '' }}>To Specific Users</option>
                                    </select>
                                    @error('rel_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row user-selection" style="display: none;">
                                <label for="users" class="col-md-4 col-form-label font-weight-bold">Select Users</label>
                                <div class="col-md-8">
                                    <select class="form-control @error('users') is-invalid @enderror" id="users" name="users[]" multiple style="height: 180px;">
                                        @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ (is_array(old('users')) && in_array($user->id, old('users'))) ? 'selected' : '' }}>
                                            {{ $user->name }} ({{ $user->email ?? 'No Email' }})
                                        </option>
                                        @endforeach
                                    </select>
                                    <small class="form-text text-muted">Hold Ctrl (Windows) / Command (Mac) to select multiple users.</small>
                                    @error('users')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row version-selection" style="display: none;">
                                <label for="version" class="col-md-4 col-form-label font-weight-bold">App Version Code</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control @error('version') is-invalid @enderror" id="version" name="version" value="{{ old('version') }}" placeholder="e.g. 10">
                                    <small class="form-text text-muted">Target users running this specific version code (e.g. 1, 2, 3).</small>
                                    @error('version')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="title" class="col-md-4 col-form-label font-weight-bold">Notification Title</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title') }}" placeholder="Enter title" required>
                                    @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="description" class="col-md-4 col-form-label font-weight-bold">Notification Message</label>
                                <div class="col-md-8">
                                    <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="3" placeholder="Enter message body" required>{{ old('description') }}</textarea>
                                    @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-md-4 col-form-label font-weight-bold">Image Source</label>
                                <div class="col-md-8 d-flex align-items-center mt-2">
                                    <div class="custom-control custom-radio mr-4">
                                        <input class="custom-control-input" type="radio" name="image_source" id="source_upload" value="upload" {{ old('image_source', 'upload') == 'upload' ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="source_upload" style="cursor: pointer;">
                                            Upload Local Image
                                        </label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input" type="radio" name="image_source" id="source_url" value="url" {{ old('image_source') == 'url' ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="source_url" style="cursor: pointer;">
                                            Use Remote Image URL
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row image-upload-section">
                                <label for="image" class="col-md-4 col-form-label font-weight-bold">Upload Image</label>
                                <div class="col-md-8">
                                    <input type="file" class="form-control-file @error('image') is-invalid @enderror" id="image" name="image" accept="image/*">
                                    @error('image')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row image-url-section" style="display: none;">
                                <label for="image_url_manual" class="col-md-4 col-form-label font-weight-bold">Image URL</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control @error('image_url_manual') is-invalid @enderror" id="image_url_manual" name="image_url_manual" value="{{ old('image_url_manual') }}" placeholder="https://example.com/image.png">
                                    @error('image_url_manual')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="schedule_time" class="col-md-4 col-form-label font-weight-bold">Schedule Date & Time</label>
                                <div class="col-md-8">
                                    <input type="datetime-local" class="form-control @error('schedule_time') is-invalid @enderror" id="schedule_time" name="schedule_time" value="{{ old('schedule_time', date('Y-m-d\TH:i')) }}" required>
                                    @error('schedule_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row mb-0 mt-4">
                                <div class="col-md-8 offset-md-4">
                                    <button type="submit" class="btn btn-primary btn-block">
                                        <i class="feather icon-navigation"></i> Schedule Notification
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Handle image source radio button change
        $(document).on('change', 'input[name="image_source"]', function() {
            $('.image-upload-section, .image-url-section').hide();
            if ($(this).val() === 'upload') {
                $('.image-upload-section').show();
            } else {
                $('.image-url-section').show();
            }
        });

        // Trigger initial image source
        $('input[name="image_source"]:checked').trigger('change');

        // Handle rel_type change
        $('#rel_type').change(function() {
            $('.user-selection, .version-selection').hide();
            $('#users, #version').prop('required', false);

            if ($(this).val() === 'user') {
                $('.user-selection').show();
                $('#users').prop('required', true);
            } else if ($(this).val() === 'version') {
                $('.version-selection').show();
                $('#version').prop('required', true);
            }
        });
        $('#rel_type').trigger('change');
    });
</script>
@endsection