@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>
            Offer
            <small>insert and update offer</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="{!! url('/admin/offers') !!}">Offer</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/offers']) !!}
                    <div class="box-body">
                        <div class="form-group @if($errors->has('offer_name')) has-error @endif">
                            {!! Form::label('Name') !!}
                            {!! Form::text('offer_name', null, ['class' => 'form-control', 'placeholder' => 'Name','id' => 'offer_name']) !!}
                            @if ($errors->has('offer_name'))
                                <span class="help-block">{!! $errors->first('offer_name') !!}</span>@endif
                        </div>

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

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

                        <div class="form-group @if($errors->has('offer_position')) has-error @endif">
                            {!! Form::label('Offer Position') !!}
                            {!! Form::select('offer_position', $offerPosition, null, ['class' => 'form-control', 'placeholder' => 'Select offer position', 'id' => 'offer_position']) !!}
                            @if ($errors->has('offer_position'))
                                <span class="help-block">{!! $errors->first('offer_position') !!}</span>@endif
                        </div>

                        <div class="form-group @if($errors->has('offer_sorting')) has-error @endif">
                            {!! Form::label('Offer Sorting') !!}
                            {{-- {!! Form::select('is_store', ['0' => 'Offer', '1' => 'Store', '2' => 'New Arrival'], 0, ['class' => 'form-control', 'placeholder' => 'Select offer type', 'id' => 'is_store']) !!} --}}
                            {!! Form::select('offer_sorting', ['D' => 'Customized', 'LH' => 'Low to High (Price)', 'HL' => 'High to Low (Price)', 'HLD' => 'High to Low (Discount)'], NULL, ['class' => 'form-control', 'placeholder' => 'Select offer sorting', 'id' => 'offer_sorting', 'required' => 'required']) !!}
                            @if ($errors->has('offer_sorting'))
                                <span class="help-block">{!! $errors->first('offer_sorting') !!}</span>@endif
                        </div>

                        <div class="form-group @if($errors->has('is_store')) has-error @endif">
                            {!! Form::label('Offer Type') !!}
                            {{-- {!! Form::select('is_store', ['0' => 'Offer', '1' => 'Store', '2' => 'New Arrival'], 0, ['class' => 'form-control', 'placeholder' => 'Select offer type', 'id' => 'is_store']) !!} --}}
                            {!! Form::select('is_store', ['0' => 'Offer', '1' => 'Store', '2' => 'Campaign'], 0, ['class' => 'form-control', 'placeholder' => 'Select offer type', 'id' => 'is_store', 'required' => 'required']) !!}
                            @if ($errors->has('is_store'))
                                <span class="help-block">{!! $errors->first('is_store') !!}</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', '3' => 'All Products'], 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('is_type')) has-error @endif">
                                {!! Form::label('Product Type') !!}
                                {!! Form::select('is_type', ['0' => 'Item Type Wise', '1' => 'Category Wise'], NULL, ['class' => 'form-control', 'placeholder' => 'Select Product Type', 'id' => 'is_type']) !!}
                                @if ($errors->has('is_type'))
                                    <span class="help-block">{!! $errors->first('is_type') !!}</span>@endif
                            </div>

                            <div id="item_div">
                                <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','placeholder' => 'Select Item Type']) !!}
                                    @if ($errors->has('item_type'))
                                        <span class="help-block">{!! $errors->first('item_type') !!}</span>@endif
                                </div>

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



                            <div id="category_div">
                                <div class="form-group @if($errors->has('brand')) has-error @endif">
                                    {!! Form::label('Category') !!}
                                    {!! Form::select('category_id[]', $category, null, ['class' => 'form-control item_type_select2', 'multiple' => 'multiple',  'id' => 'category']) !!}
                                    @if ($errors->has('category'))
                                        <span class="help-block">{!! $errors->first('category') !!}</span>@endif
                                </div>
                            </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('offer_short_desc')) has-error @endif">
                            {!! Form::label('Short Description') !!}
                            {!! Form::textarea('offer_short_desc', null, ['class' => 'form-control', 'rows' => '8','placeholder' => 'Short Description', 'id' => 'offer_short_desc']) !!}
                            @if ($errors->has('offer_description'))
                                <span class="help-block">{!! $errors->first('offer_short_desc') !!}</span>@endif
                        </div>

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

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

                        <div class="form-group">
                            {!! Form::label('From') !!}
                            {!! Form::date('from', \Carbon\Carbon::now(), ['class' => 'form-control']) !!}
                        </div>

                        <div class="form-group">
                            {!! Form::label('To') !!}
                            {!! Form::date('to', \Carbon\Carbon::now(), ['class' => 'form-control']) !!}
                        </div>

                        <div class="form-group">
                            {!! Form::label('Hidden') !!}
                            {!! Form::select('offer_is_hidden', [0 => 'No',1 => 'Yes', ], null, ['class' => 'form-control']) !!}
                        </div>

                        <div class="form-group">
                            {!! Form::label('Status') !!}
                            {!! Form::select('offer_is_exist', [1 => 'Active', 0 => 'Inactive'], null, ['class' => 'form-control']) !!}
                        </div>


                        <div class="form-group">
                            {!! Form::label('View Style') !!}
                            {!! Form::select('is_offer_style', ['new' => 'Category', 'old' => 'Product'], 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>
        // $(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');
            //     });
        // });

        $(document).ready(function () {
            const $editButton = $('#edit-button');
            const $saveButton = $('#save-button');
            const $pasteButton = $('#paste-button');
            const $badgeContainer = $('#badge-container');
            const $editTextarea = $('#edit-product-textarea');
            const $hiddenInput = $('#hidden-product-input');
            const $productDisplay = $('#product-display');
            const $resetButton = $('#resetbutton');

            // 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());
                updateHiddenInput(productCodes);
                displayBadges(productCodes);

                // 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');
            });

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

                // Paste products into hidden input
                updateHiddenInput(productCodes);
                displayBadges(productCodes);
            });

            // Function to update the hidden input field with the new product codes
            function updateHiddenInput(productCodes) {
                // Join the product codes with commas and update the hidden input field
                $hiddenInput.val(productCodes.join(','));
            }

            // Function to display badges outside the modal
            function displayBadges(productCodes) {
                $productDisplay.empty(); // Clear previous badges
                productCodes.forEach(code => {
                    $productDisplay.append('<span class="badge badge-pill badge-primary mr-2">' + code + '</span>');
                });
            }

            $resetButton.click(function () {
                // Clear the product display div
                $productDisplay.empty();

                // Optionally, clear the hidden input as well
                $hiddenInput.val('');
                $editTextarea.val('');
            });
        });




        $(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();
                }
            });

            $('#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);
                }
            });

            $('#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/offers/brandOnItemtype')}}',
                    data: {item_type_id: $(this).val()},
                    dataType: 'json',
                    success: function (data) {
                        var opt = $('<option />');
                        opt.val(null);
                        opt.text('Select Brand');
                        $('#brand').append(opt);
                        if (data) {
                            $.each(data, function (brand_id, brand_name) {
                                var opt = $('<option />');
                                opt.val(brand_id);
                                opt.text(brand_name);
                                $('#brand').append(opt);
                            });
                        }
                    },
                    complete: function () {
                        $(this).prop('disabled', false);
                        $('#loader').remove();
                    }
                });
            });

            $('#brand').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/offers/productOnBrandItemtype') }}",
                    data: {
                            item_type_id: $('#item_type').val(),
                            brand_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