<div class="page-title-box">
    <div class="row align-items-center">
        <div class="col-md-8">
            <h6 class="page-title">Dashboard</h6>
            <?php include 'views'._.'includes/timer'.PL;?>
        </div>
        <div class="col-md-4">
            <div class="float-end d-none d-md-block">
                <div class="dropdown">
                    <button class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="mdi mdi-plus me-2"></i> Create entrie
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
     <div class="col-xl-3 col-md-6">
        <div class="card mini-stat bg-primary text-white">
            <div class="card-body dash-details">
                <div class="mb-4">
                    <div class="float-start mini-stat-img me-2">
                        <img src="assets/images/services-icon/01.png" alt="">
                    </div>
                    <h5 class="font-size-16 text-uppercase text-white-50">Today's Entry</h5>
                    <h4 class="fw-medium font-size-24">1,685 <i
                            class="mdi mdi-arrow-up text-success ms-2"></i></h4>
                    
                </div>
                <div class="pt-2">
                    <div class="float-end">
                        <a href="#" class="text-white-50"><i class="mdi mdi-arrow-right h5 text-white-50"></i></a>
                    </div>

                    <p class="text-white-50 mb-0 mt-1">Explore more</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card mini-stat bg-primary text-white">
            <div class="card-body dash-details">
                <div class="mb-4">
                    <div class="float-start mini-stat-img me-2">
                        <img src="assets/images/services-icon/01.png" alt="">
                    </div>
                    <h5 class="font-size-16 text-uppercase text-white-50">All Entries</h5>
                    <h4 class="fw-medium font-size-24">1,685 <i
                            class="mdi mdi-arrow-up text-success ms-2"></i></h4>
                    
                </div>
                <div class="pt-2">
                    <div class="float-end">
                        <a href="#" class="text-white-50"><i class="mdi mdi-arrow-right h5 text-white-50"></i></a>
                    </div>

                    <p class="text-white-50 mb-0 mt-1">Explore more</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card mini-stat bg-primary text-white">
            <div class="card-body dash-details">
                <div class="mb-4">
                    <div class="float-start mini-stat-img me-2">
                        <img src="assets/images/services-icon/01.png" alt="">
                    </div>
                    <h5 class="font-size-16 text-uppercase text-white-50">Pending Entries</h5>
                    <h4 class="fw-medium font-size-24">1,685 <i
                            class="mdi mdi-arrow-up text-success ms-2"></i></h4>
                    
                </div>
                <div class="pt-2">
                    <div class="float-end">
                        <a href="#" class="text-white-50"><i class="mdi mdi-arrow-right h5 text-white-50"></i></a>
                    </div>

                    <p class="text-white-50 mb-0 mt-1">Explore more</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card mini-stat bg-primary text-white">
            <div class="card-body dash-details">
                <div class="mb-4">
                    <div class="float-start mini-stat-img me-2">
                        <img src="assets/images/services-icon/02.png" alt="">
                    </div>
                    <h5 class="font-size-16 text-uppercase text-white-50">Total income today</h5>
                    <h4 class="fw-medium font-size-24">52,368 <i
                            class="mdi mdi-arrow-down text-danger ms-2"></i></h4>
                    
                </div>
                <div class="pt-2">
                    <div class="float-end">
                        <a href="#" class="text-white-50"><i class="mdi mdi-arrow-right h5 text-white-50"></i></a>
                    </div>

                    <p class="text-white-50 mb-0 mt-1">Explore more</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card mini-stat bg-primary text-white">
            <div class="card-body dash-details">
                <div class="mb-4">
                    <div class="float-start mini-stat-img me-2">
                        <img src="assets/images/services-icon/03.png" alt="">
                    </div>
                    <h5 class="font-size-16 text-uppercase text-white-50">Monthly total income</h5>
                    <h4 class="fw-medium font-size-24">15.8 <i
                            class="mdi mdi-arrow-up text-success ms-2"></i></h4>
                    
                </div>
                <div class="pt-2">
                    <div class="float-end">
                        <a href="#" class="text-white-50"><i class="mdi mdi-arrow-right h5 text-white-50"></i></a>
                    </div>

                    <p class="text-white-50 mb-0 mt-1">Explore more</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card mini-stat bg-primary text-white">
            <div class="card-body dash-details">
                <div class="mb-4">
                    <div class="float-start mini-stat-img me-2">
                        <img src="assets/images/services-icon/04.png" alt="">
                    </div>
                    <h5 class="font-size-16 text-uppercase text-white-50">Yearly total income</h5>
                    <h4 class="fw-medium font-size-24">2436 <i
                            class="mdi mdi-arrow-up text-success ms-2"></i></h4>
                    
                </div>
                <div class="pt-2">
                    <div class="float-end">
                        <a href="#" class="text-white-50"><i class="mdi mdi-arrow-right h5 text-white-50"></i></a>
                    </div>

                    <p class="text-white-50 mb-0 mt-1">Explore more</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card mini-stat bg-primary text-white">
            <div class="card-body dash-details">
                <div class="mb-4">
                    <div class="float-start mini-stat-img me-2">
                        <img src="assets/images/services-icon/04.png" alt="">
                    </div>
                    <h5 class="font-size-16 text-uppercase text-white-50">Available Bookings</h5>
                    <h4 class="fw-medium font-size-24">10 <i
                            class="mdi mdi-arrow-up text-success ms-2"></i></h4>
                    
                </div>
                <div class="pt-2">
                    <div class="float-end">
                        <a href="#" class="text-white-50"><i class="mdi mdi-arrow-right h5 text-white-50"></i></a>
                    </div>

                    <p class="text-white-50 mb-0 mt-1">Explore more</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end row -->
  <div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Recent Work Entries (Live Activity Feed)</h4>
                <div class="col-xs-12 col-sm-12">
                    <!-- Main search form -->
                    <form action="#" method="get" class="mainsearch-form">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="filter-input">
                                    <label class="form-label" for="worker_name">Find</label>
                                    <input type="text" name="q" class="form-control" placeholder="Search...">
                                </div>
                            </div>
                                <div class="col-md-4">
                                <div class="filter-input">
                                    <span class="input-group-btn">
                                        <button type="submit" name="search" id="search-btn" class="btn btn-primary waves-effect waves-light"><i class="ti-search"></i> Search</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover table-centered table-nowrap mb-0">
                        <thead id="table-head">
                            <tr>
                                <th scope="col">#NO</th>
                                <th scope="col">Date</th>
                                <th scope="col">Time</th>
                                <th scope="col">Service Type</th>
                                <th scope="col">Amount Charged (UGX)</th>
                                <th scope="col">Worker</th>
                                <th scope="col">Collaboration</th>
                                <th scope="col">Collaborators / Amounts</th>
                                <th scope="col">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>11-02-2025</td>
                                <td>14:30</td>
                                <td>Gel Nails</td>
                                <td>100,000</td>
                                <td>Jane Doe</td>
                                <td><span class="badge bg-success">Yes</span></td>
                                <td>
                                    Worker A: 30,000<br>
                                    Worker B: 20,000
                                </td>
                                <td><span class="badge bg-success">Completed</span></td>
                                
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>12-02-2025</td>
                                <td>10:00</td>
                                <td>Bridal Nails</td>
                                <td>150,000</td>
                                <td>John Smith</td>
                                <td><span class="badge bg-danger">No</span></td>
                                <td>-</td>
                                <td><span class="badge bg-success">Completed</span></td>
                                
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>13-02-2025</td>
                                <td>15:00</td>
                                <td>Acrylic Nails</td>
                                <td>120,000</td>
                                <td>Jane Doe</td>
                                <td><span class="badge bg-success">Yes</span></td>
                                <td>
                                    Worker C: 50,000
                                </td>
                                <td><span class="badge bg-warning">Pending</span></td>
                                
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end row -->

<div class="row" id="liquidationsTables">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Workers Earnings ( From Matrix )</h4>
                <div class="table-responsive">
                    <table class="table table-hover table-centered table-nowrap mb-0">
                        <thead class="liquidation-table">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Employee Name</th>
                                <th scope="col">Type</th>
                                <th scope="col">Total Income</th>
                                <th scope="col">Company Earnings (60%)</th>
                                <th scope="col">Employee Earnings (40%)</th>
                                <th scope="col" colspan="2">Action</th>
                            </tr>
                        </thead>
                        <tbody id="liquidation-g">
                            <tr>
                                <th scope="row">1</th>
                                <td>
                                    <div>
                                        <img src="assets/images/profile.png" alt="" class="avatar-xs rounded-circle me-2">
                                        Philip Smead
                                    </div>
                                </td>
                                <td>Worker</td>
                                <td><span class="badge bg-success">800.000UGX</span></td>
                                <td><span class="badge bg-warning">480.000 UGX</span></td>
                                <td><span class="badge bg-primary">320.000 UGX</span></td>
                                <td>
                                    <button class="btn btn-primary btn-sm" id="openLiquidationModal">
                                        <i class="ti-wallet"></i> Liquidate
                                    </button>
                                    <!-- <a href="#" class="btn btn-primary btn-sm">
                                        <i class="ti-wallet"></i> Liquidate
                                    </a> -->
                                </td>
                            </tr>

                            <tr>
                                <th scope="row">2</th>
                                <td>
                                    <div>
                                        <img src="assets/images/profile.png" alt="" class="avatar-xs rounded-circle me-2">
                                        Brent Shipley
                                    </div>
                                </td>
                                <td>Worker</td>
                                <td><span class="badge bg-success">800.000UGX</span></td>
                                <td><span class="badge bg-warning">480.000 UGX</span></td>
                                <td><span class="badge bg-primary">320.000 UGX</span></td>
                                <td>
                                    <a href="#" class="btn btn-primary btn-sm">
                                        <i class="ti-wallet"></i> Liquidate
                                    </a>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row">3</th>
                                <td>
                                    <div>
                                        <img src="assets/images/profile.png" alt="" class="avatar-xs rounded-circle me-2">
                                        Robert Sitton
                                    </div>
                                </td>
                                <td>Worker</td>
                                <td><span class="badge bg-success">800.000UGX</span></td>
                                <td><span class="badge bg-warning">480.000 UGX</span></td>
                                <td><span class="badge bg-primary">320.000 UGX</span></td>
                                <td>
                                    <a href="#" class="btn btn-primary btn-sm">
                                        <i class="ti-wallet"></i> Liquidate
                                    </a>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row">4</th>
                                <td>
                                    <div>
                                        <img src="assets/images/profile.png" alt="" class="avatar-xs rounded-circle me-2">
                                        Alberto Jackson
                                    </div>
                                </td>
                                <td>Worker</td>
                                <td><span class="badge bg-success">800.000UGX</span></td>
                                <td><span class="badge bg-warning">480.000 UGX</span></td>
                                <td><span class="badge bg-primary">320.000 UGX</span></td>
                                <td>
                                    <a href="#" class="btn btn-primary btn-sm">
                                        <i class="ti-wallet"></i> Liquidate
                                    </a>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row">5</th>
                                <td>
                                    <div>
                                        <img src="assets/images/profile.png" alt="" class="avatar-xs rounded-circle me-2">
                                        David Sanchez
                                    </div>
                                </td>
                                <td>Worker</td>
                                <td><span class="badge bg-success">800.000UGX</span></td>
                                <td><span class="badge bg-warning">480.000 UGX</span></td>
                                <td><span class="badge bg-primary">320.000 UGX</span></td>
                                <td>
                                    <a href="#" class="btn btn-primary btn-sm">
                                        <i class="ti-wallet"></i> Liquidate
                                    </a>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row">6</th>
                                <td>
                                    <div>
                                        <img src="assets/images/profile.png" alt="" class="avatar-xs rounded-circle me-2">
                                        Philip Smead
                                    </div>
                                </td>
                                <td>Worker</td>
                                <td><span class="badge bg-success">800.000UGX</span></td>
                                <td><span class="badge bg-warning">480.000 UGX</span></td>
                                <td><span class="badge bg-primary">320.000 UGX</span></td>
                                <td>
                                    <a href="#" class="btn btn-primary btn-sm">
                                        <i class="ti-wallet"></i> Liquidate
                                    </a>
                                </td>
                            </tr>
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
    
</div>
<!-- end row -->

<!-- Liquidation Modal -->
  <div class="modal fade" id="liquidationModal" tabindex="-1" aria-labelledby="liquidationModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-half modal-dialog-centered">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="liquidationModalLabel">Employee Liquidation
                  </h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <form id="liquidationForm">
                      <div class="mb-3">
                          <label for="workerName" class="form-label">Worker Name
                          </label>
                          <input type="text" class="form-control" id="workerName" value="Philip Smead" readonly>
                      </div>

                      <div class="mb-3">
                          <label for="availableAmount" class="form-label">Available Amount
                          </label>
                          <input type="text" class="form-control" id="availableAmount" value="$40.00" readonly>
                      </div>

                      <div class="mb-3">
                          <label for="liquidationAmount" class="form-label">Amount to Liquidate <span class="text-danger">*</span>
                          </label>
                          <input type="number" class="form-control" id="liquidationAmount" placeholder="Enter amount" step="0.01" min="0" max="40" required>
                          <small class="text-muted">Maximum: </small>
                      </div>


                      <div class="mb-3">
                          <label for="paymentMethod" class="form-label">Payment Method <span class="text-danger">*</span>
                          </label>
                          <select class="form-select" id="paymentMethod" required>
                              <option value="">Select payment method</option>
                              <option value="bank_transfer">Bank Transfer</option>
                              <option value="cash">Cash</option>
                              <option value="check">Check</option>
                              <option value="mobile_money">Mobile Money</option>
                          </select>
                      </div>
                      <div class="mb-3">
                          <label for="liquidationDate" class="form-label">Liquidation Date <span class="text-danger">*</span>
                          </label>
                          <input type="date" class="form-control" id="liquidationDate" required>
                      </div>

                      <div class="mb-3">
                          <label for="description" class="form-label">
                              Description / Loquidation reason
                          </label>
                          <textarea class="form-control" id="description" rows="3" placeholder="Enter any additional notes or description"></textarea>
                      </div>

                      <div class="alert alert-info mb-0" role="alert">
                          <strong>Note:</strong> Once liquidated, this amount will be marked as paid and deducted from the employee's available earnings.
                      </div>
                  </form>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                      <i class="fas fa-times me-1"></i>Cancel
                  </button>
                  <button type="button" class="btn btn-primary" id="submitLiquidation">
                      <i class="fas fa-check me-1"></i>Process Liquidation
                  </button>
              </div>
          </div>
      </div>
  </div>