Untitled

<div class="row">
    <div class="col-sm-8">
      <div class="card rounded-0 cheque-info-card">
        <div class="card-header">
          <div class="card-title text-secondary">{{__('Recent Cheques')}}</div>
          <div class="card-tools">
            {{-- <button type="button" id="open-modal" class="btn btn-transparent text-secondary rounded-0" data-bs-toggle="modal" data-bs-target="#myModal">
              <i class="fas fa-th-large"></i>
            </button> --}}
            <li class="nav-item dropdown mr-3" style="list-style: none;">
              <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-plus text-info"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-end rounded-0 p-0 shadow-lg border" aria-labelledby="navbarDropdown">
               <div class="row">
                <div class="col">
                   <button type="button" id="single-payeee" class="btn btn-transparent text-sm text-secondary rounded-0" data-bs-toggle="modal" data-bs-target="#single-payee">
                  <i class="fas fa-user mr-2"></i>Single Payee
                </button>
                </div>
                <div class="col">
                   <button type="button" id="multiple-payee" class="btn btn-transparent text-sm text-secondary rounded-0" data-bs-toggle="modal" data-bs-target="#myModal">
                  <i class="fas fa-users mr-2"></i>Multiple Payee
                </button>
                </div>
               </div>
              </div>
          </li>
          </div>
        </div>
        <div class="card-body">
          <table class="table bg-olive table-bordered cheque-table table-hover table-sm">
            <thead>
              <tr>
                <th class="text-secondary">id</th>
                <th class="text-secondary">Check No.</th>
                <th class="text-secondary">Date</th>
                <th class="text-secondary">Payee</th>
                <th class="text-secondary">Amount</th>
                <th class="text-secondary">BIR With Holdings</th>
                <th class="text-secondary">Actions</th>
              </tr>
            </thead>
            <tbody class="table-body cheque-table-body">
              @foreach ($cheques as $cheque)
              <tr class="get-details" id="{{$cheque->id}}" style="cursor: pointer">
                <td class="fw-bold">{{$cheque->id}}</td>
                <td id="{{$cheque->ChequeNumber}}" class="checkno-ref-to-remove">{{$cheque->ChequeNumber}}</td>
                <td>{{\Carbon\Carbon::parse($cheque->Date)->format('Y-m-d')}}</td>
                <td>{{$cheque->Payee}}</td>
                <td>{{number_format($cheque->Amount)}}</td>
                <td>{{$cheque->BIRWithHoldings}}</td>
                <td>
                  <span title="print item" class="badge text-secondary" style="cursor: pointer;" onclick="getID('{{$cheque->id}}')">
                    <i class="far fa-fw fa-file-pdf"></i>
                  </span>
                  <span title="remove item" class="badge text-secondary delete-modal-check" style="cursor: pointer;" type="button" id="{{$cheque->id}}" data-bs-toggle="modal" data-bs-target="#delete-disbursement">
                    <i class="fas fa-trash"></i>
                  </span>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
          <div class="modal fade" id="myModal" data-bs-backdrop="static" data-bs-keyboard="false" >
            <div class="modal-dialog modal-fullscreen">
              <div class="modal-content">
                <div class="overlay" id="overlay">
                  <i class="loader"></i>
                </div>
                <div class="modal-header">
                  <h4 class="modal-title">New Disbursement - Multiple Payee</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                  @include('components.chequeForm')
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary rounded-0" id="next-button">
                    <a>{{__('Save')}}</a>
                    
                  </button>
                  <button type="button" class="btn btn-secondary rounded-0" data-bs-dismiss="modal">{{__('Close')}}</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-sm-4">
      <div class="card collapse-card rounded-0" aria-expanded="false">
        <div class="card-header">Disbursement Details
          <div class="card-tools">
            <button class="btn btn-tools disbursement-card-info" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
          </div>
        </div>
        <div class="card-body" style="max-height: 300px; overflow: auto;">
          <table class="table">
            <thead>
              <tr>
                <th class='text-secondary fw-bold'>ID</th>
                <th class='text-secondary fw-bold'>Check Ref.</th>
                <th class='text-secondary fw-bold'>Amount</th>
                <th class='text-secondary fw-bold'>Account</th>
                <th class='text-secondary fw-bold'>Payee</th>
                <th class='text-secondary fw-bold'>Actions</th>
              </tr>
            </thead>
            <tbody class="tbody-disbursement-info">
              <tr>
                <td colspan="5">click check to view disbursement detail</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>