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

                        <div class="form-group @if($errors->has('voucher_code')) has-error @endif">
                            {!! Form::label('Code') !!}
                            {!! Form::text('voucher_code', null, ['class' => 'form-control', 'placeholder' => 'Name','id' => 'voucher_code']) !!}
                            @if ($errors->has('voucher_code'))
                                <span class="help-block">{!! $errors->first('voucher_code') !!}</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']) !!}
                            @if ($errors->has('amount'))
                                <span class="help-block">{!! $errors->first('amount') !!}</span>@endif
                        </div>

                        <div class="form-group">
                            {!! Form::label('Amount Type') !!}
                            {!! Form::select('amount_type', [''=>'Select Amount Type', 'Amount' => 'Amount','Percentage' => 'Percentage', ], null, ['class' => 'form-control']) !!}
                        </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','placeholder' => 'Select Brand']) !!}
                            @if ($errors->has('brand'))
                                <span class="help-block">{!! $errors->first('brand') !!}</span>@endif
                        </div>

                        <div class="form-group @if($errors->has('brand')) has-error @endif">
                            {!! Form::label('Category') !!}
                            {!! Form::select('category', $category, null, ['class' => 'form-control','id' => 'category','placeholder' => 'Select Category']) !!}
                            @if ($errors->has('category'))
                                <span class="help-block">{!! $errors->first('category') !!}</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[]',$product, null, ['class' => 'form-control','id' => 'products' ,'multiple' => 'multiple']) !!}
                            @if ($errors->has('products'))
                                <span class="help-block">{!! $errors->first('products') !!}</span>@endif
                        </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('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('Show') !!}
                            {!! Form::select('is_show', ['Yes' => 'Yes','No' => 'No' ], null, ['class' => 'form-control']) !!}
                        </div>

                        <div class="form-group">
                            {!! Form::label('Status') !!}
                            {!! Form::select('is_exist', ['Active' => 'Active', 'Inactive' => '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>
        $(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();
            $('#item_type').select2();
            $('#brand').select2();
            $('#category').select2();
            $('#products').select2({
                placeholder: 'Select Products'
            });

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

                $.ajax({
                   type: 'GET',
                   url: "{{ url('admin/offers/productOnBrandItemtype') }}",
                   data: {
                        item_type_id: $('#item_type').val(),
                        brand_id: $(this).val()
                    },
                    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>';
                                // var opt = $('<option />');
                                // opt.val(product_id);
                                // opt.text(product);
                                // opt.attr('selected', 'selected');
                                // $('#products').append(opt);




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

                // $.ajax({
                //     type: 'GET',
                //     url: '{{url('admin/offers/productOnBrandItemtype')}}',
                //     data: {
                //         item_type_id: $('#item_type').val(),
                //         brand_id: $(this).val()
                //     },
                //     dataType: 'json',
                //     success: function (data) {
                //         if (data) {
                //             console.log('test');
                //             $.each(data, function (product_id, product) {
                //                 var opt = $('<option />');
                //                 opt.val(product_id);
                //                 opt.text(product);
                //                 opt.attr('selected', 'selected');
                //                 $('#products').append(opt);
                //             });
                //             console.log('test2');
                //         }
                //     },
                //     complete: function () {
                //         console.log('test3');
                //         $(this).prop('disabled', false);
                //         $('#loader').remove();
                //     }
                // });
            });

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

                    $.ajax({
                       type: 'GET',
                       url: "{{ url('admin/offers/productOnCategory') }}",
                       data: {
                            category_id: $(this).val()
                        },
                        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>';
                                    // var opt = $('<option />');
                                    // opt.val(product_id);
                                    // opt.text(product);
                                    // opt.attr('selected', 'selected');
                                    // $('#products').append(opt);




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

            });

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

            $(document).on('paste', '.product-wrapper span.select2', 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