Untitled

<div class="main-content">

    <div class="page-content">
      <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
          <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
              <div class="page-title-right">
                <ol class="breadcrumb m-0">
                  <li class="breadcrumb-item"><a href="javascript: void(0);">Outstanding Balance </a></li>
                </ol>
              </div>

            </div>
          </div>
        </div>
        <!-- end page title -->
        <div class="row">
          <div class="card outstanding-balance-filter">
            <div class="row d-flex flex-column flex-lg-row">
                <div class="col-auto d-flex flex-column flex-lg-row gap-3">
              <div style="display: flex; flex-direction: column;">
                <label for="" class="form-label fw-semibold">Select Client code</label>
                  <input type="text" placeholder="Enter client code" class="clientCodeText" id="client_code" onkeyup="this.value = this.value.toUpperCase()">
                </div>
              <div style="display: flex; flex-direction: column;">
                <label for="" class="form-label fw-semibold">Date</label>
                <input type="date" name="datepicker" id="as_on_date" >
                <!-- <div class="form-icon right" style="width: 100%;">
                  <input name="datepicker" type="date" class="form-control form-control-icon flatpickr-input" id="as_on_date" data-provider="flatpickr" data-date-format="d-m-Y" placeholder="Select dates" width="" readonly="readonly">
                
                </div> -->
                <input type="hidden" id="report_name" value="OutstandingBalance">
              </div>
              <div style="padding-left: 0.5rem;" class="d-flex align-items-center marginMTFCHeckboxDiv pt-2 pt-md-4  ">
                <label for="" style="margin: 0; display: flex; align-items: center; margin-right: 1rem; cursor: pointer;"><input type="checkbox" name="" id="" style="margin-right: 1rem;"> Margin</label>
                    <label for="" style="margin: 0; display: flex; align-items: center; margin-right: 1rem; cursor: pointer;"><input type="checkbox" name="" id="" style="margin-right: 1rem;">MTF</label> 
            </div>
            </div>
      
            <div class="col-auto d-flex justify-content-center">
              <button class="custom-primary-btn mt-4" onclick="getOutstandingBalanceReport()">Submit</button>
            </div>
          </div>
        </div>
        </div>
      </div>
      <div class="col-lg-12 col-sm-12 col-xs-12" id="outstandingbalance">

      </div>
      <div class="ajax-loader">
        <lottie-player src="https://assets5.lottiefiles.com/packages/lf20_uwR49r.json"  background="transparent"  speed="0.7"  style="width: 100px; height: 100px;"  loop  autoplay></lottie-player>
      </div>
      <div class="fileError">
        <h1>Opps.. File not found</h1>
      </div>
    </div>
  </div>