@extends('layouts.app')

@section('title', 'Company')
@section('content')
    <div class="container-fluid mt-1">
@include('settings.common_tabs')
            <div class="col-lg-12">
                <div class="card ">
                    <div class="card-body">
                    <div class="p-0">
                        <table id="datatable" class="table table-bordered mb-0" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>Sl No</th>
                                    <th>Company Name</th>
                                    <th>Address</th>
                                    <th>City</th>
                                    <th>State</th>
                                    <th>Contact Number</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
								                                @foreach($companyData as $company)
                                <tr>
                                    <td>{{ $i++}}</td>
                                    <td>{{ $company->company_name}}</td>
                                    <td>{{ $company->address}}</td>
                                    <td>{{ $company->city}}</td>
                                    <td>{{ $company->state}}</td>
                                    <td>{{ $company->contact_no}}</td>
									<td>
										
                                        @if($company->is_active==1) Active @else Inactive @endif
									</td>
									<td> <span   class="edit_user ml-2 "  data-id="{{ $company->id }}" onclick="editCompany({{ $company->id }})"><img class="menuicon tbl_editbtn" src="{{asset('app-assets/assets/images/edit.svg')}}" >&nbsp;</span>
									</td>
									<!--<td>
									<span="javascript:void(0);" onclick="editCompany({{ $company->id }})" style="cursor:pointer"><img class="menuicon" src="{{asset("app-assets/assets/images/edit.svg")}}" height="20" width="20">&nbsp;</span></td>-->
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    <form id="companyForm" name="companyForm" method="post" role="form" enctype="multipart/form-data">
    @csrf  
    <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Add Company</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div class="row">
            <div class="col-lg-4">
                <label for="name-input" class="col-form-label">Company Name<span class="text-danger"> * <span></label>
                <input id="companyname" name="company_name" type="text" class="form-control" autocomplete="off" placeholder="Enter Company Name" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z & . ]*$">
            </div>
            <div class="col-lg-4">
                <label for="name-input" class="col-form-label">City<span class="text-danger">  <span></label>
                <input id="city" name="city" type="text" class="form-control" autocomplete="off" placeholder="Enter City"  data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">
            </div>
            <div class="col-lg-4">
                <label for="name-input" class="col-form-label">Contact Number<span class="text-danger">  <span></label>
                <input data-parsley-type="number" data-parsley-trigger="change" data-parsley-minlength="10" data-parsley-maxlength="15" id="contactno" name="contact_no" type="text" class="form-control" autocomplete="off" placeholder="Enter Contact Number" data-parsley-minlength-message="This value should have minimum 10 characters" data-parsley-maxlength-message="This value should have maximum 15 characters" >
            </div>
		</div>
		<div class="row mt-1">	
            <div class="col-lg-4">
                <label for="name-input" class="col-form-label">Photo<span class="text-danger">  <span></label>
                <input type="file" name="photo" id="photo" class="form-control" data-height="250" data-parsley-trigger="keyup" accept=".jpg,.png,.svg" data-parsley-fileextension='jpg,png,svg,jpeg' data-parsley-errors-container="#startTimeErrorContainer" data-parsley-trigger="change">
            </div>
			<div class="col-lg-4">
                <label for="name-input" class="col-form-label">State<span class="text-danger">  <span></label>
                <input id="state" name="state" type="text" class="form-control" autocomplete="off" placeholder="Enter State"  data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">
			</div>
			<div class="col-lg-4">
				<label for="name-input" class="col-form-label">Zipcode<span class="text-danger">  <span></label>
				<input data-parsley-type="integer" data-parsley-trigger="keyup" id="zipcode" name="zipcode" type="text" class="form-control" autocomplete="off" placeholder="Enter Zipcode" data-parsley-type-message ="This value should be a valid number">
			</div>
		</div>
		<div class="row mt-1">	
			<div class="col-lg-4">
                <label for="name-input" class="col-form-label">Address<span class="text-danger">  <span></label>
                <input id="address" name="address" type="text" class="form-control" autocomplete="off" placeholder="Enter Address" >
			</div>
			<div class="col-lg-4">
                <label for="name-input" class="col-form-label">Email<span class="text-danger">  <span></label>
                <input id="email" name="email" type="email" class="form-control" autocomplete="off" placeholder="Enter Email" >
			</div> 
			<!-- <div class="col-lg-4">
				<label for="example-email-input" class="col-form-label">Is Active ? </label><br>
				<input type="checkbox" checked value="1" id="isactive" name="is_active" />
			</div> -->	
		</div>		
        </div>

      <!-- Modal footer -->
      <div class="modal-footer">
	  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary" name="submit" id="submit" onclick="companyVal();">Submit</button>
        
      </div>
      </form>
    </div>
  </div>
</div>
<div class="modal fade" id="myModalEdit">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
   
    <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Edit Company</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
        <form id="companyUpdateForm" name="companyUpdateForm" method="post" role="form" enctype="multipart/form-data">
          <input type="hidden" name="id" id="id">
            @csrf
      <!-- Modal body -->
      <div class="modal-body">
         
    		<div id="ramalist"></div>   

          <!-- Modal footer -->
      </div>
          <div class="modal-footer">
    	          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" name="submit" id="submit"  onclick="companyUpdate();">Update</button>
      </div>
      </form>
	  </div>
    </div>
  </div>
    <script type="text/javascript">
	$(function () {
				@if(Session::has('success'))
				new PNotify({
				title: 'Success',
				delay: 500,
				text:  "{{Session::get('success')}}",
				type: 'success'
				});
						
				@endif
				@if ($errors->any())
				var err = "";
				@foreach ($errors->all() as $error)
				
					new PNotify({
					title: 'Error',
					text: "{{$error}}",
					delay: 800,
					type: 'error'
					});
					@endforeach
				@endif
			});
       $(document).ready(function()
        {
			var $tabid=  'tab3';
			$(".odtabs").not("#tab3").addClass('btn-outline-secondary');
			$("#tab3").addClass('btn-secondary');

            $('.modal').on('hidden.bs.modal', function() {
                $(this).find('form')[0].reset();
                $(this).find('form').parsley().reset();
            });

			window.ParsleyValidator
			.addValidator('fileextension', function (value, requirement) {
			var tagslistarr = requirement.split(',');
            var fileExtension = value.split('.').pop();
            var arr=[];
            $.each(tagslistarr,function(i,val){
            arr.push(val);
            });
            if(jQuery.inArray(fileExtension, arr)!='-1') {
              return true;
            } else {
              return false;
            }
        }, 32)
        .addMessage('en', 'fileextension', 'The extension doesn\'t match the required');
		$("form").parsley();
            var table = $('#datatable').DataTable({
                responsive: true,
                dom: 'l<"toolbar">Bfrtip',
				buttons: [
					'excel'
				],
                initComplete: function(){
                    $("div.toolbar").html('<button id="addCompany" type="button" class="ml-2 btn btn-primary" data-toggle="modal" data-target="#myModal"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Company</button><br />');           
                } 
            });
        });
        function getCompany(){
            window.location.href = "/company";
        }
        function companyVal(){
            if ($("#companyForm").parsley()) {
                if ($("#companyForm").parsley().validate()) {
                    event.preventDefault();
                    if ($(companyForm).parsley().isValid()) {
                        $.ajax({	
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ url('/companyInsert') }}",
                        data: new FormData($("#companyForm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if(response.msg=="Company Name Already Exists!"){
                                new PNotify({
                                title: 'Error',
                                text:  response.msg,
                                type: 'error'
                                });
                                return false;
                            } else if(response.msg=="Only Image Allowed!"){
								new PNotify({
                                title: 'Error',
                                text:  response.msg,
                                type: 'error'
                                });
                                return false;
							}else if(response.msg=="Company Added Successfully!"){
                                new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                                });
                                setTimeout(function(){  location.reload(); }, 1000);
                            }
                        },
                        error:function(response) {
                            var err = "";
                            $.each(response.responseJSON.errors,function(field_name,error){
                                err = err+error;
                            });
                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 1000
                            });
                        }
                        });
                    }
                }
            }
        }
    function companyStatus(value) {
        window.location.href = '/companyStatus/' + value;
    }
    function editCompany(companyId){
        $("#removeData").remove();
        $.ajax({
            url: "/editCompany/" + companyId,
            success: function(data) {
                $("#ramalist").empty();
                $("#ramalist").append(data.data);
                $('#myModalEdit').modal('show'); 
            }
        })
    }
    function companyUpdate(){
        if ($("#companyUpdateForm").parsley()) {
            if ($("#companyUpdateForm").parsley().validate()) {
                event.preventDefault();
                if ($(companyUpdateForm).parsley().isValid()) {
			        $.ajax({	
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ url('/updateCompany') }}",
                        data: new FormData($("#companyUpdateForm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            setTimeout(function(){  location.reload(); }, 800);
                        },
                        error:function(response) {
                            var err = "";
                            $.each(response.responseJSON.errors,function(field_name,error){
                                err = err +'<br>' + error;
                            });
                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 2000
                            });
                        }
			        });
			    }
		    }
	    }
	    return false;
    }
    </script>
@endsection