@extends('layouts/contentLayoutMaster')
@section('title', 'Create Invoice')
@section('vendor-style')
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/pickadate/pickadate.css')) }}">
@endsection
@section('page-style')
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('css/plugins/forms/validation/form-validation.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('css/pages/app-user.css')) }}">
  <style type="text/css">
    #cpyfields button {
        display: none !important;
    }
  </style>
@endsection

@section('content')
<!-- invoices edit start -->
<div class="row">
  <div class="col-12 col-sm-5">
    <section class="users-edit">
      <div class="card">
        <div class="card-content">
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane active" id="account" aria-labelledby="account-tab" role="tabpanel">
                <!-- invoices edit account form start -->
                <form novalidate action="{{ url('invoices/store') }}" method="post" enctype="multipart/form-data" onsubmit="return validation()">
                  {{ csrf_field() }}
                  
                  <div class="form-group">
                    <label for="users-list-status">CLients</label>
                      <select name="employer_id" class="form-control" id="employer_id">
                        <option value="">Select Company</option>
                        @if($employers)
                          @foreach($employers as $employer)
                            <option value="{{ $employer->employer_id }}">
                              @if(!empty($employer->b2b_company_name))
                                {{ $employer->b2b_company_name }} 
                                  @if(!empty($employer->b2b_brand_name))
                                    -- {{ $employer->b2b_brand_name }}
                                  @endif
                                @else
                                  {{ $employer->first_name }} {{ $employer->middle_name }} {{ $employer->last_name }}
                              @endif
                            </option>
                          @endforeach
                        @endif
                    </select>
                  </div>

                  <div class="form-group">
                    <div class="controls">
                      <label>Invoice Date</label>
                      <input type="date" class="form-control" name="invoice_date" id="invoice_date">
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="controls">
                      <label>From</label>
                      <input type="date" class="form-control" name="from" id="from">
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="controls">
                      <label>To</label>
                      <input type="date" class="form-control" name="to" id="to">
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="controls">
                      <label>Due Date</label>
                      <input type="date" class="form-control" name="due_date" id="due_date">
                    </div>
                  </div>

                  <div class="form-group">
                    <label>Status</label>
                    <select name="status" class="form-control">
                      <option value="DRAFT">DRAFT</option>
                      <option value="OPEN">OPEN</option>
                      <option value="PAID">PAID</option>
                    </select>
                  </div>

                  <div class="form-group">
                    <div class="controls">
                      <label>Notes</label>
                      <textarea name="notes" class="form-control" placeholder="Notes"></textarea>
                      @if($errors->has('notes'))
                        <p class="text-danger">{{ $errors->first('notes') }}</p>
                      @endif
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-12 d-flex flex-sm-row flex-column justify-content-end mt-1">
                      <button type="submit" class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1">Submit</button>
                      <button type="reset" class="btn btn-outline-warning">Reset</button>
                    </div>
                  </div> 
                </form>
                <!-- invoices edit account form ends -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- invoices edit ends -->
  </div>
</div>
@endsection

@section('vendor-script')
  {{-- Vendor js files --}}
  <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/validation/jqBootstrapValidation.js')) }}"></script>
@endsection

@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(mix('js/scripts/forms/select/form-select2.js')) }}"></script>
  <script src="{{ asset(mix('js/scripts/pages/app-user.js')) }}"></script>
  <script src="{{ asset(mix('js/scripts/navs/navs.js')) }}"></script>
  <script type="text/javascript">
    $(function() {
      $('#task_invoices_message_div').hide(); 
      $('#invoices_message_id').change(function(){
        if($('#invoices_message_id').val() == 'new') {
          $('#task_invoices_message_div').show();
          $('#task_invoices_message').attr('required', 'required');
        } else {
          $('#task_invoices_message_div').hide();
          $('#task_invoices_message').removeAttr('required'); 
        } 
      });
    });

    function validation(){

      var flag = 0;

      if($('#task_type_id').val() == ''){
        $('#task_type_id_error').html('Please Select Task Type');
        flag = 1;
      } else {
        $('#task_type_id_error').html('');
        flag = 0;
      }

      if($('#task_invoices').val() == ''){
        $('#task_invoices_error').html('Please invoices');
        flag = 1;
      } else {
        $('#task_invoices_error').html('');
        flag = 0;
      }
      
      if($('#invoices_message_id').val() == ''){
        $('#invoices_message_id_error').html('Please Select Conclusion List');
        flag = 1;
      } else {
        $('#invoices_message_id_error').html('');
        flag = 0;
      }

      if($('#invoices_message_id').val() == 'new'){
        if($('#task_invoices_message').val() == ''){
          $('#task_invoices_message_error').html('Please Select Task Type');
          flag = 1;
        } else {
          $('#task_invoices_message_error').html('');
          flag = 0;
        }     
      }

      if(flag == 1){
        return false;
      }
      return true;
    }
  </script>
@endsection