@extends('admin.layouts.master')

@section('title', 'Manage News')

@section('css')
    <style>
        .image-upload-box {
            position: relative;
            width: 100%;
            max-width: 400px;
            cursor: pointer;
        }

        .image-upload-box img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border: 2px dashed #ccc;
            border-radius: 6px;
        }

        .image-upload-box input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
        }

        #cancelBtn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            border: none;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            display: none;
        }
    </style>

    <style>
        .seo-image-upload {
            position: relative;
            max-width: 400px;
            height: 250px;
            border: 2px dashed #ccc;
            border-radius: 6px;

            /* center content */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .seo-image-upload img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .seo-image-upload input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
        }

        #metaCancel {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            border: none;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            display: none;
        }

        .save-fixed-btn {
            position: fixed;
            right: 25px;
            bottom: 25px;
            z-index: 9999;
            padding: 12px 24px;
            font-size: 16px;
            border-radius: 50px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        }

        @media (max-width: 576px) {
            .save-fixed-btn {
                right: 15px;
                bottom: 15px;
                padding: 10px 18px;
                font-size: 14px;
            }
        }


        .save-fixed-btn.show {
            opacity: 1;
            pointer-events: auto;
        }
    </style>


@endsection

@section('content')
    <form action="{{ route('news.store') }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-md-8">
                @include('admin.partial.validation-error')
                <!-- Post Info -->
                <div class="card">
                    <div class="row card-body">
                        <div class="col-md-12">
                            <h4 class="font-20">Add New Post</h4>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Sub Title</label>
                                <input type="text" name="sub_title" class="form-control" value="{{ old('sub_title') }}">
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Title</label>
                                <input type="text" name="title" class="form-control" value="{{ old('title') }}">
                            </div>
                        </div>

                        <input type="hidden" name="news_type_id" value="0">

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Details</label>
                                <textarea name="details" class="form-control" id="summernote">{{ old('details') }}</textarea>
                            </div>
                        </div>

                        <!-- Division / City / Upazila -->

                    </div>
                </div>

                <!-- SEO -->
                <div class="card">
                    <div class="card-body">
                        <h4 class="font-20">SEO Intelligence</h4>

                        <div class="row">
                            <!-- Meta Title -->
                            <div class="col-md-12 mb-3">
                                <label>Meta Title</label>
                                <input type="text" name="meta_title" class="form-control">
                            </div>

                            <!-- Meta Description -->
                            <div class="col-md-12 mb-3">
                                <label>Meta Description</label>
                                <textarea name="meta_description" class="form-control" rows="3"></textarea>
                            </div>

                            <!-- Meta Image -->
                            <div class="col-md-12">
                                <label class="mb-2">Meta Image</label>

                                @include('admin.partial.image', [
                                    'inputId' => 'newsMetaImage',
                                    'previewId' => 'NewsMetaImagePreview',
                                    'cancelId' => 'MetaImageCancel',
                                    'name' => 'meta_image',
                                ])
                            </div>
                        </div>
                    </div>
                </div>


            </div>

            <!-- Sidebar -->
            <div class="col-md-4">



                <!-- Upload Images -->
                <div class="card">
                    <div class="card-body">
                        <h4 class="font-20 mb-3">Upload</h4>
                        @include('admin.partial.image', [
                            'inputId' => 'NewsPicture',
                            'previewId' => 'NewsPicturePreview',
                            'cancelId' => 'NewsPictureCancel',
                            'name' => 'pictures[]',
                        ])
                        <input type="text" name="caption" class="form-control mt-3" placeholder="Image Caption..">
                    </div>
                </div>


                {{-- news position --}}
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h4 class="font-20 mb-0">Lead/Main News</h4>

                            <!-- Collapse Button -->
                            <button class="btn btn-info btn-sm" type="button" data-toggle="collapse"
                                data-target="#leadMainBox" aria-expanded="false" aria-controls="leadMainBox">
                                Add
                            </button>
                        </div>
                        <div class="row collapse " id="leadMainBox">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="lead_position">Lead Position No</label>
                                    <input type="number" name="lead_position" class="form-control"
                                        value="{{ isset($post) ? $post->lead_position : 0 }}">
                                    @error('lead_position')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="main_news_position_no">Main News Position No</label>
                                    <input type="number" name="main_news_position_no" class="form-control"
                                        value="{{ isset($post) ? $post->main_news_position_no : 0 }}">
                                    @error('main_news_position_no')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Categories -->
                <div class="card">
                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4 class="font-20 mb-0">Category</h4>

                            <!-- Collapse Button -->
                            <button class="btn btn-info btn-sm" type="button" data-toggle="collapse"
                                data-target="#addCategoryBox" aria-expanded="false" aria-controls="addCategoryBox">
                                Add New
                            </button>
                        </div>

                        <!-- COLLAPSE BOX -->
                        <div class="collapse mb-3" id="addCategoryBox">
                            <div class="p-3 border rounded bg-light">
                                <!-- New Category Name -->
                                <input type="text" class="form-control mb-3" id="categories-add-input"
                                    placeholder="New Category Name">
                                <!-- Parent Category Select -->
                                <select id="category" name="parent_id" class="form-control mb-3"
                                    data-placeholder="Select parent category">
                                    <option value="" selected disabled>Select Parent Category</option>
                                    @forelse(categories() as $category)
                                        <optgroup label="{{ $category->name . ' | ' . $category->bn_name }}">
                                            <option value="{{ $category->id }}">
                                                {{ $category->name . ' | ' . $category->bn_name }}
                                            </option>

                                            @if ($category->categories->count() > 0)
                                                @foreach ($category->categories as $child)
                                                    @include('admin.news.partials.sub-categories-list', [
                                                        'children_category' => $child,
                                                    ])
                                                @endforeach
                                            @endif
                                        </optgroup>
                                    @empty
                                    @endforelse
                                </select>

                                <!-- Add Button -->
                                <div class="text-right">
                                    <button class="btn btn-success" id="categories-add-btn">Add</button>
                                </div>
                            </div>
                        </div>

                        <!-- Multiple Select for Categories -->
                        <select id="categories" name="category_id[]" multiple class="form-control"
                            data-placeholder="Select Category.....">
                            @forelse(categories() as $category)
                                <optgroup label="{{ $category->name . ' | ' . $category->bn_name }}">
                                    <option value="{{ $category->id }}">
                                        {{ $category->name . ' | ' . $category->bn_name }}
                                    </option>

                                    @if ($category->categories->count() > 0)
                                        @foreach ($category->categories as $child)
                                            @include('admin.news.partials.sub-categories-list', [
                                                'children_category' => $child,
                                            ])
                                        @endforeach
                                    @endif
                                </optgroup>
                            @empty
                            @endforelse
                        </select>

                    </div>
                </div>


                <div class="card">
                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4 class="font-20 mb-0">Tags</h4>

                            <!-- Collapse Button -->
                            <button class="btn btn-info btn-sm" type="button" data-toggle="collapse"
                                data-target="#addTagsBox" aria-expanded="false" aria-controls="addTagsBox">
                                Add New
                            </button>
                        </div>

                        <!-- COLLAPSE BOX -->
                        <div class="collapse mb-3" id="addTagsBox">
                            <div class="input-group mb-2">
                                <input type="text" class="form-control" id="tags-add-input"
                                    placeholder="New Tag Name">
                                <div class="input-group-append">
                                    <button class="btn btn-success" id="tags-add-btn">Add</button>
                                </div>
                            </div>
                        </div>

                        <!-- Multiple Select for Tags -->
                        <select id="tags" name="tag_id[]" multiple class="form-control"
                            data-placeholder="Select Tags.....">

                        </select>

                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h4 class="font-16 mb-0">Location</h4>

                            <!-- Collapse Button -->
                            <button class="btn btn-info btn-sm" type="button" data-toggle="collapse"
                                data-target="#locationCollapse" aria-expanded="false" aria-controls="locationCollapse">
                                Add Location
                            </button>
                        </div>


                        <div id="locationCollapse" class="collapse">
                            <div class="card-body">

                                <div class="form-group">
                                    <label>Division</label>
                                    <select name="division_id" class="form-control" id="divisionId"
                                        onchange="getSelectedData()">
                                        <option value="">Select Division</option>
                                        @foreach (divisions() as $division)
                                            <option value="{{ $division->id }}">{{ $division->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>City</label>
                                    <select name="city_id" class="form-control" id="cityId">
                                        <option value="">Select City</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>Upazila</label>
                                    <select name="upazila_id[]" id="upazilaId" multiple class="form-control"></select>
                                </div>

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


                <!-- Video, Schedule -->
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <label>Video Link</label>
                            <input type="text" name="video_link" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Schedule Date</label>
                            <input type="date" name="date" class="form-control">
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <button type="submit" class="btn btn-success save-fixed-btn">
            <i class="fa fa-save mr-2"></i> Save
        </button>
    </form>
@endsection


@section('script')

    <script>
        $('#summernote').summernote({
            height: 250,
            placeholder: 'Write your content here...',
        });
        $(document).ready(function() {

            // Tags
            initUniversalSelect('#tags', {
                multiple: true,
                storeData: [],
                searchData: [],
                ajaxSearchRoute: "{{ route('tags.search') }}",
                ajaxStoreRoute: "{{ route('tags.store') }}"
            });

            // Categories Multiple Select
            initUniversalSelect('#categories', {
                multiple: true,
                storeData: [],
                searchData: [],
                ajaxSearchRoute: false,
                ajaxStoreRoute: "{{ route('category.store') }}"
            });

            // Single Selects with cancel button
            ['#divisionId', '#upazilaId', '#cityId', '#category'].forEach(selector => {
                initUniversalSelect(selector, {
                    multiple: false,
                    plugins: ['clear_button'] // Cancel / clear button
                });
            });

        });

        $(window).on('scroll', function() {
            $('.save-fixed-btn').toggleClass('show', $(this).scrollTop() > 200);
        });


        window.initUniversalSelect = function(selector, options = {}) {
            const selectEl = document.querySelector(selector);
            if (!selectEl) return;
            if (selectEl.tomselect) return selectEl.tomselect;

            const isMultiple = options.multiple ?? true;
            const storeData = options.storeData ?? [];
            const searchData = options.searchData ?? [];
            const ajaxSearchRoute = options.ajaxSearchRoute ?? null;
            const ajaxStoreRoute = options.ajaxStoreRoute ?? null;

            const tsOptions = {
                valueField: 'id',
                labelField: 'name',
                searchField: 'name',
                maxItems: isMultiple ? null : 1,
                create: false,
                plugins: options.plugins ?? (isMultiple ? ['remove_button'] : ['clear_button']),
                allowEmptyOption: !isMultiple,
                sortField: {
                    field: 'name',
                    direction: 'asc'
                }
            };

            // Default searchData preload
            if (searchData.length) {
                tsOptions.onFocus = function() {
                    if (!this.loadedOnce) {
                        this.clearOptions();
                        searchData.forEach((item, index) => {
                            this.addOption({
                                id: item.id ?? `search_${index}`,
                                name: item.name ?? item
                            });
                        });
                        this.loadedOnce = true;
                    }
                };
            }

            // AJAX Search
            if (ajaxSearchRoute) {
                tsOptions.load = function(query, callback) {
                    fetch(`${ajaxSearchRoute}?search=${encodeURIComponent(query)}`)
                        .then(res => res.json())
                        .then(data => {
                            this.clearOptions();
                            data.forEach(item => this.addOption(item));
                            callback(data);
                            if (!isMultiple && data.length === 1) this.addItem(data[0].id);
                        })
                        .catch(err => callback());
                };
            }

            const ts = new TomSelect(selectEl, tsOptions);

            // Prepopulate storeData
            if (storeData.length) {
                storeData.forEach((item, index) => {
                    if (item && Object.keys(item).length) {
                        ts.addOption({
                            id: item.id ?? `store_${index}`,
                            name: item.name
                        });
                        ts.addItem(item.id ?? `store_${index}`);
                    }
                });
            }

            // AJAX store support (single click + parameters)
            if (ajaxStoreRoute) {
                const addBtn = $(`${selector}-add-btn`);
                const addInput = $(`${selector}-add-input`);

                addBtn.off('click').on('click', function(e) {
                    e.preventDefault();

                    // Collect parameters
                    const name = addInput.val().trim();
                    const parent_id = $('#category').val() || null; // parent_id select
                    if (!name) return alert('Please enter name');

                    // Send AJAX
                    $.ajax({
                        url: ajaxStoreRoute,
                        type: 'POST',
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        data: {
                            name: name,
                            parent_id: parent_id
                        },
                        success: function(data) {
                            if (data.id) {
                                ts.addOption({
                                    id: data.id,
                                    name: data.name
                                });
                                ts.addItem(data.id);
                                addInput.val('');
                                $('#addCategoryBox').collapse('hide');
                            }
                        },
                        error: function(err) {
                            console.error(err);
                            alert('Failed to add category');
                        }
                    });

                });
            }

            return ts;
        };



        //  location
        function getSelectedData() {
            let divisionId = $('#divisionId').val();

            $.ajax({
                url: "{{ route('area') }}",
                type: "GET",
                data: {
                    division_id: divisionId
                },
                success: function(response) {

                    let cityTS = document.querySelector('#cityId').tomselect;
                    let upazilaTS = document.querySelector('#upazilaId').tomselect;

                    // Clear old data
                    cityTS.clearOptions();
                    cityTS.clear();

                    upazilaTS.clearOptions();
                    upazilaTS.clear();

                    // Convert HTML option → TomSelect option
                    $(response.city_option).each(function() {
                        let val = $(this).val();
                        let text = $(this).text();

                        if (val) {
                            cityTS.addOption({
                                id: val,
                                name: text
                            });
                        }
                    });

                    // ⭐ MUST
                    cityTS.refreshOptions(false);
                }
            });
        }


        $('#cityId').on('change', function() {

            let divisionId = $('#divisionId').val();
            let cityId = $(this).val();

            $.ajax({
                url: "{{ route('area') }}",
                type: "GET",
                data: {
                    division_id: divisionId,
                    city_id: cityId
                },
                success: function(response) {

                    let upazilaTS = document.querySelector('#upazilaId').tomselect;

                    upazilaTS.clearOptions();
                    upazilaTS.clear();

                    $(response.upazila_option).each(function() {
                        let val = $(this).val();
                        let text = $(this).text();

                        if (val) {
                            upazilaTS.addOption({
                                id: val,
                                name: text
                            });
                        }
                    });

                    // ⭐ MUST
                    upazilaTS.refreshOptions(false);
                }
            });
        });
    </script>
@endsection