@extends('layouts.app')
<link href="{{url('css/custome-table.css')}}" rel="stylesheet" type="text/css">

@section('style')

<style>

  .modal-container{
            width: 50%;
        }

</style>

@stop
@section('content')
@include("layouts.Cmodal")
@include("invoices.modal")
<div class="row"> 
    <div class="portlet light bordered">
          <!-- BEGIN TAB PORTLET-->
          <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-anchor font-green-sharp"></i>
                        <span class="caption-subject font-green-sharp bold uppercase">@lang('layout.CreateSystemAlert')</span>
                    </div>
                    <div class="actions">
                    </div>
                </div>
                <div id="appInvoice"  class="portlet-body">
        
                    <div class="tabbable tabbable-tabdrop">
          
                          {{Form::open(['route' => 'systemAlerts.store','method' => 'POST','class' => 'form-horizontal','id'=>'sales-form'])}}
                           {{ csrf_field() }}
                           
                                <div v-cloak class="portlet-body form" style="margin-bottom:50%;">
									 

									<!-- BEGIN FORM-->
								

										<div class="form-body">
										  <div class="row">
											<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
											  <!-- begin inputs -->
											  <div class="row">
												<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
												  <div class="form-group">
													  
													  <div class="col-md-12">
														<label class="control-label">@lang('layout.Customer')</label>
														  
														   <v-select  label="name" @input="memberChange()" :options="customer" v-model="selected_customer"></v-select>
														   <input type="hidden" name="customer" v-validate="'required'" data-vv-as="@lang('layout.Customer')" :value="!selected_customer?null:selected_customer.id" required>
															<span class="required">@{{ errors.first('customer') }}</span>
													  </div>
												  </div> 
												</div>
												<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
												  <div class="form-group">
													  <div class="col-md-12">
															<label class="control-label">@lang('layout.StartDate')</label>
															<input type="text" class="form-control date" autocomplete="off" name="date" v-validate="'required'" data-vv-as="@lang('layout.Date')">
															<span class="required">@{{ errors.first('date') }}</span>
														</div>
													</div> 
												</div>
											</div>
										  </div>
										  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
											<div class="row">
												<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
												  <div class="form-group">
													  <div class="col-md-12">
														<label class="control-label">@lang('layout.Description')</label>
							
															<textarea  name="description" class="form-control" rows="2"></textarea>
													  </div>
													</div> 
												</div>
											  </div>
										  </div>

										  </div>

															
													   
										 
										</div>
										<div class="col-xs-12 col-sm-10 col-md-11 text-center">
											<button type="button" @click="handleSubmit($event)"  class="btn green">@lang('layout.Submit')</button>
											<a href="{{route('systemAlerts.index')}}"   class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>

										</div>  
								</div>




                             

 {!! Form::close() !!}



                        </div>
                    <p> &nbsp; </p>
                    <p> &nbsp; </p>
                </div>
          </div>
          <!-- END TAB PORTLET-->
    </div>
</div> 

@endsection
@push('scripts')


<script type="text/javascript">
 
@if(App::getLocale())
  Vue.use(VeeValidate, {
      locale: '{{App::getLocale()}}',
  });
  @else
Vue.use(VeeValidate, {
    locale: 'en',
});
@endif



 Vue.component('v-select', VueSelect.VueSelect);

  Vue.component("modal",{
    template:"#modal-template",
    props:['show'],

  });

  //begin new member
  Vue.component("cmodal",{
    template:'#cmodal-template',

    props: ['show'],
    data(){
        return {
            types: [],
            classes:[],
            receivables: [],
            payables: [],
            code: null,
            selectType: null,
            selectPay: null,
            selectedClass: null,
            selectReceive: null,
        }
    },
  });

// end new member
  var customer={!! $member !!};
  var v = new Vue({
    el: '#appInvoice',
    data: {
      
       showModalSaleOrder:false,
       showModal: false,
       invoiceDescription: null,
       saleOrderList:[],
       selected_sale_order:null,
       setDatas: [],
       customer:customer,
       selected_customer:null
       
       
    },
    methods:
    {
       // detect member change and searh
       memberChange()
       {
          if(this.selected_customer)
            {
            // get member contract
            //this.saleOrderSearch(this.selected_customer.id,this);
          }
       },

    handleSubmit(e) {
                this.$validator.validate().then(valid => {
                    if (valid) {
            // alert(e.target);
                        v.submitForm(e.target);
                    }
                });
            },
           // submit the form
       submitForm() 
       {

          if(this.isError==true) {
            alert('there is no item');
            return false;
          }
          swal({
                title:"@lang('layout.AreYouSure?')",
                buttons: ["@lang('layout.Cancel')","@lang('layout.Submit')"],
                text: "",
                icon: "info",
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete)
                {
                    document.getElementById("sales-form").submit()

                }
                else
                {

                }
            });

        },
      
    },
    

  });

</script>



@endpush