@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">Update</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(['method' => 'POST', 'url' => '/admin/voucher-edit/' .$voucher->id]) !!}

                    <div class="box-body">
                        <div class="form-group @if($errors->has('voucher_name')) has-error @endif">
                            {!! Form::label('Name') !!}
                            {!! Form::text('voucher_name', $voucher->voucher_name, ['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', $voucher->voucher_code, ['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', $voucher->amount, ['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', ], isset($voucher->amount_type) ? $voucher->amount_type : null, ['class' => 'form-control']) !!}
                        </div>

                        <div class="form-group @if($errors->has('item_type')) has-error @endif">
                            {!! Form::label('Item Type') !!}
                            <p>
                                {{$voucherProducts[0]->item_type->item_type_name}}
                            </p>
                            {!! Form::select('item_type', $item_type, $voucherProducts[0]->item_type_id, ['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') !!}
                            <p>
                                {{$voucherProducts[0]->brand->brand_name}}
                            </p>
                            {!! Form::select('brand', $brand, $voucherProducts[0]->brand_id, ['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">
                            <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']) !!}
                        </div>

                        <div class="form-group @if($errors->has('note')) has-error @endif">
                            {!! Form::label('Note') !!}
                            {!! Form::textarea('note', $voucher->note, ['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', $voucher->start_date , ['class' => 'form-control']) !!}
                        </div>

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

                        <div class="form-group">
                            {!! Form::label('Show') !!}
                            {!! Form::select('is_show', ['Yes' => 'Yes','No' => 'No' ], isset($voucher->is_show) ? $voucher->is_show : null, ['class' => 'form-control']) !!}
                        </div>

                        <div class="form-group">
                            {!! Form::label('Status') !!}
                            {!! Form::select('is_exist', ['Active' => 'Active', 'Inactive' => 'Inactive'], isset($voucher->is_exist) ? $voucher->is_exist : null, ['class' => 'form-control']) !!}
                        </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>
        // $(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 () {
            $('#offer_position').select2();
            $('#item_type').select2({
                placeholder: 'Select Item types'
            });
            $('#brand').select2({
                placeholder: 'Select Brands'
            });
            $('#products').select2({
                placeholder: 'Select Products'
            });

            $('#category').select2();

            $("#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

            if ($("#offer_slug").val() == '') {
                $("#offer_name").blur();
            }

            $('#item_type').change(function () {
                $(this).parent().prepend('<i id="loader" class="fa fa-spin fa-spinner"></i>');
                $('#brand').empty();
                $.ajax({
                    type: 'GET',
                    url: '{{ url('admin/offers/brandOnItemtype')}}',
                    data: {item_type_id: $(this).val()},
                    dataType: 'json',
                    success: function (data) {
                        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()
                    },
                    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>';
                                // var opt = $('<option />');
                                // opt.val(product_id);
                                // opt.text(product);
                                // opt.attr('selected', 'selected');
                                // $('#products').append(opt);




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



                        // if (data) {
                        //     $.each(data, function (product_id, product) {
                        //         var opt = $('<option />');
                        //         opt.val(product_id);
                        //         opt.text(product);
                        //         opt.attr('selected', 'selected');
                        //         $('#products').append(opt);
                        //     });
                        // }
                    },
                    complete: function () {
                        $(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();
                            }
                        }
                });

            });

            // console.log([27907,27859,27858]);
            var voucherProducts = @json($voucherProducts);
            // console.log(voucherProducts);
            var productIds = [];

            // Extract the 'id' values from voucherProducts
            for (var i = 0; i < voucherProducts.length; i++) {
                productIds.push(voucherProducts[i].product_id);
            }

            console.log(productIds);

            $('#products').select2({
                placeholder: 'Select Products'
            }).val(productIds).trigger('change');

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