@extends("admin.layouts.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2-bootstrap.min.css"
          rel="stylesheet"
          type="text/css"/>

    <link
        href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css"
        rel="stylesheet"
        type="text/css"/>

@endsection
@section("content")
    <div class="row">
        <div class="col-md-12">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-green">
                        <i class="icon-plus font-green"></i>
                        <span class="caption-subject bold uppercase">New Campaign Coupon</span>
                    </div>
                </div>
                @isset($errors)
                    @foreach($errors as $key => $error)
                        <div dir="rtl" class="alert alert-danger alert-dismissible" role="alert">
                            <strong>{{'خطأ !'}}</strong> {{$error[0]}}
                            <button dir="ltr" type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                        </div>
                    @endforeach
                @endisset
                <div class="portlet-body form">
                    {{Form::open(['route'=>"admin.coupon-campaigns.store",'role'=>"form"])}}
                    <div class="form-body">

                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("name",NULL,['class'=>'form-control m-input'])}}
                            {{Form::label("name","Name")}}
                        </div>
                        {!! Form::label('date',' Date',[],false) !!}
                        <div class="input-group input-large date-picker input-daterange" data-date="" data-date-format="dd/mm/yyyy">
                            {{Form::text("from",NULL,['class'=>"form-control"])}}
                            <span class="input-group-addon"> to </span>
                            {{Form::text("to",NULL,['class'=>"form-control"])}}
                        </div>
                        {!! Form::label('date','Expiration Redeem Date',[],false) !!}
                        <div class="input-group input-large date-picker input-daterange" data-date="" data-date-format="dd/mm/yyyy">
                            {{Form::text("expiration_date",NULL,['class'=>"form-control"])}}
                        </div>
                        <div class="form-group form-md-line-input form-md-floating-label">
                            {!! Form::label('Type','Type',[],false) !!}
                        </div>
                        <div class="form-group">
                            <label>
                                {!! Form::radio("type","flat",1,['class'=>'radio', 'style'=> 'display: inline-block']) !!}
                                Flat
                            </label>
                            <label>
                                {!! Form::radio("type","percentage",0,['class'=>'radio', 'style'=> 'display: inline-block']) !!}
                                Percentage
                            </label>

                        </div>
                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("value",NULL,['class'=>'form-control m-input'])}}
                            {{Form::label("value","Value")}}
                        </div>

                        <div class="form-group">
                            {{Form::label("items","Items")}}
                            {{Form::select("items[]",[],null,["class"=>"select2-multiple",'id'=>"items","multiple"=>"multiple",'style'=>"width:100%"])}}
                        </div>
                        <div class="form-group">
                            <label>
                                {!! Form::checkbox("is_bundle",1,0,['class'=>'checkbox', 'id'=>"bundled",'style'=> 'display: inline-block']) !!}
                                Bundle
                            </label>
                        </div>
                        <div class="form-group" style="display: none" id="with-items">
                            {{Form::label("bundle_items","Bundled Items")}}
                            {{Form::select("bundle_items[]",[],null,["class"=>"select2-multiple",'id'=>"with_items","multiple"=>"multiple",'style'=>"width:100%"])}}
                        </div>

                    </div>
                    <div class="form-actions noborder">
                        <button type="submit" class="btn blue">@lang("constants.create")</button>
                        <button type="reset" class="btn default">@lang("constants.clear")</button>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section("scripts")
    <script
        src="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"
        type="text/javascript"></script>

    <script src="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/js/select2.full.min.js"
            type="text/javascript"></script>
    <script>
        $.fn.select2.defaults.set("theme", "bootstrap");
        $(".select2, .select2-multiple").select2({
            placeholder: "Select category or more",
            width: null
        });
        $(".date-picker").datepicker({format: 'dd/mm/yyyy', rtl: App.isRTL(), autoclose: !0})

    </script>
    <script>

        function formatRepo(repo) {
            console.log(repo);
            if (repo.loading) return repo.text;
            var markup = '<div class="clearfix">' +
                '<div clas="col-sm-12">' +
                '<div class="col-sm-12"><h4>' + repo.price + " - " + repo.nickname + '</h4></div>' +
                '</div></div>';

            return markup;
        }

        function formatRepo2(repo) {
            console.log(repo);
            if (repo.loading) return repo.text;
            var markup = '<div class="clearfix">' +
                '<div clas="col-sm-12">' +
                '<div class="col-sm-12"><h4>' + repo.price + " - " + repo.nickname + '</h4></div>' +
                '</div></div>';

            return markup;
        }

        function formatRepoSelection(repo) {
            return repo.text || repo.name || repo.title;
        }

        $.fn.select2.defaults.set("theme", "bootstrap");
        $(".select2, .select2-multiple").select2({
            placeholder: "Select category or more",
            width: null
        });
        $("#items").select2({
            closeOnSelect: false,
            multiple: true,
            with: "100%",
            //placeholder: "Search for an Item",
            ajax: {
                url: "{{route('admin.items.search')}}",
                dataType: 'json',
                delay: 250,
                data: function (data) {
                    return {
                        q: data.term, // search term
                        page: data.page
                    };
                },
                processResults: function (data, page) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) {
                return markup;
            }, // let our custom formatter work
            minimumInputLength: 1,
            templateResult: formatRepo,
            templateSelection: formatRepoSelection
        });
        $("#with_items").select2({
            closeOnSelect: false,
            multiple: true,
            with: "100%",
            //placeholder: "Search for an Item",
            ajax: {
                url: "{{route('admin.items.search')}}",
                dataType: 'json',
                delay: 250,
                data: function (data) {
                    return {
                        q: data.term, // search term
                        page: data.page
                    };
                },
                processResults: function (data, page) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) {
                return markup;
            }, // let our custom formatter work
            minimumInputLength: 1,
            templateResult: formatRepo,
            templateSelection: formatRepoSelection
        });


        $("#bundled").click(function () {
            if ($(this).is(":checked")) {
                $("#with-items").show();

            } else {
                $("#with-items").hide();

            }
        });


    </script>

@endsection