@extends('layouts.app')

@section('content')
    @include('sales.modal')
    <!-- END PAGE HEADER-->


    <!-- BEGIN TAB PORTLET-->

    <div id="app" v-cloak>
        {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
        <input type="hidden" name="type" value="deliveryService"/>
        <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-12">
                                <label class="control-label ">@lang('layout.SelectProject') </label>
                                  <v-select class="vue-select2" v-model="selectedproject" label="name" @search="onProjectSearch" :options="projectList">
                                </v-select>
                                <input type="hidden" name="project_id" v-model.number="(!selectedproject)?null:selectedproject.id">
                            </div>
 
                    </div>
					<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-example2" name="from_date">
                                    
                                    <span class="input-group-addon"> @lang('layout.To') </span>
                                    <input class="form-control date" id="range-to-example2" name="to_date">
                                    
                                </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>
    <!-- app -->
    <div id="app2" v-cloak>
        {{Form::open(['route' => 'export.ExcelAll','method' => 'DELETE','class' => 'inline'])}}
        <input type="hidden" name="type" value="deliveryService"/>
        <button id="show-modal2" style="display: none" type="button" @click="editExample2">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-12">
                                <label class="control-label ">@lang('layout.SelectProject') </label>
                                  <v-select class="vue-select2" v-model="selectedproject" label="name" @search="onProjectSearch" :options="projectList">
                                </v-select>
                                <input type="hidden" name="project_id" v-model.number="(!selectedproject)?null:selectedproject.id">
                            </div>
 
                    </div>
					<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-example2" name="from_date">
                                    
                                    <span class="input-group-addon"> @lang('layout.To') </span>
                                    <input class="form-control date" id="range-to-example2" name="to_date">
                                    
                                </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>
                    <span class="caption-subject bold uppercase">@lang('layout.ProjectDeliveryService')</span>
                </div>
                <div class="tools"> </div>
                <div class="pull-right">
                    @permission('projectDelivery-export')

                        <button type="submit" id="excell_all"  class="btn btn-success"> <i class="fa fa-file-excel-o"></i> @lang('layout.Excel') </button>

                        <button type="button" class="btn btn-success" id="print_pdf_all"> <i class="fa fa-file-pdf-o"></i> @lang('layout.PDF') </button>
                        @endpermission
                    @permission('projectDelivery-create')
                        <a href="{{route('delivery_service.create')}}">
                            <button class="btn btn-success">
                                <i class="fa fa-plus"></i> @lang('layout.AddNew')
                            </button></a>
                    @endpermission    
                </div>
            </div>
            <div class="portlet-body">

                <template v-cloak id="company_ll">
                    <company @company="setCompany"></company>
                </template>

                <table class="table table-striped table-bordered " cellspacing="0" id="delivery">
                    <thead>
                        <tr> 
                            <th>@lang('layout.Code')</th>
							<th>@lang('layout.ProjectName')</th>
                            <th>@lang('layout.Account')</th> 
                            <th>@lang('layout.Date')</th>
                            <th>@lang('layout.Description')</th>
                            <th>@lang('layout.Status')</th>
                            <th>@lang('layout.User')</th>
                            <th>@lang('layout.Actions')</th>
                        </tr>
                    </thead>

                </table>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>


    <!-- <div id="factor-obj" >
        @if (Session('message'))
            <object  data="{{url('factor22.pdf')}}" type="application/pdf" width="0" height="0"> </object>

        @endif
    </div> -->



    <!-- END TAB PORTLET-->

    <!-- END CONTENT BODY -->


@stop
@include('groupCompanyFilter.select')
@push('scripts')

<script>

    function factorPrint(id) {


        $.ajax({
            // This PHP file will generate the PDF and save it to your server
            // $pdf->Output('path/to/pdf/file.pdf', 'F');
            url: "{{url('/')}}/salePrint/"+id,
            type: 'get',
            cache: false,

        }).done(function () {

            var s = ' <object  data="' + '{{url('factor22.pdf')}}' + '" type="application/pdf" width="0" height="0"> </object>'

            $('#factor-obj').html(s);


            // $('#someDiv').html('<iframe src="path/to/pdf/file.pdf"></iframe>');
        })
            .fail(function () {
                console.log("error");
            });


    }

    $(document).ready(function() {
        $.fn.dataTable.ext.errMode='{{dataTableWarning()}}';
        $('#delivery').DataTable({
            ajax: '{{route("delivery_service.index")}}',
            pageLength:'{{getPageRows()}}',
            order: [["{{orderByColumn()=='number'?0:3}}", "{{getRowOrder()}}"]],
            responsive:'{{responsiveDataTable()}}',
                pagingType:'{{paginationType()}}',
            scrollCollapse: true,
            serverSide: true, 
            paging:         true,
            columns: [
            { data: 'number', name: 'number' },
            { data: 'pro_name', name: 'pro_name' },
            { data: 'name', name: 'name' },
            { data: 'dates', name: 'dates' },
            { data: 'description', name: 'description' },
            { data: 'status', name: 'status' },
            { data: 'user', name: 'user' },
            { data: 'actions', name: 'actions',orderable:false,searchable:false }
 
            ] 
        });





        $('#btnPrint').click(function() {
            $.ajax({
                // This PHP file will generate the PDF and save it to your server
                // $pdf->Output('path/to/pdf/file.pdf', 'F');
                url: '{{route("sale.show",1)}}',
                type: 'get',
                cache: false,

            }).done(function () {

                var s = ' <object  data="' + '{{url('factor22.pdf')}}' + '" type="application/pdf" width="0" height="0"> </object>'

                $('#factor-obj').html(s);


                // $('#someDiv').html('<iframe src="path/to/pdf/file.pdf"></iframe>');
            })
                .fail(function () {
                    console.log("error");
                });

            // window.print();
            // window.open("data:application/pdf," + escape(data=""));
            $.ajax({
                // This PHP file will generate the PDF and save it to your server
                // $pdf->Output('path/to/pdf/file.pdf', 'F');
                url: '{{route("sale.show",1)}}',
                type: 'get',
                cache: false,

            }).done(function() {

                var s = ' <object  data="'+'{{url('factor22.pdf')}}'+'" type="application/pdf" width="0" height="0"> </object>'

                $('#factor-obj').html(s);





                    // $('#someDiv').html('<iframe src="path/to/pdf/file.pdf"></iframe>');
                })
                .fail(function() {
                    console.log("error");
                });

        });


    } );


    new Vue({
        el: '#company_ll',
        methods: {
            setCompany: function (event) {
                window.location.reload();
            }
        }
    });

    var Modal=Vue.component('modal', {
        template: '#modal-template',
        methods: {
            ok: function() {
                this.$emit('ok')
            }
        }
    });
    // start app
    new Vue({
        el: '#app',
        data: {
            showModal: false,
            selectedMember:null,
            member:null,
			selectedproject:null,
			projectList:[],
        },
        methods:{
			
			onProjectSearch(search,loading)
                   {  
                       loading(true);
                       this.searchProject(search,loading,this);
                   },

       //ajax call to get items
       searchProject(search,loading,vm)
       {
           axios.get("{{route('callMethod.search')}}",{
            params:{
              method_name:'anyTable',
              'search_column':'name',
              'table_name':'projects',
              'user_type': 'yes',
              keyword:search,
            }
           })
           .then(function (response)
           {
             this.projectList=[];
             if(response.data.length>0)
             {
                vm.projectList=response.data;
                console.log('data',vm.projectList);
             }
             loading(false);
           })
           .catch(function (error)
           {
              console.log(error);
           })
       },
			
			
			
			
            ok:function(){
                //alert('you clicked me');
                this.showModal = !this.showModal;
            },
            close:function(e)
            {
                this.showModal = !this.showModal;
            },
            editExample : function(){

                this.member={!!$member!!}
                    //Your other code that launches the modal
                    this.showModal= true;
                this.$nextTick(function(){
                    $(document).ready(function(){
                        $(".date").persianDatepicker(modelDate());
                    });
                })
            }
        },
    });
    $('#print_pdf_all').on('click',function(e){
        $('#show-modal').click();
        e.preventDefault();
    })
    Vue.component('v-select', VueSelect.VueSelect)

    new Vue({
        el: '#app2',
        data: {
            showModal: false,
            selectedMember:null,
            member:null,
			selectedproject:null,
			projectList:[],
        },
        methods:{
			
			
			onProjectSearch(search,loading)
                   {  
                       loading(true);
                       this.searchProject(search,loading,this);
                   },

       //ajax call to get items
       searchProject(search,loading,vm)
       {
           axios.get("{{route('callMethod.search')}}",{
            params:{
              method_name:'anyTable',
              'search_column':'name',
              'table_name':'projects',
              'user_type': 'yes',
              keyword:search,
            }
           })
           .then(function (response)
           {
             this.projectList=[];
             if(response.data.length>0)
             {
                vm.projectList=response.data;
                console.log('data',vm.projectList);
             }
             loading(false);
           })
           .catch(function (error)
           {
              console.log(error);
           })
       },
			
			
            ok:function(){
                //alert('you clicked me');
                this.showModal = !this.showModal;
            },
            close:function(e)
            {
                this.showModal = !this.showModal;
            },
            editExample2 : function(){
                this.member={!!$member!!}

                    //Your other code that launches the modal
                    this.showModal= true;
                this.$nextTick(function(){
                    $(document).ready(function(){
                        var to, from;
                        to = $("#range-to-example2").persianDatepicker({
                            altField: '#range-to-example-alt2',
                            altFormat: 'u',
                            initialValue: false,
                            observer: true,
                            format: 'YYYY/MM/DD',
                            autoClose:true,
                           
                        });
                        from = $("#range-from-example2").persianDatepicker({
                            altField: '#range-from-example-alt2',
                            altFormat: 'u',
                            initialValue: false,
                            observer: true,
                            format: 'YYYY/MM/DD',
                            autoClose:true,
                           
                        });
                    });
                })
            }
        },
    });
    $('#excell_all').on('click',function(e){
        $('#show-modal2').click();
        e.preventDefault();
    })
</script>


@endpush