@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;
        }

        /*Select2 style*/
    </style>
@endsection

@section('title')
    <section class="content-header">
        <h1>
            Shipping Charge
            <small>insert and update Shipping Charge</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</a></li>
            <li class="active">Entry</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Entry</h3>
                    </div>

                    {!! Form::open(['url' => '/admin/shipping-charge-create']) !!}
                    <div class="box-body">
                        <div class="form-group @if($errors->has('name')) has-error @endif">
                            {!! Form::label('Name') !!}
                            {!! Form::text('name', null, ['class' => 'form-control', 'placeholder' => 'Name','id' => 'name', 'required' => 'required']) !!}
                            @if ($errors->has('name'))
                                <span class="help-block">{!! $errors->first('name') !!}</span>@endif
                        </div>

                        <div class="form-group @if($errors->has('amount')) has-error @endif">
                            {!! Form::label('Amount') !!}
                            {!! Form::text('amount', null, ['class' => 'form-control', 'placeholder' => 'Amount', 'required' => 'required']) !!}
                            @if ($errors->has('amount'))
                                <span class="help-block">{!! $errors->first('amount') !!}</span>@endif
                        </div>

                        <div class="form-group @if($errors->has('shipping_method_id')) has-error @endif">
                            {!! Form::label('Shipping Method') !!}
                            {!! Form::select('shipping_method_id[]', $shipping_method, NULL, ['class' => 'form-control',  'id' => 'is_type', 'multiple' => 'multiple', 'required' => 'required']) !!}
                            @if ($errors->has('shipping_method_id'))
                                <span class="help-block">{!! $errors->first('shipping_method_id') !!}</span>@endif
                        </div>

                        <div class="form-group @if($errors->has('select_type')) has-error @endif">
                            {!! Form::label('Product Select Type') !!}
                            {!! Form::select('select_type', ['1' => 'Single', '2' => 'Bulk'], 0, ['class' => 'form-control', 'placeholder' => 'Select Select Type', 'id' => 'select_type', 'required' => 'required']) !!}
                            @if ($errors->has('select_type'))
                                <span class="help-block">{!! $errors->first('select_type') !!}</span>@endif
                        </div>

                        <div id="single_product_block">
                            <div class="form-group @if($errors->has('item_type')) has-error @endif" >
                                {!! Form::label('Item Type') !!}
                                {!! Form::select('item_type[]', $item_type, null, ['class' => 'form-control','id' => 'item_type', 'multiple' => 'multiple']) !!}
                                @if ($errors->has('item_type'))
                                    <span class="help-block">{!! $errors->first('item_type') !!}</span>@endif
                            </div>

                            <div class="form-group product-wrapper @if($errors->has('products')) has-error @endif">
                                <label for="products"
                                    style="float: left; margin-top: 4px; margin-right: 5px;">Products</label>
                                <a class="btn btn-danger btn-sm" style="margin-bottom: 5px;" id="mybutton"
                                href="javascript:void(0)">Reset</a>

                                {{-- {!! Form::select('products[]',null, ['class' => 'form-control','id' => 'products' ,'multiple' => 'multiple']) !!} --}}
                                <select name="products[]" class="form-control product_name" id="products" multiple>
                                    <option value="">Select Product</option>
                                </select>
                                @if ($errors->has('products'))
                                    <span class="help-block">{!! $errors->first('products') !!}</span>@endif
                            </div>
                        </div>

                        <div id="bulk_product_block">
                            <div class="form-group product-wrapper @if($errors->has('products2')) has-error @endif">
                                <label for="products2"
                                       style="float: left; margin-top: 4px; margin-right: 5px;">Products</label>
                                <a class="btn btn-danger btn-sm" style="margin-bottom: 5px;" id="resetbutton"
                                   href="javascript:void(0)">Reset</a>
                                <a class="btn btn-info btn-sm" style="margin-bottom: 5px;" id="myModalbutton"
                                data-toggle="modal" data-target="#exampleModal">Paste Products</a>
                                {{-- {!! Form::select('products[]',null, ['class' => 'form-control','id' => 'products' ,'multiple' => 'multiple']) !!} --}}

                                <div id="product-display" class="mt-3">
                                    <!-- This div will show the product badges -->
                                </div>
                                <input type="hidden" id="hidden-product-input" name="products2">
                                @if ($errors->has('products2'))
                                    <span class="help-block">{!! $errors->first('products2') !!}</span>@endif
                            </div>

                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Products</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <textarea class="form-control mt-3 d-none" id="edit-product-textarea" rows="5" placeholder="Enter product codes separated by commas"></textarea>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-primary d-none" id="save-button">Save</button>
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group @if($errors->has('note')) has-error @endif">
                            {!! Form::label('Note') !!}
                            {!! Form::textarea('note', null, ['class' => 'form-control', 'rows' => '3','placeholder' => 'Note', 'id' => 'note']) !!}
                            @if ($errors->has('note'))
                                <span class="help-block">{!! $errors->first('note') !!}</span>@endif
                        </div>

                        <div class="form-group">
                            {!! Form::label('Status') !!}
                            {!! Form::select('status', [1 => 'Active', 0 => 'Inactive'], null, ['class' => 'form-control']) !!}
                        </div>
                    </div>
                    <div class="box-footer">
                        {!! Form::submit('Create',['class' => 'btn btn-primary']) !!}
                    </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>
        $('#single_product_block').hide();
        $('#bulk_product_block').hide();

        $('#select_type').change(function(){
            $('#single_product_block').hide();
            $('#products').prop('disabled', true);
            $('#bulk_product_block').hide();
            $('#hidden-product-input').prop('disabled', true);

            if($(this).val() == '1'){
                $('#single_product_block').show();
                $('#products').prop('disabled', false);
            } else if($(this).val() == '2'){
                $('#bulk_product_block').show();
                $('#hidden-product-input').prop('disabled', false);
            }
        });

        $(document).ready(function () {
            const $editButton = $('#edit-button');
            const $saveButton = $('#save-button');
            const $badgeContainer = $('#badge-container');
            const $editTextarea = $('#edit-product-textarea');
            const $productsSelect2 = $('#products');


            // Handle Edit Button Click
            $editButton.click(function () {
                const productCodes = [];
                $badgeContainer.find('.badge').each(function () {
                    productCodes.push($(this).text().trim());
                });

                // Populate the textarea with existing product codes
                $editTextarea.val(productCodes.join(',')).removeClass('d-none');
                $badgeContainer.addClass('d-none');
                $editButton.addClass('d-none');
                $saveButton.removeClass('d-none');
            });

            // Handle Save Button Click
            $saveButton.click(function () {
                const productCodes = $editTextarea.val().split(',').map(code => code.trim());
                const allOptions = $productsSelect2.find('option');
                const selectedIds = [];

                // Add products to Select2 dropdown
                productCodes.forEach(code => {
                    let found = false;

                    allOptions.each(function () {
                        if ($(this).text().toUpperCase() === code.toUpperCase()) {
                            selectedIds.push($(this).val());
                            found = true;
                        }
                    });

                    // If product doesn't exist, add it
                    if (!found) {
                        const newOption = new Option(code, code, true, true);
                        $productsSelect2.append(newOption);
                        selectedIds.push(code);
                    }
                });

                $productsSelect2.val(selectedIds).trigger('change');

                // Update badges in modal
                $badgeContainer.empty();
                productCodes.forEach(code => {
                    $badgeContainer.append('<span class="badge badge-pill badge-primary">' + code + '</span>');
                });

                // Toggle visibility
                $editTextarea.addClass('d-none');
                $badgeContainer.removeClass('d-none');
                $editButton.removeClass('d-none');
                $saveButton.addClass('d-none');
                $('#exampleModal').modal('hide');
            });
        });

        $(function () {
            CKEDITOR.replace('offer_description', {
                allowedContent: true,
                extraAllowedContent: 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}',
                autoGrow_onStartup: true,
                enterMode: CKEDITOR.ENTER_BR,
                height: 200
            });

            CKEDITOR.replace('offer_short_desc', {
                allowedContent: true,
                extraAllowedContent: 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}',
                autoGrow_onStartup: true,
                enterMode: CKEDITOR.ENTER_BR,
                height: 200
            });

            CKEDITOR.dtd.$removeEmpty.span = 0;

        });

        $(document).ready(function () {
            $("#mybutton").click(function () {
                $('#products').val('').trigger("change");
            });

            // Create slug
            function convertToSlug(Text) {
                return Text
                    .toLowerCase()
                    .replace(/ /g, '-')
                    .replace(/[^\w-]+/g, '')
                    ;
            }

            $("#offer_name").blur(function () {
                var productName = $(this).val();
                var slug = convertToSlug(productName);

                 if ( slug.indexOf('-store') > -1 ) {
                    slug = 'store/'+ slug.replace('-store', '')
                    console.log('paise');
                }


                $("#offer_slug").val(slug);
            });
            // Create slug

            $('#offer_position').select2();
            $('#is_store').select2();
            $('#is_type').select2();
            $('#item_type').select2();
            $('#brand').select2();
            $('#category').select2();
            $('#products').select2({
                placeholder: 'Select Products'
            });

            $('#item_div').hide();
            $('#category_div').hide();

            // Listen for changes on the is_type dropdown
            $('#is_type').change(function(){
                // Hide both divs
                $('#item_div').hide();
                $('#category_div').hide();

                // Show the selected div based on the value of is_type
                if($(this).val() == '0'){
                    $('#item_div').show();
                } else if($(this).val() == '1'){
                    $('#category_div').show();
                }
            });

            // $('#item_type').change(function () {
            //     // $('#brand').empty();
            //     $(this).parent().prepend('<i id="loader" class="fa fa-spin fa-spinner"></i>');
            //     $.ajax({
            //         type: 'GET',
            //         url: '{{ url('admin/shipping/productOnItemType')}}',
            //         data: {item_type_id: $(this).val()},
            //         dataType: 'json',
            //         success: function (data) {
            //             console.log('result', data, 'length:', data.length);

            //             if (data !== undefined) {

            //                 var selectedProductHtml = '';
            //                 $.each(data, function(product_id, product) {
            //                     console.log(product_id +','+ product)

            //                     selectedProductHtml += '<option value="'+ product_id +'" selected="selected">'+ product +'</option>';

            //                 });
            //                 $('#products').append(selectedProductHtml);
            //                 $('#loader').remove();
            //             }
            //         },
            //         complete: function () {
            //             $(this).prop('disabled', false);
            //             $('#loader').remove();
            //         }
            //     });
            // });

            $('#item_type').change(function () {
                var selectedBrands = $(this).val();

                $('#products').empty();
                $(this).parent().prepend('<i id="loader" class="fa fa-spin fa-spinner"></i>');

                $.each(selectedBrands, function (index, brand) {
                    $.ajax({
                    type: 'GET',
                    url: "{{ url('admin/shipping/productOnItemType') }}",
                    data: {
                            // item_type_id: $('#item_type').val(),
                            item_type_id: brand
                        },
                        success:function(data) {
                            console.log('result', data, 'length:', data.length);

                            if (data !== undefined) {

                                var selectedProductHtml = '';
                                $.each(data, function(product_id, product) {
                                    console.log(product_id +','+ product)

                                    selectedProductHtml += '<option value="'+ product +'" selected="selected">'+ product +'</option>';

                                });
                                $('#products').append(selectedProductHtml);
                                $('#loader').remove();
                            }
                        }
                    });
                });
            });


            $('#category').change(function () {
                var selectedCategories = $(this).val();

                // Clear existing options
                $('#products').empty();
                $(this).parent().prepend('<i id="loader" class="fa fa-spin fa-spinner"></i>');

                console.log('category,' , selectedCategories);

                // Iterate through each selected category
                $.each(selectedCategories, function (index, category) {
                    // Make an AJAX request to fetch products based on the selected category
                    $.ajax({
                        url: "{{ url('admin/offers/productOnCategory') }}",
                        type: 'GET',
                        data: {category_id: category},
                        success: function (data) {
                            console.log('result', data, 'length:', data.length);

                            if (data !== undefined) {
                                var selectedProductHtml = '';

                                $.each(data, function (index, product) {
                                    console.log(index +','+ product)
                                    // $('#products').append('<option value="' + index + '">' + product + '</option>');
                                    selectedProductHtml += '<option value="'+ product +'" selected="selected">'+ product +'</option>';
                                });
                                $('#products').append(selectedProductHtml);
                                $('#loader').remove();
                            }
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            console.log('Error: ' + errorThrown);
                        }
                    });
                });
            });




            $('#products').change(function () {
                var collapsible = [];
                $.each($('#expanded option:selected'), function () {
                    collapsible.push($(this).val());
                });
            });

            $('#products').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_code_inv
                                }
                            })
                        };
                    },
                    cache: true
                }
            });

            $(document).on('paste', '#products', function (e) {
                const userIds = e.originalEvent.clipboardData.getData('text');
                const userIdsArr = userIds.replace(/ /g,'').split(',')
                const selects = $("#products option");
                let selectedIds = [];

                // Iterate input rs ids
                userIdsArr.map(rs => {
                    // Iterate all option
                    selects.map((a, b) => {
                        let userName = b.innerText;
                        let userId = b.value;
                        let userRs = rs.toUpperCase();
                        userRs = '\\b' + userRs + '\\b';

                        if (userName.match(new RegExp(userRs, 'g'))) {
                            $('#product').val(userId).trigger('change');
                            selectedIds.push(userId)
                        }
                    })
                })

                $('#products').val(selectedIds).trigger('change');
                $('.product-wrapper .select2-search--inline').remove();
            })

        })

    </script>
@endsection