@extends('admin.template.master')

@section('stylesheets')
    {!! Html::style('assets/admin/bower_components/select2/dist/css/select2.min.css') !!}

    <style>
        /*Select2 style*/
        .select2-container--default .select2-selection--single,
        .select2-selection .select2-selection--single {
            border: 1px solid #d2d6de;
            border-radius: 0;
            padding: 6px 12px;
            height: 34px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-right: 10px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0;
            padding-right: 0;
            height: auto;
            margin-top: -4px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 28px;
            right: 3px;
        }

        .filter{
            margin-top:10px;
        }

        h5{
            font-weight: bold;
        }

        .filter-header .col-md-3{
            text-align: center
        }
        /*Select2 style*/
    </style>
@endsection

@section('title')
    <section class="content-header">
        <h1>
            Shipping Charge Filter
            <small>insert and update Shipping Charge Filter</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="{!! url('/admin/shipping-charge') !!}">Shipping Charge Filter</a></li>
            <li class="active">Update</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">

        @if(Session::has('message'))
            <div class="row">
                <div class="col-xs-12">
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        {{Session('message')}}
                    </div>
                </div>
            </div>
        @endif


        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Update</h3>
                    </div>

                    {!! Form::open(['method' => 'post', 'url' => '/admin/shipping-charge-filter-update/']) !!}

                    <div class="box-body">
                        <div id="filter_input">
                            <p align="right"><a href="javascript:void(0);" class="btn btn-primary"
                                                id="ad_more">+ Add More</a>
                            </p>
                            <div class="filter-header">
                                <div class="row">
                                    <div class="col-md-3">
                                        <h5>Item Type</h5>
                                    </div>
                                    <div class="col-md-3">
                                        <h5>Attribute Set</h5>
                                    </div>
                                    <div class="col-md-3">
                                        <h5>Attribute</h5>
                                    </div>
                                    <div class="col-md-3">
                                        <h5>Shipping Charge</h5>
                                    </div>
                                </div>
                            </div>

                            @if(count($shipping_filters) > 0)
                                @foreach ($shipping_filters as $filter)
                                    <div class="filter">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <select class="form-control offer_position item_type" name="item_type_id[]">
                                                    <option value="">Select Item Type</option>
                                                    @foreach ($item_types as $main => $item_type)
                                                    <option value="{{$main}}" {{ $filter->item_type_id == $main ? 'selected' : '' }}>{{$item_type}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-3">
                                                <select class="form-control offer_position attribute_set" name="attribute_set_id[]">
                                                    <option value="{{$filter->attribute_set_id}}">{{$filter->attribute_set_name}}</option>
                                                </select>
                                            </div>

                                            <div class="col-md-3">
                                                <select class="form-control offer_position attribute" name="attribute_id[]">
                                                    <option value="{{$filter->attribute_id}}">{{$filter->attribute_name}}</option>
                                                </select>
                                            </div>

                                            <div class="col-md-3">
                                                <select class="form-control offer_position shipping_charge" name="shipping_charge_id[]">
                                                    <option value="">Select Shipping Charge</option>
                                                    @foreach ($shp_Chrgs as $main1 => $shpChrg)
                                                    <option value="{{$main1}}" {{ $filter->shipping_charge_id == $main1 ? 'selected' : '' }}>{{$shpChrg}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                            <div class="filter">
                                <div class="row">
                                    <div class="col-md-3">
                                        <select class="form-control offer_position item_type" name="item_type_id[]">
                                            <option value="">Select Item Type</option>
                                            @foreach ($item_types as $main => $item_type)
                                            <option value="{{$main}}">{{$item_type}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-3">
                                        <select class="form-control offer_position attribute_set" name="attribute_set_id[]">
                                            <option value="">Select Attribute Set</option>
                                        </select>
                                    </div>

                                    <div class="col-md-3">
                                        <select class="form-control offer_position attribute" name="attribute_id[]">
                                            <option value="">Select Attribute</option>
                                        </select>
                                    </div>

                                    <div class="col-md-3">
                                        <select class="form-control offer_position shipping_charge" name="shipping_charge_id[]">
                                            <option value="">Select Shipping Charge</option>
                                            @foreach ($shp_Chrgs as $main1 => $shpChrg)
                                            <option value="{{$main1}}">{{$shpChrg}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>

                    </div>
                    <div class="box-footer">
                        {!! Form::submit('Update', ['class' => 'btn btn-warning']) !!}
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascripts')
    {!! Html::script('assets/admin/bower_components/select2/dist/js/select2.full.min.js') !!}
    {!! Html::script('assets/admin/bower_components/ckeditor/ckeditor.js') !!}
    <script>
        var itemTypes = @json($item_types);
        var shpChrgs = @json($shp_Chrgs);

        // console.log(itemTypes);


        $(document).ready(function() {
            $('.offer_position').select2();
            var flg = 1;

            $("#ad_more").click(function () {
                flg++;

                // $("#img_input").append('</div><div class="img"><div class="row"><div class="col-md-2"><input class="image" onchange="readURL(this);" name="image[]" type="file"><img src="#" alt="your image" style="display: none;"><input type="hidden" name="pos[]" value="' + flg + '"></div><div class="radio col-md-2"><label><input name="main" value="' + flg + '" type="radio"> Main </label></div><div class="radio col-md-2"><label><input name="medium" value="' + flg + '" type="radio"> Medium </label></div><div class="radio col-md-2"><label><input name="small" value="' + flg + '" type="radio">Small</label></div><div class="radio col-md-2"><label><input name="thumbnail" value="' + flg + '" type="radio"> Thumbnail </label></div><div class="radio col-md-1"><input type="text" name="order[]" value="" class="form-control input-sm"></div><div class="col-md-1"><button type="button" class="btn btn-box-tool image_btn_remove" onclick="remove_me(this)"><i class="fa fa-remove"></i></button></div></div></div>');

                var itemTypeOptions = '<option value="">Select Item Type</option>';
                $.each(itemTypes, function (key, value) {
                    itemTypeOptions += '<option value="' + key + '">' + value + '</option>';
                });

                var shpChrgOptions = '<option value="">Select Shipping Charge</option>';
                $.each(shpChrgs, function (key1, value1) {
                    shpChrgOptions += '<option value="' + key1 + '">' + value1 + '</option>';
                });

                $("#filter_input").append(`</div><div class="filter"><div class="row"><div class="col-md-3"><select class="form-control offer_position item_type" name="item_type_id[]">${itemTypeOptions}</select></div><div class="col-md-3"><select class="form-control offer_position attribute_set" name="attribute_set_id[]"><option value="">Select Attribute Set</option></select></div><div class="col-md-3"><select class="form-control offer_position attribute" name="attribute_id[]"><option value="">Select Attribute</option></select></div><div class="col-md-3"><select class="form-control offer_position shipping_charge" name="shipping_charge_id[]">${shpChrgOptions}</select></div></div></div>`);

                $('.offer_position').select2();
            });



            $(document).on('change', '.item_type', function () {
                var itemTypeId = $(this).val(); // Get the selected item type ID
                var $attributeSetSelect = $(this).closest('.row').find('.attribute_set'); // Find the corresponding attribute set dropdown

                if (itemTypeId) {
                    // Make the AJAX request to get the attribute sets
                    $.ajax({
                        url: '/admin/shipping-item-type-attribute-sets', // Replace with your actual endpoint
                        method: 'GET',
                        data: { item_type_id: itemTypeId },
                        success: function (response) {

                            $attributeSetSelect.empty(); // Clear the current options
                            $attributeSetSelect.append('<option value="">Select Attribute Set</option>'); // Add the default option

                            // Populate the dropdown with the new options
                            $.each(response.attributeSets, function (key, value) {
                                $attributeSetSelect.append('<option value="' + key + '">' + value + '</option>');
                            });

                            console.log($attributeSetSelect);

                            // Reinitialize Select2 for the updated dropdown
                            $attributeSetSelect.select2();
                        },
                        error: function (xhr, status, error) {
                            console.error('AJAX Error:', status, error);
                        }
                    });
                } else {
                    // Clear the attribute set dropdown if no item type is selected
                    $attributeSetSelect.empty().append('<option value="">Select Attribute Set</option>').select2();
                }
            });


            $(document).on('change', '.attribute_set', function () {
                var attributeSetId = $(this).val();
                var $attributeSelect = $(this).closest('.row').find('.attribute');

                if (attributeSetId) {
                    $.ajax({
                        url: '/admin/shipping-item-type-attributes',
                        method: 'GET',
                        data: { attribute_set_id: attributeSetId },
                        success: function (response) {
                            $attributeSelect.empty();
                            $attributeSelect.append('<option value="">Select Attribute</option>');

                            $.each(response.attributes, function (key, value) {
                                $attributeSelect.append('<option value="' + key + '">' + value + '</option>');
                            });

                            $attributeSelect.select2();
                        },
                        error: function (xhr, status, error) {
                            console.error('AJAX Error:', status, error);
                        }
                    });
                } else {
                    $attributeSelect.empty().append('<option value="">Select Attribute</option>').select2();
                }
            });


            // Store the initial selection of item types
            let previousSelectedItemTypes = $('#item_type').val();

            $('#item_type').change(function() {
                let currentSelectedItemTypes = $(this).val();

                // Identify the removed item types
                let removedItemTypes = previousSelectedItemTypes.filter(x => !currentSelectedItemTypes
                    .includes(x));

                // Remove products associated with the removed item types
                $.each(removedItemTypes, function(index, itemTypeId) {
                    // Remove options from Select2 dropdown
                    $('#products option[data-item-type-id="' + itemTypeId + '"]').remove();

                    // Remove selected tags in Select2
                    $('#products').find('option').each(function() {
                        if ($(this).data('item-type-id') === itemTypeId) {
                            $(this).remove();
                        }
                    });

                    // Ensure the Select2 widget is updated
                    $('#products').select2('destroy').select2({
                        minimumInputLength: 3,
                        ajax: {
                            url: "{{ route('product-search') }}",
                            dataType: 'json',
                            delay: 250,
                            processResults: function(data) {
                                return {
                                    results: $.map(data, function(item) {
                                        return {
                                            text: item.product_code_inv,
                                            id: item.product_id
                                        }
                                    })
                                };
                            },
                            cache: true
                        }
                    });
                });

                // Identify newly added item types and fetch products
                let addedItemTypes = currentSelectedItemTypes.filter(x => !previousSelectedItemTypes
                    .includes(x));

                if (addedItemTypes.length > 0) {
                    $(this).parent().prepend('<i id="loader" class="fa fa-spin fa-spinner"></i>');

                    $.each(addedItemTypes, function(index, itemTypeId) {
                        $.ajax({
                            type: 'GET',
                            url: "{{ url('admin/shipping/productOnItemType') }}",
                            data: {
                                item_type_id: itemTypeId
                            },
                            success: function(data) {
                                if (data !== undefined) {
                                    $.each(data, function(product_id, product) {
                                        // Add new options to Select2 dropdown
                                        let newOption = new Option(product,
                                            product_id, true, true);
                                        $(newOption).data('item-type-id',
                                            itemTypeId);
                                        $('#products').append(newOption)
                                            .trigger('change');
                                    });
                                }
                                $('#loader').remove();
                            }
                        });
                    });
                }

                // Update the previous selected item types
                previousSelectedItemTypes = currentSelectedItemTypes;

                // Trigger a change event to refresh Select2 UI
                $('#products').trigger('change');
            });







        });
    </script>
@endsection