@extends('layouts.dashboard')
@section('content')
<div class="container">    
    <div class="contentbox">
        <div class="contentboxheading"><i class="las la-building"></i> <span id="formStatus">Agency Management</span>          
          <a class="btn btn-primary pull-right mt-2 mr10" href="{{route('export-entities')}}">Export</a>
          <button type="button" class="btn btn-primary pull-right mt-2 mr10" data-bs-toggle="modal" data-bs-target="#importCont">Import</button>
          <a class="btn btn-primary pull-right mt-2 mr10" href="{{url('import-sample')}}">Download Sample File</a>
          <a class="btn btn-primary pull-right mt-2 mr10 btn-form-toggle"><span>Show</span> Form</a>  
        </div>
        <div class="contentboxinner">
            @if (session('success'))
              <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
              <div class="alert alert-danger">{{ session('error') }}</div>
            @endif 
            @if (session('failures'))
              <div class="alert alert-danger">
                <ul>  
                  @foreach ($failures as $failure)
                    @foreach ($failure->errors() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                  @endforeach
                </ul>
              </div>
            @endif
            <div class="form-container fhide">  
              <form class="row g-3" id="entityForm" >
                @csrf   
                <input type="hidden" name="hdn_id" id="hdn_id" readonly>   
                <div class="alert alert-danger errorMsgUpdt" style="display:none;"></div>
                  <div class="col-md-6">
                    <label for="lbl_entityName" class="form-label ml10">Agency Name<span style="color:red">*</span></label>
                    <input type="text" class="form-control"  name="name" placeholder="Enter your agency name">
                  </div>
                  <div class="col-6">
                    <label for="lbl_address2" class="form-label ml10">Address<span style="color:red">*</span></label>           
                    <input type="text" class="form-control"  placeholder="Enter your address" name="address">
                  </div>
                  <div class="col-6">
                    <label for="lbl_address2" class="form-label ml10">City<span style="color:red">*</span></label>           
                    <input type="text" class="form-control"  placeholder="Enter your city" name="city">
                  </div>
                  <div class="col-6">
                    <label for="lbl_address2" class="form-label ml10">State<span style="color:red">*</span></label>           
                    <select class="selectpicker" name="state" data-live-search="true">
                      <option value="TX" selected>Texas</option>
                    </select>
                  </div>
                  <div class="col-6">
                    <label for="lbl_address2" class="form-label ml10">Zip Code<span style="color:red">*</span></label>           
                    <input type="text" class="form-control"  placeholder="Enter your zipcode" name="zipcode">
                  </div>
                  <div class="col-md-6">
                    <label for="lbl_agency_type" class="form-label ml10">Agency Type</label>
                    <select class="form-control" name="agency_type" id="agency_type">
                      <option value="non-profit" selected>Non Profit</option>
                      <option value="for-profit">For Profit</option>
                    </select>
                  </div>
                  <div class="col-md-6">
                    <label for="lbl_desc" class="form-label ml10">Description</label>
                    <textarea placeholder="Description" id="txt_dec" name="description" style="height:85px;" class="form-control"></textarea>
                  </div>
                  <div class="col-md-6">
                    <label for="lbl_status" class="form-label ml10">Status<span style="color:red">*</span></label>
                    <select class="form-control" name="status" id="select_Status">
                      <option value="1" selected>Active</option>
                      <option value="0">Inactive</option>
                    </select>
                    <label for="lbl_ischn" class="form-label ml10 mt-3">Is CHN?</label>
                      <input type="checkbox" id="txt_ischn" name="is_chn" value="1" />
                  </div>
                  
                  <div class="subheading">Primary Contact</div>

                  <div class="col-md-6">
                    <label for="lbl_primContact" class="form-label ml10">Phone<span style="color:red">*</span></label>
                    <input type="text" class="form-control" id="primaryContact" minlength="10" maxlength="13" name="primaryContact" placeholder="000-000-0000">
                  </div>
                  <div class="col-md-6">
                    <label for="lbl_primEmail" class="form-label ml10">Email<span style="color:red">*</span></label>
                    <input type="email" class="form-control email" id="txt_primEmail" name="primaryEmail" placeholder="example@example.com">
                  </div>
                  <div class="subheading">Referral Contact</div>

                  <div class="col-md-6">
                    <label for="lbl_refContact" class="form-label ml10">Phone<span style="color:red">*</span></label>
                    <input type="text" class="form-control"  id="refferingContact" minlength="10" maxlength="13" name="refferingContact" placeholder="000-000-0000">
                  </div>
                  <div class="col-md-6">
                    <label for="lbl_refEmail" class="form-label ml10">Email<span style="color:red">*</span></label>
                    <input type="email" class="form-control" id="txt_refEmail" name="refferingEmail" placeholder="example@example.com">
                  </div>
                  <div class="text-center mt-3">                  
                    <button type="button" id="btn_addEntity" class="btn btn-primary mt-4 mb-4">Submit</button>
                  </div>           
              </form> 
            </div>  
            <div class="row">
              <div class="col-md-12">
              <div class="subheading mt-2">Existing Agencies Details</div>
                <div class="table-responsive mt-3">
                    <table class="table table-striped" id="tbl_agencies">
                        <thead>
                            <tr>
                              <th class="no-wrap">Action</th>
                              <th scope="col">Agency Name</th>
                              <th scope="col">Primary Contact</th>
                              <th scope="col">Primary Email</th>
                              <th scope="col">Referral Contact</th>
                              <th scope="col">Referral Email</th>
                              <th scope="col">Address</th>
                              <th scope="col">City</th>
                              <th scope="col">State</th>
                              <th scope="col">Zip Code</th>
                              <th scope="col">Description</th>
                              <th scope="col">Status</th>
                              <th scope="col">Created By</th>
                            </tr>
                          </thead>
                          <tbody id="ajaxData">@include('entity.addEntity_ajax')</tbody>
                      </table>
                </div>
              </div>
            </div>  
        </div>
    </div>
</div>

<!-- start modal popup for alert -->
 <div class="modal fade" id="importCont" tabindex="-1" aria-labelledby="importCont" aria-modal="true" role="dialog">
  <div class="modal-dialog modal-dialog-centered">
   <div class="modal-content">
    <div class="modal-header">
     <h5 class="modal-title">Import Agencies</h5>
     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <form action="{{ route('save-import-entity') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="form-group mb-4">
            <div class="custom-file text-left">
              <input type="file" name="file" class="custom-file-input" id="customFile">
            </div>
        </div>
        <div align="center"><button class="btn btn-primary">Import Agencies</button></div>
      </form>
    </div>
   </div>
  </div>
 </div>
<!-- End modal popup for alert -->
<div class="modal fade" id="addAgree_modal"> 
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title">Upload Agreement</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="row g-3" id="uplAgreeForm" enctype="multipart/form-data">
                    @csrf
                    <input id="agrId" type="hidden" name="entity" readonly>
                    <div class="form-container">
                        <div class="row g-3" >
                            <div class="col-md-12">
                                <label for="agreement" class="form-label ml10">Agreement<span style="color:red">*</span></label>
                                <input type="file" class="form-control" id="agreement" name="agreement" placeholder="Upload Document">
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-3">
                        <button type="button" class="btn btn-primary mt-4 mb-4 mr-3" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" type="submit" class="btn btn-primary mt-4 mb-4" id="btn_saveAgreement">Save <div class="spinner-border spinner-border-sm text-light d-none" role="status"><span class="visually-hidden">Loading...</span></div></button> 
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('footer_scripts')
<script>
  $(document).ready(function () {
    $('#entityForm').validate({
        rules: {
          primaryContact: {
                phoneUS: true,
                required: true,
          },
          refferingContact: {
                phoneUS: true,
                required: true,
          },
        },
        messages: {
          primaryContact: {
                phoneUS: 'Phone number should be valid.',
                required: 'Phone number is required.'
          },
          refferingContact: {
            phoneUS: 'Phone number should be valid.',
            required: 'Phone number is required.'
          },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.col-md-6').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        }
    });
    
    $(document).on('click', '.uploadAgreement', function(){
      let entity = $(this).data('entity_id');
      $('#agrId').val(entity);
      $('#addAgree_modal').modal('show');
    });
    $(document).on('click', '#btn_saveAgreement', function(){
      let entity = $(this).data('entity_id');
      $('#btn_saveAgreement .spinner-border').show();
      var formData = new FormData($('#uplAgreeForm')[0]);
      formData.append('agreement', $('input[type=file]')[0].files[0]);
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: formData,
          url: APP_URL+"/upload-agreement",
          contentType: false,
          processData: false,
          success: function(res) {
              $('#btn_saveAgreement .spinner-border').hide();
              if(res.status){
                  window.location.reload();
              }
          },
          error: function(res) {
              $('#btn_saveAgreement .spinner-border').hide();
              ajax_error2(res);
          }
      });
    });
    
    $(document).on('click', '.sendAgreement', function(){
      let entity = $(this).data('entity_id');
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: {_token:_token, entity:entity},
          url: APP_URL+"/send-agreement",
          success: function(res) {
              if(res.status){
                  window.location.reload();
              }
          },
          error: function(res) {
              ajax_error2(res);
          }
      });
    });
  });
</script>
@endsection