@extends('layouts.app')
@section('title', 'Stellar | Companies')
@section('content')
<div class="container mt-2">
    @include('app.settings.index')
    <div class="col-lg-12">
        <div class="card ">
            <div class="card-body">
                <div class="p-0">
                    <table id="datatable" class="table table-bordered nowrap" 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>County</th>
                                <th>State</th>
                                <th>Contact No</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($companyData as $company)
                            <tr>
                                <td>{{ $loop->iteration}}</td>
                                <td>{{ $company->company_name}}</td>
                                <td>{{ $company->address}}</td>
                                <td>{{ $company->city}}</td>
                                <td>{{ isset($company->counties->county_name) ? $company->counties->county_name : ""}}</td>
                                <td>{{ isset($company->states->short_code) ? $company->states->short_code : ""}}</td>
                                <td>{{ $company->contact}}</td>
                                <td>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox"  class="custom-control-input" id="customSwitch{{ $company->id }}"  value="{{ $company->id }}" onclick="companyStatus(this.value)" @if($company->is_active==1) checked @endif>
                                        <label class="custom-control-label" for="customSwitch{{ $company->id }}">@if($company->is_active==1) Active @else Inactive @endif</label>
                                    </div>
                                </td>
                                <td>
                                     <span class="edit_company ml-2" style=" cursor: pointer;"  data-id="{{ $company->id }}">
                                        <img class="menuicon tbl_editbtn" src="{{asset('assets/images/edit.svg')}}" >&nbsp;
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- AddingCompany --}}
<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">
          <h5 class="modal-title">Add Company</h5>
          <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 type="text" class="form-control" id="contactno" name="contact" placeholder="(XXX) YYY-ZZZZ" maxlength="19" minlength="10"  autocomplete="off">
              </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>
                  <select id="state" name="state" type="text" class="form-control" autocomplete="off" placeholder="Enter State"  data-parsley-trigger="focusout" data-parsley-trigger="keyup">
                    <option selected disabled value=""> Select State </option>
                    @foreach ($stateList as $state)
                            <option value="{{ $state->id }}">
                                {{ $state->short_code }}</option>
                        @endforeach
                  </select>
              </div>
              <div class="col-lg-4">
                <label for="name-input" class="col-form-label">County<span class="text-danger">  <span></label>
                <select id="county" name="county" type="text" class="form-control" autocomplete="off" placeholder="Enter County"  data-parsley-trigger="focusout" data-parsley-trigger="keyup">
                </select>
            </div>
          </div>
         <div class="row mt-1">
              <div class="col-lg-4">
                  <label for="name-input" class="col-form-label">Zipcode<span class="text-danger">  <span></label>
                  <input  id="zipcode" name="zipcode" type="text" class="form-control" autocomplete="off" placeholder="Enter Zipcode" maxlength="5">
              </div>
              <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-2">
                <br>
                <div class="mt-2">
                    <input type="checkbox" class="mx-1"  value="1" id="is_active" name="is_active" />
                    <label for="" class="">Is Active ?</label>
                </div>
            </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>
{{-- Edit Model Company --}}
    <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Edit company</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form method="post" id="updatecompanyfrm" name="updatecompanyfrm"  data-parsley-validate enctype="multipart/form-data">
					@csrf
                    <input  name="id" value="" id="company_id_ed" type="hidden"  />
					<div class="modal-body">
						<div class="row">
                            <div class="col-lg-4">
                                <label for="compamy-name-input" class="col-form-label">Company<span class="text-danger">  <span></label>
                                <input id="company_name_ed" name="company_name" value="" 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">City<span class="text-danger">  <span></label>
                                <input id="city_ed" name="city" id="city_ed" value="" 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 type="text" class="form-control" id="contact_ed" name="contact" placeholder="(XXX) YYY-ZZZZ" minlength="10" maxlength="19" autocomplete="off">
                            </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" value="" name="photo" id="photo_ed" 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>
                                <select id="state_ed" name="state" value="" aria-valuemax="text" class="form-control" autocomplete="off" placeholder="Enter State"  data-parsley-trigger="focusout" data-parsley-trigger="keyup">
                                  <option selected disabled value=""> Select State </option>
                                  @foreach ($stateList as $state)
                                          <option value="{{ $state->id }}">
                                              {{ $state->short_code }}</option>
                                      @endforeach
                                </select>
                            </div>
                            <div class="col-lg-4">
                              <label for="name-input" class="col-form-label">County<span class="text-danger">  <span></label>
                              <select id="county_ed" name="county" type="text" class="form-control" value="" autocomplete="off" placeholder="Enter County"  data-parsley-trigger="focusout" data-parsley-trigger="keyup">
                                @foreach ($countyList as $county)
                                <option value="{{ $county->id }}">
                                    {{ $county->county_name }}</option>
                                @endforeach
                            </select>
                          </div>
                        </div>
						<div class="row mt-1">
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Zipcode<span class="text-danger">  <span></label>
                                <input id="zip_ed" name="zipcode" type="text" class="form-control" autocomplete="off" placeholder="Enter Zipcode" maxlength="5">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Address<span class="text-danger">  <span></label>
                                <input id="address_ed" value="" 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_ed" value="" name="email" type="email" class="form-control" autocomplete="off" placeholder="Enter Email" >
                            </div>
                          <div class="col-lg-2">
                            <br>
                            <div class="mt-2">
                                <input type="checkbox" class="mx-1"  value="1" id="is_active_ed" name="is_active" />
                                <label for="" class="">Is Active ?</label>
                            </div>
                        </div>
					</div>
                </div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
						<button type="submit" class="btn btn-primary">Update</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
{{-- Js --}}
<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
            });

            $("input[name='contact']").keyup(function() {
            var phoneValue = $(this).val().replace(/\D/g, "");
            if (phoneValue.length > 10) {
            $(this).val(phoneValue.replace(/^(\d{3})(\d{3})(\d{4})(\d{1,4})$/, "($1) $2-$3 x$4"));
            } else {
            $(this).val(phoneValue.replace(/^(\d{3})(\d{3})(\d{4})$/, "($1) $2-$3"));
            }
        });

            $("input[name='zipcode']").blur(function() {
            var zipCodeValue = $(this).val().replace(/\D/g, "");
            var paddedZipCode = ("00000" + zipCodeValue).slice(-5);
            $(this).val(paddedZipCode);
        });


        function companyStatus(value) {
            window.location.href = '/companyStatus/' + value;
        }

        $(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("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 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;
    }

// Dropdown
$('#state').on('change', function () {
        $("#county").select2();
        var state_id = $("#state").val();
        $("#county").html('');
        $.ajax({
            url: "{{url('getCounty')}}",
            type: "POST",
            data: {
                state_id: state_id,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function (result) {
                $('#county').html('<option value="">Select County</option>');
                $.each(result.county, function (key, value) {
                    $("#county").append('<option value="' + value
                        .id + '">' + value.county_name + '</option>');
                });
            }
        });
    });

    $('#state_ed').on('change', function () {
        $("#county_ed").select2();
        var state_id_ed = $("#state_ed").val();
        $("#county_ed").html('');
        $.ajax({
            url: "{{url('getCounty')}}",
            type: "POST",
            data: {
                state_id: state_id_ed,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function (result) {
                console.log(result);
                $('#county_ed').html('<option value="">Select County</option>');
                $.each(result.county, function (key, value) {
                    $("#county_ed").append('<option value="' + value
                        .id + '">' + value.county_name + '</option>');
                });
            }
        });
    });


    // Edit company
     $('#datatable').on('click','.edit_company',function () {
		var id = $(this).data('id');
		var url = '{{ route("edit_company") }}';
		$.ajax({
			type: "post",
			url: url,
			data: { id:id , _token: '{{csrf_token()}}'},
			success: function(response)
			{
				var res = response;
                console.log(res);
                $('#selected_company_name').val(res['company_name']);
                $("#company_id_ed").val(res['id']);
                $("#company_name_ed").val(res['company_name']);
                $("#address_ed").val(res['address']);
				$("#contact_ed").val(res['contact']);
                $("#city_ed").val(res['city']);
                $("#photo_ed").val(res['photo']);
                $("#state_ed").val(res['state']);
                $("#county_ed").val(res['county']);
                $("#email_ed").val(res['email']);
				$("#zip_ed").val(res['zip']);

				if(res['is_active'] == 1) {
					$( "#is_active_ed" ).attr('checked', 'checked');
				} else {
					$( "#is_active_ed" ).removeAttr('checked', 'checked');
				}
				$("#myModalEdit").modal('show');
			}
		});
	});


    $('#updatecompanyfrm').on('submit', function(event){
		event.preventDefault();
		if($('#updatecompanyfrm').parsley().isValid()){
			var url = '{{ route("updateCompany") }}';
			var formData = new FormData(this);
			$.ajax({
				type: "post",
				url: url,
				data: formData,
                contentType: false,
                processData: 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
					});
				}
			});
		}
	});
</script>

@endsection