@extends('layouts.app')
@section('content')
    @include('purchases.modal')
    <!-- END PAGE HEADER-->


    <!-- BEGIN TAB PORTLET-->
		    <!-- BEGIN TAB PORTLET-->
    <div id="app" v-cloak>
        {{Form::open(['route' => 'purchaseOrderRoll.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" @search="MemberSearch" label="name" :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.Code') </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 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="graphicalshow"/>
        <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" @search="MemberSearch" label="name" :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.Code') </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 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 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>
                    <span class="caption-subject bold uppercase">@lang('layout.ContractList')</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>
    
                 <!-- a type="button" class="btn green hidden-print" name="btnprint" onclick="window.print()"/><i class="fa fa-print"></i>  @lang('layout.Print')</a -->
                </div>
            </div>
            <div class="row">
                                </div>

            @if (isset($saleOrderpage))
            <div class="col-md-12 col-sm-12">
                <div class="row" style="    background-color: #a8b5cc; padding-left: 20px; padding-right: 20px;">
                <div class="dataTables_paginate paging_full_numbers" id="saleOrder_paginate">
                    <ul class="pagination">
                        @if ($saleOrderpage->hasPages())

                        @if (!$saleOrderpage->onFirstPage())
                        <li class="paginate_button first" aria-controls="saleOrder" tabindex="0" id="saleOrder_first">
                            <a href="{{ $saleOrderpage->url($saleOrderpage->onFirstPage()) }}">
                                <i class="fa fa-angle-double-right"></i>
                            </a>
                        </li>
                        @endif

                        @if ($saleOrderpage->onFirstPage())
                        
                        @else
                        <li class="paginate_button previous" aria-controls="saleOrder" tabindex="0" id="saleOrder_previous">
                            <a href="{{ $saleOrderpage->previousPageUrl() }}">
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        @endif

                        @for ($i= 1; $i <= $saleOrderpage->lastPage(); $i++)
                        @if ($i == $saleOrderpage->currentPage())
                        <li class="paginate_button active" aria-controls="saleOrder" tabindex="0">
                            <a href="{{ $saleOrderpage->url($i) }}">{{ $i }}</a>
                        </li>
                        @else
                        <li class="paginate_button" aria-controls="saleOrder" tabindex="0">
                            <a href="{{ $saleOrderpage->url($i) }}">{{ $i }}</a>
                        </li>
                        @endif
                        @endfor

                        @if ($saleOrderpage->hasMorePages())
                        <li class="paginate_button next" aria-controls="saleOrder" tabindex="0" id="saleOrder_next">
                        <a href="{{ $saleOrderpage->nextPageUrl() }}">
                            <i class="fa fa-angle-left"></i>
                        </a>
                        </li>
                        @endif

                        @if ($saleOrderpage->lastPage())
                        <li class="paginate_button last" aria-controls="saleOrder" tabindex="0" id="saleOrder_last">
                            <a href="{{ $saleOrderpage->url($saleOrderpage->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 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: 'Vendor'
                    }
                })
                .then(function(response) {
                    if (response.data.length > 0) {
                        // console.log(response.data);
                        app.member = [];
                        app.member = response.data;
                    }
                    loading(false);
                })
                .catch(function(error) {
                    loading(false);
                    console.log(error);
                })
            }, getDebounceTime()),
        },
    });
	    // start app
    var 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: 'Vendor'
                    }
                })
                .then(function(response) {
                    if (response.data.length > 0) {
                        // console.log(response.data);
                        app1.member = [];
                        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