@include('dashboard.layouts.header')

<div class="content-wrapper">
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>Payroll Setup Authorization</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
            <li class="breadcrumb-item active">Payroll Setup Authorization</li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">Payroll Setup Authorization Form</h3>
            </div>
            </br>

            @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            @if(isset($report))
            <form action="{{ route('payroll-setup-submit-form.update', $report->id) }}" method="POST" onsubmit="disableButton()">
              @csrf
              @method('PUT')
              @else
              <form action="{{ route('payroll-setup-submit-form') }}" method="POST" onsubmit="disableButton()">
                @csrf
                @endif

                <div class="card-body">
                  <div class="row">
                    <div class="col-md-12">

                      <div class="form-group">
                        <label>
                          I,
                          <input type="text" value="{{ old('officer_name', $report->officer_name ?? '') }}" class="form-control" name="officer_name" id="officer_name" style="width: 400px; display: inline-block;" placeholder="Officer Name">
                          authorized officer of
                          <input type="text" value="{{ old('company_name', $report->company_name ?? '') }}" class="form-control" name="company_name" id="company_name" style="width: 400px; display: inline-block;" placeholder="Company Name">
                          authorize
                          ITAXEXPERTS.COM to process payroll for the company.
                          </br></br>
                          I also authorize ITAXEXPERTS.COM to charge US $
                          <input type="number" value="{{ old('fee_amount', $report->fee_amount ?? '') }}" class="form-control d-inline-block w-auto" name="fee_amount" placeholder="Enter amount">
                          ^for payroll processing per pay cycle.

                        </label>
                        @error('officer_name')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                        @error('company_name')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                      </div>
                    </div>
                  </div>
                  <label>*Please Fill in fee mentioned in Fee Schedule OR discussed with accountant. </label>

                  <div class="row">
                    <div class="col-md-12">

                      <div class="form-group">
                        <label>
                          This charge will be a debit to the
                          <input type="text" value="{{ old('charge_company_name', $report->charge_company_name ?? '') }}" class="form-control" name="charge_company_name" id="charge_company_name" style="width: 400px; display: inline-block;" placeholder="Company Name">
                          ,
                          <input type="text" value="{{ old('charge_bank_name', $report->charge_bank_name ?? '') }}" class="form-control" name="charge_bank_name" id="charge_bank_name" style="width: 400px; display: inline-block;" placeholder="Bank Name">
                          account for every payroll
                          cycle.
                        </label>
                      </div>
                    </div>
                  </div>

                  <h4>Bank information for the company:</h4>
                  <div class="row">

                    <div class="col-md-6 col-print-6">
                      <div class="form-group">
                        <input type="text" value="{{ old('bank_name', $report->bank_name ?? '') }}" class="form-control" name="bank_name" id="bank_name" placeholder="Bank Name">
                      </div>
                      <div class="form-group">
                        <input type="text" value="{{ old('account_number', $report->account_number ?? '') }}" class="form-control" name="account_number" id="account_number" placeholder="Account Number">
                      </div>
                    </div>
                    <div class="col-md-6 col-print-6">
                      <div class="form-group">
                        <input type="text" value="{{ old('routing_number', $report->routing_number ?? '') }}" class="form-control" name="routing_number" id="routing_number" placeholder="Routing Number">
                      </div>
                    </div>
                  </div>



                  <div class="form-group">
                    <p>
                      The following items will be provided to ITAXEXPERTS.COM to set-up payroll:</br>
                      1. Completed W-4 forms for all employees.</br>
                      2. Bank information (including bank name, routing number, and account number) for the
                      Company (if different from above).</br>
                      3. Bank information for all employees for direct deposit (including bank name, routing
                      number, and account number).</br>
                      4. Employee compensation information (hourly rate, number of hours, or fixed salary
                      amount).</br></br>
                      I also acknowledge that it all completed forms as a part of offering employment are on file with the
                      company. It will also be our responsibility to notify ITAXEXPERTS.COM, for any change related to
                      payroll processing including employee addition, deletion, or any change in compensation.
                    </p>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-md-6 col-print-6">

                      <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" name="signature_name"
                          value="{{ old('signature_name', $report->signature_name ?? '') }}" placeholder="Signature Name">

                      </div>
                      <div class="form-group">
                        <label>Date</label>
                        <input type="date" class="form-control" name="signature_date"
                          value="{{ old('signature_date', $report->signature_date ?? '') }}" placeholder="Signature Date">
                      </div>
                    </div>

                    <div class="col-md-6 col-print-6">
                      <div class="form-group">
                        <label>Signature</label>
                        <input type="text" class="form-control" name="signature"
                          value="{{ old('signature', $report->signature ?? '') }}" placeholder="Signature">
                      </div>
                    </div>

                  </div>
                
                 

                <div class="card-footer">
                  <button type="submit" id="submitButton" class="btn btn-primary">Submit</button>
                </div>
              </form>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

@include('dashboard.layouts.footer')


<script>
  function formatUSPhone(input) {

    let value = input.value.replace(/\D/g, ''); // remove non-digits
    if (value.length > 3 && value.length <= 6) {
      input.value = `(${value.slice(0, 3)}) ${value.slice(3)}`;
    } else if (value.length > 6) {
      input.value = `(${value.slice(0, 3)}) ${value.slice(3, 6)}-${value.slice(6, 10)}`;
    } else {
      input.value = value;
    }
  }
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('phone').addEventListener('input', function() {
      formatUSPhone(this);
    });
    document.getElementById('fax').addEventListener('input', function() {
      formatUSPhone(this);
    });
    document.getElementById('shareholder1Phone').addEventListener('input', function() {
      formatUSPhone(this);
    });
    document.getElementById('shareholder1Fax').addEventListener('input', function() {
      formatUSPhone(this);
    });
    document.getElementById('shareholder2Phone').addEventListener('input', function() {
      formatUSPhone(this);
    });
    document.getElementById('shareholder2Fax').addEventListener('input', function() {
      formatUSPhone(this);
    });
  });

  function formatUSSSN(input) {
    let value = input.value.replace(/\D/g, ''); // remove all non-digits

    if (value.length > 5) {
      // 123-45-6789
      input.value = `${value.slice(0, 3)}-${value.slice(3, 5)}-${value.slice(5, 9)}`;
    } else if (value.length > 3) {
      // 123-45
      input.value = `${value.slice(0, 3)}-${value.slice(3, 5)}`;
    } else {
      // 123
      input.value = value;
    }
  }
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('shareholder1SSN').addEventListener('input', function() {
      formatUSSSN(this);
    });
    document.getElementById('shareholder2SSN').addEventListener('input', function() {
      formatUSSSN(this);
    });
    document.getElementById('ci_ssn').addEventListener('input', function() {
      formatUSSSN(this);
    });

  });
</script>


<script>
  $(function() {
    bsCustomFileInput.init();
  });
</script>
<script>
  function disableButton() {
    let btn = document.getElementById('submitButton');
    btn.disabled = true;
    btn.innerText = 'Submitting...'; // Change button text

    // Allow form submission
    return true;
  }
</script>
</body>

</html>