Untitled

<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">
              <h4 class="mb-sm-0">Ledger</h4>
  
              <div class="page-title-right">
                <ol class="breadcrumb m-0">
                  <li class="breadcrumb-item"><a href="javascript: void(0);">Reports</a></li>
                  <li class="breadcrumb-item active">Ledger</li>
  
                </ol>
              </div>
  
            </div>
          </div>
        </div>
        <!-- end page title -->
        <div class="row">
          <div class="ledger-data-filter d-flex flex-column flex-md-row flex-wrap card">
            <div class="d-flex flex-column flex-md-row gap-3 flex-wrap" style="width: 100%;">
              <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" name="client_code" onkeyup="this.value = this.value.toUpperCase()">
                <input type="hidden" id="report_name" value="LedgerDetail">
                <span class="text-danger" id="client_code_err"></span>
              </div>
              <div style="display: flex; flex-direction: column;">
                <label for="" class="form-label fw-semibold">Date range</label>
                <div class="form-icon right">
                  <input type="text" class="form-control form-control-icon" data-provider="flatpickr" data-date-format="d-m-Y" id="as_on_date" placeholder="Select dates">
                  <i class="ri-calendar-2-fill"></i>
                </div>
              </div>
              <div style="display: flex; flex-direction: column;">
                <label for="" class="form-label fw-semibold">Select client type</label>
                <select name="client-type-selector" id="client_type">
                  <option value="disabled" disabled>Select client type</option>
                <option value="client" >Client</option>
                <option value="family">Family</option>
              </select>
              </div>
              <div class="d-flex align-items-center marginMTFCHeckboxDiv mt-md-4">
                <label for="" style="margin: 0; display: flex; align-items: center; margin-right: 1rem; cursor: pointer;"><input type="checkbox"  value="M" name="filter[]" id="with_margin" style="margin-right: 1rem;">With Margin</label>
                    <label for="" style="margin: 0; display: flex; align-items: center; margin-right: 1rem; cursor: pointer;"><input type="checkbox"  value="L" name="filter[]" id="mtf" style="margin-right: 1rem;">MTF</label>  
                </div>
            <div class="d-flex flex-md-row gap-3 flex-wrap justify-content-center">
              <button class="custom-primary-btn mt-md-4" onclick="getLedgerDetailReport()">Submit</button>
            </div>
            </div>
        </div>
          </div>
        </div>
      </div>
      <div id="modal_div">
                            
      </div>
      <div class="col-lg-12 col-sm-12 col-xs-12" id="ledger_response">                 
      </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>