@extends('backend.layouts.app')
@section('title', $title)
@section('content')

    <div class="row justify-content-center">
        <div class="col-5">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        Send notification
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.notifications.send-to-all-users') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row g-3">
                            <div class="col-12">
                                <label class="form-label" for="image">
                                    Image <span class="text-info">(Max height 500x500)</span>
                                </label>
                                <input type="file" class="form-control" name="image" id="image" required/>
                                @error("image")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label" for="title">Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="title" id="title" required/>
                                @error("title")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label" for="body">Body <span class="text-danger">*</span></label>
                                <textarea class="form-control" name="body" id="body" required></textarea>
                                @error("body")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label d-block">Target screen</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="target_type" id="target_category" value="category" checked>
                                    <label class="form-check-label" for="target_category">Category</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="target_type" id="target_product" value="product">
                                    <label class="form-check-label" for="target_product">Product</label>
                                </div>
                            </div>

                            <div class="col-12" id="category_select_wrapper">
                                <label class="form-label" for="category_id">Category</label>
                                <br>
                                <select name="category_id" id="category_id" class="form-control form-select">
                                </select>
                            </div>

                            <div class="col-12 d-none" id="product_select_wrapper">
                                <label class="form-label" for="product_slug">Product</label>
                                <br>
                                <select name="product_slug" id="product_slug" class="form-control form-select">
                                </select>
                            </div>

                            <div class="col-12">
                                <label class="form-label d-block">
                                    Target Audience
                                </label>
                                <select class="form-control form-select" name="topic" id="topic">
                                    @foreach(\App\Enums\TopicEnum::getValues() as $value)
                                        <option value="{{ $value }}">
                                            {{ \App\Enums\TopicEnum::getDescription($value) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-12">
                                <button type="submit" class="btn btn-primary" onclick="loadingBtn(this)">Submit</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        initializeSelect2("#product_slug", '/api/public-data/products/get-all', 'products', "Select a product", "name", "slug");
        initializeSelect2("#category_id", '/api/public-data/categories/get-all', 'categories', "Select a category", "name", "id");
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const categoryRadio = document.getElementById('target_category');
            const productRadio = document.getElementById('target_product');
            const categorySelectWrapper = document.getElementById('category_select_wrapper');
            const productSelectWrapper = document.getElementById('product_select_wrapper');

            const categorySelect = $('#category_id');
            const productSelect = $('#product_slug');

            function toggleSelects() {
                if (categoryRadio.checked) {
                    categorySelectWrapper.classList.remove('d-none');
                    productSelectWrapper.classList.add('d-none');

                    // Reset and trigger change for select2
                    productSelect.val(null).trigger('change');
                } else if (productRadio.checked) {
                    productSelectWrapper.classList.remove('d-none');
                    categorySelectWrapper.classList.add('d-none');

                    // Reset and trigger change for select2
                    categorySelect.val(null).trigger('change');
                }
            }

            categoryRadio.addEventListener('change', toggleSelects);
            productRadio.addEventListener('change', toggleSelects);

            // Initialize on load
            toggleSelects();
        });
    </script>
@endsection