@extends('admin.template.layout')

@section('content')
    <div class="card mb-5">
        <div class="card-body">
            
            <form method="POST" id="admin-form" action="{{ url('admin/home_management') }}" enctype="multipart/form-data" data-parsley-validate="true">
                @csrf
                <input type="hidden" name="id" value="{{ $record->id }}">

                <div class="row">
                    <div class="col-md-6 mb-2">
                        <label>Element Name <b class="text-danger">*</b></label>
                        <input type="text" name="name" class="form-control" required
                            data-parsley-required-message="Enter Element Name"
                            value="{{ old('name', $record->name) }}">
                    </div>

                    <div class="col-md-6 mb-2">
                        <label>Element Name (Arabic)</label>
                        <input type="text" name="name_ar" class="form-control" dir="rtl" style="text-align:right"
                            value="{{ old('name_ar', $record->name_ar ?? '') }}">
                    </div>

                    <div class="col-md-6 mb-2">
                        <label>Type <b class="text-danger">*</b></label>
                        <select name="type" id="type" class="form-control" required>
                            <option value="">Select Type</option>
                            <!--<option value="category" {{ old('type', $record->type) == 'category' ? 'selected' : '' }}>Category</option>-->
                            <option value="product" {{ old('type', $record->type) == 'product' ? 'selected' : '' }}>Product</option>
                            <option value="banner" {{ old('type', $record->type) == 'banner' ? 'selected' : '' }}>Banner</option>
                            <option value="category_section" {{ old('type', $record->type) == 'category_section' ? 'selected' : '' }}>Category Section</option>
                            <option value="slider" {{ old('type', $record->type) == 'slider' ? 'selected' : '' }}>Slider</option>
                            <option value="recently_view" {{ old('type', $record->type) == 'recently_view' ? 'selected' : '' }}>Recently View</option>

                        </select>
                    </div>

                    <div class="col-md-6 mb-2" id="category-div" style="display: none;">
                        <label>Category <b class="text-danger">*</b></label>
                        <select name="category_id" id="category_id" class="form-control">
                            <option value="">Select Category</option>
                        </select>
                    </div>

                    <div class="col-md-6 mb-2" id="products-div" style="display: none;">
                        <label>Products <b class="text-danger">*</b></label>
                        <select name="product_ids[]" id="product_ids" class="form-control" multiple></select>
                    </div>

                    <div class="col-md-6 mb-2" id="banners-div" style="display: none;">
                        <label>Banners <b class="text-danger">*</b></label>
                        <select name="banner_ids[]" id="banner_ids" class="form-control" multiple></select>
                    </div>

                    <div class="col-md-6 mb-2" id="category-section-div" style="display: none;">
                        <label>Categories <b class="text-danger">*</b></label>
                        <select name="category_section_ids[]" id="category_section_ids" class="form-control" multiple></select>
                    </div>

                    <div class="col-md-6 mb-2" id="slider-div" style="display: none;">
                        <label>Sliders <b class="text-danger">*</b></label>
                        <select name="slider_ids[]" id="slider_ids" class="form-control" multiple></select>
                    </div>


                    <div class="col-md-6 mb-2">
                        <label>Status</label>
                        <select name="active" class="form-control">
                            <option value="1" {{ old('active', $record->active) == 1 ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ old('active', $record->active) == 0 ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>

                    <div class="col-md-6 mt-3">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>


            <div class="col-xs-12 col-sm-6">

            </div>
        </div>
    </div>
@stop

@section('script')


<script>
$(document).ready(function () {
    const selectedType = '{{ old('type', $record->type) }}';
    const selectedCategory = '{{ old('category_id', $record->category_id) }}';
    const selectedProducts = @json(old('product_ids', $record->product_ids ?? []));
    const selectedBanners = @json(old('banner_ids', $record->banner_ids ?? []));
    const selectedCategorySection = @json(old('category_section_ids', $record->category_section_ids ?? []));
    const selectedSliders = @json(old('slider_ids', $record->slider_ids ?? []));


    function populateSelect(selector, items, selectedValues = []) {
        let options = '<option value="">Select Item</option>';
        items.forEach(item => {
            const selected = selectedValues.includes(item.id) ? 'selected' : '';
            options += `<option value="${item.id}" ${selected}>${item.name}</option>`;
        });
        $(selector).html(options).val(selectedValues).trigger('change');
    }

    $('#type').change(function () {
        const type = $(this).val();
        $('#category-div, #products-div, #banners-div').hide();
        $('#category_id, #product_ids, #banner_ids').html('').trigger('change');

        if (type === 'category') {
            $('#category-div').show();
            $.get('{{ url("admin/home_management/getItemsByType") }}', { type: 'category' }, function (data) {
                populateSelect('#category_id', data, [selectedCategory]);
            });
        }

        if (type === 'product') {
            $('#products-div').show();
            $.get('{{ url("admin/home_management/getItemsByType") }}', { type: 'product' }, function (data) {
                populateSelect('#product_ids', data, selectedProducts);
                $('#product_ids').select2(); // ✅ Apply here after populate
            });
        }

        if (type === 'banner') {
            $('#banners-div').show();
            $.get('{{ url("admin/home_management/getItemsByType") }}', { type: 'banner' }, function (data) {
                populateSelect('#banner_ids', data, selectedBanners);
                $('#banner_ids').select2(); // ✅ Apply here too
                $('#banner_ids').removeAttr('multiple');
            });
        }
        if (type === 'category_section') {
            $('#category-section-div').show();
            $.get('{{ url("admin/home_management/getItemsByType") }}', { type: 'category' }, function (data) {
                populateSelect('#category_section_ids', data, selectedCategorySection);
                $('#category_section_ids').select2();
            });
        }

        if (type === 'slider') {
            $('#slider-div').show();
            $.get('{{ url("admin/home_management/getItemsByType") }}', { type: 'slider' }, function (data) {
                populateSelect('#slider_ids', data, selectedSliders);
                $('#slider_ids').select2();
            });
        }
    }).trigger('change');

    $('#category_id').change(function () {
        const categoryId = $(this).val();
        if (categoryId) {
            $('#products-div').show();
            $.get('{{ url("admin/home_management/getProductsByCategory") }}', { category_id: categoryId }, function (data) {
                populateSelect('#product_ids', data, selectedProducts);
                $('#product_ids').select2(); // ✅ Apply here after populating from category
            });
        } else {
            $('#products-div').hide();
        }
    });

    // ✅ Ensure correct setup when editing a "category"-based record
    if (selectedType === 'category' && selectedCategory) {
        $('#category_id').val(selectedCategory).trigger('change');
    }
});
</script>
    <script>
        App.initFormView();
        $('body').off('submit', '#admin-form');
        $('body').on('submit', '#admin-form', function(e) {
            e.preventDefault();
            var $form = $(this);
            var formData = new FormData(this);

            App.loading(true);
            $form.find('button[type="submit"]')
                .text('Saving')
                .attr('disabled', true);

            $.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                url: $form.attr('action'),
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                dataType: 'json',
                timeout: 600000,
                success: function(res) {
                    App.loading(false);

                    if (res['status'] == 0) {
                        if (typeof res['errors'] !== 'undefined') {
                            var error_def = $.Deferred();
                            var error_index = 0;
                            jQuery.each(res['errors'], function(e_field, e_message) {
                                if (e_message != '') {
                                    $('[name="' + e_field + '"]').eq(0).addClass('is-invalid');
                                    $('<div class="invalid-feedback">' + e_message + '</div>')
                                        .insertAfter($('[name="' + e_field + '"]').eq(0));
                                    if (error_index == 0) {
                                        error_def.resolve();
                                    }
                                    error_index++;
                                }
                            });
                            error_def.done(function() {
                                var error = $form.find('.is-invalid').eq(0);
                                $('html, body').animate({
                                    scrollTop: (error.offset().top - 100),
                                }, 500);
                            });
                        } else {
                            var m = res['message'];
                            App.alert(m, 'Oops!');
                        }
                    } else {
                        App.alert(res['message']);
                        setTimeout(function() {
                            window.location.href = App.siteUrl('/admin/home_management');
                        }, 1500);
                    }

                    $form.find('button[type="submit"]')
                        .text('Save')
                        .attr('disabled', false);
                },
                error: function(e) {
                    App.loading(false);
                    $form.find('button[type="submit"]')
                        .text('Save')
                        .attr('disabled', false);
                    App.alert(e.responseText, 'Oops!');
                }
            });
        });
    </script>
@stop