@extends('layouts.app')

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js" integrity="sha256-yazfaIh2SXu8rPenyD2f36pKgrkv5XT+DQCDpZ/eDao=" crossorigin="anonymous"></script>
    <script>

      $(document).ready(function(){
        connectoapp();
      })

      $("#create").validate({
        rules: {
          clientname: {
            required : true,
            alpha : true
          },
          contactname: {
            required : true,
            alpha : true
          },          
          email: {
            required: true,
            email: true
          },
          phone :{
            required: true,
            phonevalidation: true
          }       
        },
        messages: {
          clientname: {
            required : "Please enter your name",
            alpha : "Please enter a valid name"
          },
          contactname: {
            required : "Please enter company name",
            alpha : "Please enter a valid name"
          },
          email: {
            required: "Please enter an email address",
            minlength: "Please enter a valid email address"
          },   
          phone: {
            required: "Please enter a phone#",
            phonevalidation: "Please enter a valid phone#"
          }                         
        },
      });

      jQuery.validator.addMethod("phonevalidation", function (phone_number, element) {
        phone_number = phone_number.replace(/\s+/g, "");
        return this.optional(element) || phone_number.length > 9 && 
        phone_number.match(/^(?=[0-9()+\s-]*$)(?!.*[<>'";`%])/);
      });

      jQuery.validator.addMethod("alpha", function(value, element) {
          return this.optional(element) || value == value.match(/^[a-zA-Z ]*$/);
       });


      function connectoapp(){
          if($("#accounting_app").find(':selected').val() == 1){
              $("#connect_app").show();
              $("#connect_other").hide();
          }else if($("#accounting_app").find(':selected').val() != 5){
              $("#connect_app").hide();
              $("#connect_other").show();
          }else{
              $("#connect_app").hide();
              $("#connect_other").hide();
          }
      }

      function changepass(){
        $('.hude_pass').toggle();
      }
      
    </script>    
@endpush

@push('styles')
  <style type="text/css">
    .table{
      width: auto !important;
    }
  </style>
@endpush

@section('content')

        <div class="table-responsive">
            <form name="create" id="create" method="post" action="{{url('updateprofile')}}">
            <table class="table  table-bordered table-striped m-b-0">

                <tbody>
                <tr>
                    <td>Client Name</td>
                    <td><input type="text" class="form-control" value="{{$client->name}}" name="clientname" placeholder="Name"></td>
                </tr>
                <tr>
                    <td>Company Name</td>
                    <td><input type="text" class="form-control" value="{{$client->trustee}}" name="contactname" placeholder="Company Name"></td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td><input readonly="readonly" type="email" class="form-control" value="{{$client->email}}" name="email" placeholder="abc@gmail.com"></td>
                </tr>
                <tr>
                    <td>Phone</td>
                    <td><input type="text" class="form-control" value="{{$client->phone}}" name="phone" placeholder="Phone#"></td>
                </tr>
                <tr>
                    <td><button onclick="changepass()" type="button" class="btn btn-default">Reset Password</button></td>
                    <td class="hude_pass" style="display: none;"><input type="text" class="form-control" name="password" value=""></td>
                </tr> 
                <tr>
                    <td colspan="2"><h5 class="">API Authorization</h5></td>
                </tr>
                <tr>
                    <td rowspan="2" >
                      
            <select onchange="connectoapp()" name="accounting_app" id="accounting_app" class="form-control">

                @if($applications->count())

                    @foreach($applications as $ff)
                        @if($ff->connect_show == '1')
                    <option @if(auth()->user()->accounting_app == $ff->id) selected = "selected" @endif  value="{{$ff->id}}" data-code="{{$ff->code_needed}}">{{$ff->name}}</option>
                        @endif
                    @endforeach

                @endif

            </select>

                    </td>
                    <td >
                      <div id="connect_app" style="display: none;">
                      @if($no_days_diff > 59)

                        <a class="btn btn-success" href="https://api.bgl360.com.au/oauth/authorize?response_type=code&client_id={{CLIENTID}}&scope=smsf_partner&redirect_uri={{APIURLPROFILE}}">Click here to authorise</a>

                      @else  
                        <p class="alert alert-success text-center">Connected</p>
                      @endif
                    </div>
                      <div id="connect_other" style="display: none;">
                        <a href="javascript:void(0);">Click here to authorise</a>
                    </div>
                       </td>
                </tr>
                   
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                </tbody>

            <tr>
            <td colspan="2">    
            <div class="col text-center">
                <button class="btn btn-default" type="button" onclick="javascript:history.back()">Cancel</button>
                <button class="btn btn-primary" type="submit">Submit</button>
            </div>
          </td>
          </tr>
            </table>

            </form>
        </div>
    
@endsection