@extends('layouts.app')
@section('content')
    @include('sales.modal')
    <!-- END PAGE HEADER-->
    <!-- BEGIN TAB PORTLET-->
	<div id="app" v-cloak>
        {{Form::open(['route' => 'salesOrder.graphicalshow','method' => 'DELETE','class' => 'inline'])}}
        <button id="show-modal" style="display: none" type="button" @click="editExample">Show Modal</button>
        <!-- use the modal component, pass in the prop -->
        <modal v-if="showModal" @close="showModal = false" >
            <div slot="body">
                <div class="row">
                    <div class="form-group">
                        <div  class="col-md-6">
                            <label class="control-label ">@lang('layout.SelectMember') </label>
                            <v-select class="vue-select2" v-model="selectedMember" label="name" @search="MemberSearch" :options="member">
                            </v-select>
                            <input type="hidden" name="member_id" v-model.number="(!selectedMember)?null:selectedMember.id">
                        </div>
                        <div  class="col-md-6">
                            <label class="control-label ">@lang('layout.Number') </label>
                            <input type="text" name="number" class="form-control"  autocomplete="off">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label"> @lang('layout.Date')</label>
                                <div class="input-group">
                                    <input class="form-control date" id="range-from-example" name="from_date" autocomplete="off">
                                    <span class="input-group-addon"> @lang('layout.To') </span>
                                    <input class="form-control date" id="range-to-example" name="to_date" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="form-group">
                                <h3> <label class="control-label"> @lang('layout.All') <input name="all" type="checkbox" value="true"> </label> </h3>
                             </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <button type="submit" class="btn btn-success" @click="ok">
                    @lang('layout.Submit')
                </button>
                <button type="button" class="btn btn-danger" @click="close">
                    @lang('layout.Cancel')
                </button>
            </div>
        </modal>
        {{Form::close()}}
    </div>
    <div id="app1" v-cloak>
        {{Form::open(['route' => 'export.PDFAny','method' => 'DELETE','class' => 'inline'])}}
            <input type="hidden" name="type" value="graphicalshowSale"/>
            <button id="show-modal1" style="display: none" type="button" @click="editExample">Show Modal</button>
            <!-- use the modal component, pass in the prop -->
            <modal v-if="showModal" @close="showModal = false" >
                <div slot="body">
                    <div class="row">
                        <div class="form-group">
                            <div  class="col-md-6">
                                <label class="control-label ">@lang('layout.SelectMember') </label>
                                <v-select class="vue-select2" v-model="selectedMember" label="name" @search="MemberSearch" :options="member">
                                </v-select>
                                <input type="hidden" name="member_id" v-model.number="(!selectedMember)?null:selectedMember.id">
                            </div>
                            <div  class="col-md-6">
                                <label class="control-label ">@lang('layout.Number') </label>
                                <input type="text" name="code" class="form-control"  autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label"> @lang('layout.Date')</label>
                                    <div class="input-group">
                                        <input class="form-control date" id="range-from-example" name="from_date" autocomplete="off">                 
                                        <span class="input-group-addon"> @lang('layout.To') </span>
                                        <input class="form-control date" id="range-to-example" name="to_date" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div slot="footer">
                    <button type="submit" class="btn btn-success" @click="ok">
                        @lang('layout.Submit')
                    </button>
                    <button type="button" class="btn btn-danger" @click="close">
                        @lang('layout.Cancel')
                    </button>
                </div>
            </modal>
        {{Form::close()}}
    </div>	
    <div class="row">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption font-dark">
                    <i class="icon-settings font-dark"></i>&nbsp;
                    <span class="caption-subject bold uppercase">@lang('layout.SalesOrderList')</span>
                </div>
                <div class="tools">
                </div>
                <div class="pull-right">
				<button type="button" class="btn btn-success" id="print_pdf_all"> <i class="fa fa-search"></i> @lang('layout.Search') </button>
                <button type="button" class="btn green hidden-print" id="print_pdf_all1"> <i class="fa fa-print"></i> @lang('layout.Print') </button>
                </div>
            </div>
            <div class="row">
                <br />
<b>Warning</b>:  Undefined variable $saleOrderAll in <b>E:\Ampps\www\CAS\resources\views\salesOrders\graficalshow.blade.php</b> on line <b>124</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>E:\Ampps\www\CAS\resources\views\salesOrders\graficalshow.blade.php</b> on line <b>124</b><br />
            </div>
            @if (isset($pageData))
            <div class="col-md-12 col-sm-12">
                <div class="row" style="border-radius: 5px;  padding-left: 20px; padding-right: 20px; margin-top: 20px;">
                    <div class="dataTables_paginate paging_full_numbers" id="saleOrder_paginate">
                        <ul class="pagination">
                            @if ($pageData->hasPages())
                            @if (!$pageData->onFirstPage())
                            <li class="paginate_button first" aria-controls="saleOrder" tabindex="0" id="saleOrder_first">
                                <a href="{{ $pageData->url($pageData->onFirstPage()) }}">
                                    <i class="fa fa-angle-double-right"></i>
                                </a>
                            </li>
                            @endif
                            @if ($pageData->onFirstPage())
                            @else
                            <li class="paginate_button previous" aria-controls="saleOrder" tabindex="0" id="saleOrder_previous">
                                <a href="{{ $pageData->previousPageUrl() }}">
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                            @endif
                            @for ($i= 1; $i <= $pageData->lastPage(); $i++)
                            @if ($i == $pageData->currentPage())
                            <li class="paginate_button active" aria-controls="saleOrder" tabindex="0">
                                <a href="{{ $pageData->url($i) }}">{{ $i }}</a>
                            </li>
                            @else
                            <li class="paginate_button" aria-controls="saleOrder" tabindex="0">
                                <a href="{{ $pageData->url($i) }}">{{ $i }}</a>
                            </li>
                            @endif
                            @endfor
                            @if ($pageData->hasMorePages())
                            <li class="paginate_button next" aria-controls="saleOrder" tabindex="0" id="saleOrder_next">
                            <a href="{{ $pageData->nextPageUrl() }}">
                                <i class="fa fa-angle-left"></i>
                            </a>
                            </li>
                            @endif
                            @if ($pageData->lastPage())
                            <li class="paginate_button last" aria-controls="saleOrder" tabindex="0" id="saleOrder_last">
                                <a href="{{ $pageData->url($pageData->lastPage()) }}">
                                    <i class="fa fa-angle-double-left"></i>
                                </a>
                            </li>
                            @endif
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
            @endif
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
</div>
    <!-- END CONTENT BODY -->
@stop
@push('scripts')
<script>

	    Vue.component('v-select', VueSelect.VueSelect);
    var Modal=Vue.component('modal', {
        template: '#modal-template',
        methods: {
            ok: function() {
                this.$emit('ok')
            }
        }
    });
    // start app
    var v_app = new Vue({
        el: '#app',
        data: {
            showModal: false,
            selectedMember:null,
            member:[],
        },
        methods:{
            ok:function(){
                // alert('you clicked me');
                this.showModal = !this.showModal;
            },
            close:function(e)
            {
                this.showModal = !this.showModal;
            },
            editExample : function(){

                //Your other code that launches the modal
                this.showModal= true;
                this.$nextTick(function(){
                    $(document).ready(function(){
                    $(".date").persianDatepicker(modelDate());
                    });
                })
            },
            MemberSearch: _.debounce((search, loading) => {
                loading(true);
                axios.get("{{route('callMethod.search')}}", {
                    params: {
                        method_name: 'SearchMember', 
                        keyword: search,
                        type: 'Customer'
                    }
                })
                .then(function(response) {
                    if (response.data.length > 0) {
                        // console.log(response.data);
                        v_app.member = [];
                        v_app.member = response.data;
                    }
                    loading(false);
                })
                .catch(function(error) {
                    loading(false);
                    console.log(error);
                })
            }, getDebounceTime()),
        },
    });

    var v_app1 = new Vue({
        el: '#app1',
        data: {
            showModal: false,
            selectedMember:null,
            member:[],
        },
        methods:{
            ok:function(){
                // alert('you clicked me');
                this.showModal = !this.showModal;
            },
            close:function(e)
            {
                this.showModal = !this.showModal;
            },
            editExample : function(){

                //Your other code that launches the modal
                this.showModal= true;
                this.$nextTick(function(){
                    $(document).ready(function(){
                    $(".date").persianDatepicker(modelDate());
                    });
                })
            },
            MemberSearch: _.debounce((search, loading) => {
                loading(true);
                
                axios.get("{{route('callMethod.search')}}", {
                    params: {
                        method_name: 'SearchMember', 
                        keyword: search,
                        type: 'Customer'
                    }
                })
                .then(function(response) {
                    if (response.data.length > 0) {
                        // console.log(response.data);
                        v_app1.member = [];
                        v_app1.member = response.data;
                    }
                    loading(false);
                })
                .catch(function(error) {
                    loading(false);
                    console.log(error);
                })
            }, getDebounceTime()),
        },
    });


    $('#print_pdf_all').on('click',function(e){
        $('#show-modal').click();
        e.preventDefault();
    });
        $('#print_pdf_all1').on('click',function(e){
        $('#show-modal1').click();
        e.preventDefault();
    });
	
	 
	</script>

@endpush