@extends('layout.master')

@push('plugin-styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<style>
  /* General Card Styling */
  .card {
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-10px);
    background-color: white;
    padding: 24px;
    border-radius: 12px;
  }
  .card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.card-hover:hover {
  transform: scale(1.00);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

  .btn:hover {
    background-color: #514ee7 !important;
    color: #ffffff !important;
  }
  /* Align the h6 and button to the top */
  .card-body-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
  }

  /* Radio Buttons */
  .btn-group {
    flex-wrap: wrap;
  }

  .btn-group .btn {
    margin: 4px 2px;
  }
  .badge {
      display: inline-block;
      width: 115px;
      text-align: center;
    }
    .table td{
          font-size: 15px; 
          padding: 8px; 
      }

  /* Mobile Responsive Fix */
  @media (max-width: 576px) {
    .btn-outline-warning,
    .btn-outline-info {
      font-size: 14px;
    }
  }
</style>
<style>
/* Custom Card Styling */
.card-body-custom {
  display: flex;
  align-items: center;  /* Align items vertically center */
  justify-content: flex-start; /* Align items to the left */
  gap: 12px; /* Space between the icon and the title */
}

/* Adjust the icon size */
.icon-custom {
  font-size: 24px; /* Set a similar size to the header */
}

/* Card Header Styling */
.card-header-custom {
  font-size: 20px; /* Set a similar size to the icon */
  font-weight: bold;
  margin: 0; /* Remove margin to keep spacing tight */
}

/* Adjust the progress bar for each card */
.progress-bar-wrapper-custom {
  width: 100%;
  background-color: #f1f1f1;
  height: 8px;
  border-radius: 5px;
  margin-top: 12px;
}

/* Progress bar inside */
.progress-bar-inner-custom {
  height: 100%;
  border-radius: 5px;
}

/* Optional: Color scheme for progress bar */
.progress-bar-in-progress {
  background-color: #007bff; /* Blue */
}

.progress-bar-under-review {
  background-color: #ffc107; /* Yellow */
}

.progress-bar-approval-pending {
  background-color: #fd7e14; /* Orange */
}

.progress-bar-approved {
  background-color: #28a745; /* Green */
}

/* Card Body Styling */
.card-body-custom p {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
}
</style>


@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
  <div>
    <h4 class="mb-3 fs-3 hw-bold mb-md-0">Summary</h4>
  </div>
  <div>
    <button class="btn btn-outline-primary btn-sm d-flex align-items-center" data-bs-toggle="offcanvas" data-bs-target="#filterModal">
      <i class="mdi mdi-filter" style="font-size: 16px; margin-right: 8px;"></i> Filter Work Status 
    </button>
  </div>
</div>
<div class="row g-4">
  
  <!-- In Progress Card -->
  <div class="col-lg-3 col-md-6">
    <div class="card bg-white shadow-lg card-hover position-relative" data-bs-toggle="modal" data-bs-target="#progressModal">
      <div class="card-body-custom">
        <i class="fas fa-spinner text-blue-500 icon-custom"></i>
        <h5 class="card-header-custom">In Progress</h5>
      </div>
      <div class="progress-bar-wrapper-custom">
        <div class="progress-bar-inner-custom progress-bar-in-progress" style="width: 30%;"></div>
      </div>
      <p class="card-body-custom">30 of 100 tasks completed</p>
      <a href="#" class="position-absolute bottom-0 end-0 p-2 text-primary text-small" style="font-size: 12px;">View Detail</a>
    </div>
  </div>

  <!-- Under Review Card -->
  <div class="col-lg-3 col-md-6">
    <div class="card bg-white shadow-lg card-hover position-relative" data-bs-toggle="modal" data-bs-target="#progressModal">
      <div class="card-body-custom">
        <i class="fas fa-search text-yellow-500 icon-custom"></i>
        <h5 class="card-header-custom">Under Review</h5>
      </div>
      <div class="progress-bar-wrapper-custom">
        <div class="progress-bar-inner-custom progress-bar-under-review" style="width: 50%;"></div>
      </div>
      <p class="card-body-custom">50 of 100 tasks reviewed</p>
      <a href="#" class="position-absolute bottom-0 end-0 p-2 text-primary text-small" style="font-size: 12px;">View Detail</a>
    </div>
  </div>

  <!-- Approval Pending Card -->
  <div class="col-lg-3 col-md-6">
    <div class="card bg-white shadow-lg card-hover position-relative" data-bs-toggle="modal" data-bs-target="#progressModal">
      <div class="card-body-custom">
        <i class="fas fa-hourglass-half text-orange-500 icon-custom"></i>
        <h5 class="card-header-custom">Approval Pending</h5>
      </div>
      <div class="progress-bar-wrapper-custom">
        <div class="progress-bar-inner-custom progress-bar-approval-pending" style="width: 20%;"></div>
      </div>
      <p class="card-body-custom">20 of 100 tasks pending approval</p>
      <a href="#" class="position-absolute bottom-0 end-0 p-2 text-primary text-small" style="font-size: 12px;">View Detail</a>
    </div>
  </div>

  <!-- Approved Card -->
  <div class="col-lg-3 col-md-6">
    <div class="card bg-white shadow-lg card-hover position-relative" data-bs-toggle="modal" data-bs-target="#progressModal">
      <div class="card-body-custom">
        <i class="fas fa-check-circle text-green-500 icon-custom"></i>
        <h5 class="card-header-custom">Approved</h5>
      </div>
      <div class="progress-bar-wrapper-custom">
        <div class="progress-bar-inner-custom progress-bar-approved" style="width: 80%;"></div>
      </div>
      <p class="card-body-custom">80 of 100 tasks approved</p>
      <a href="#" class="position-absolute bottom-0 end-0 p-2 text-primary text-small" style="font-size: 12px;">View Detail</a>
    </div>
  </div>
</div>



<!-- Modal -->
<div class="modal fade" id="progressModal" tabindex="-1" aria-labelledby="progressModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="progressModalLabel">Work Order Status</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted mb-3">The list of crane maintenance orders status</p>

        <!-- Table -->
        <div class="table-responsive pt-3">
          <table id="dataTableExample" class="table table-bordered table-hover table-sm">
            <thead>
              <tr>
                <th>Maintenance ID</th>
                <th>Service Type</th>
                <th>Vendor Name</th>
                <th>Location</th>
                <th style="text-align: center;">Action</th>
              </tr>
            </thead>
            <tbody>
              <tr data-progress="Approved">
                <td>CRM001</td>
                <td>Crane Repair</td>
                <td>Technic Crane Co.</td>
                <td>Kuala Lumpur</td>
                <td class="text-center">
                  <i class="mdi mdi-tools" style="font-size: 20px; color: #000; cursor: pointer;"></i>
                </td>
              </tr>
              <tr data-progress="Approved">
                <td>CRM002</td>
                <td>Crane Maintenance</td>
                <td>HeavyMach Solutions</td>
                <td>Penang</td>
                <td class="text-center">
                  <i class="mdi mdi-tools" style="font-size: 20px; color: #000; cursor: pointer;"></i>
                </td>
              </tr>
              <tr data-progress="In Progress">
                <td>CRM003</td>
                <td>Crane Inspection</td>
                <td>Precision Equipments</td>
                <td>Johor Bahru</td>
                <td class="text-center">
                  <i class="mdi mdi-tools" style="font-size: 20px; color: #000; cursor: pointer;"></i>
                </td>
              </tr>
              <tr data-progress="In Progress">
                <td>CRM004</td>
                <td>Crane Overhaul</td>
                <td>Crane Masters</td>
                <td>Shah Alam</td>
                <td class="text-center">
                  <i class="mdi mdi-tools" style="font-size: 20px; color: #000; cursor: pointer;"></i>
                </td>
              </tr>
              <tr data-progress="Review">
                <td>CRM005</td>
                <td>Crane Calibration</td>
                <td>Precision Equipments</td>
                <td>Johor Bahru</td>
                <td class="text-center">
                  <i class="mdi mdi-tools" style="font-size: 20px; color: #000; cursor: pointer;"></i>
                </td>
              </tr>
              <tr data-progress="Review">
                <td>CRM006</td>
                <td>Crane Certification</td>
                <td>SafetyCert Services</td>
                <td>Klang</td>
                <td class="text-center">
                  <i class="mdi mdi-tools" style="font-size: 20px; color: #000; cursor: pointer;"></i>
                </td>
              </tr>
              <tr data-progress="Approval Pending">
                <td>CRM007</td>
                <td>Crane Repair</td>
                <td>QuickFix Cranes</td>
                <td>Kota Bharu</td>
                <td class="text-center">
                  <i class="mdi mdi-tools" style="font-size: 20px; color: #000; cursor: pointer;"></i>
                </td>
              </tr>
              <tr data-progress="Approval Pending">
                <td>CRM008</td>
                <td>Crane Maintenance</td>
                <td>HeavyMach Solutions</td>
                <td>Penang</td>
                <td class="text-center">
                  <i class="mdi mdi-tools" style="font-size: 20px; color: #000; cursor: pointer;"></i>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row mt-4">
  <!-- Status Statistic Card -->
  <div class="col-xl-6 grid-margin stretch-card">
    <div class="card" style="box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3); transform: translateY(-10px); background-color: white; padding: 16px 24px; border-radius: 12px;">
      <div class="card-body">
        <!-- Header Row -->
        <div class="d-flex justify-content-between align-items-center mb-2">
          <h6 class="card-title mb-0">Status Statistic</h6>
          <button class="btn btn-outline-primary btn-sm d-flex align-items-center" data-bs-toggle="offcanvas" data-bs-target="#filterModal1">
            <i class="mdi mdi-filter" style="font-size: 16px; margin-right: 8px;"></i> Filter
          </button>
        </div>
        <!-- Chart -->
        <div class="flot-chart-wrapper">
          <div class="flot-chart" id="flotBar"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Priority Work Orders Card -->
  <div class="col-xl-6 grid-margin stretch-card">
    <div class="card" style="box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3); transform: translateY(-10px); background-color: white; padding: 5px 24px; border-radius: 12px;">
      <div class="card-body">
        <!-- Header Row -->
        <div class="d-flex justify-content-between align-items-center mb-2">
          <h6 class="card-title mb-0">Priority Work Orders</h6>
          <button class="btn btn-outline-primary btn-sm d-flex align-items-center" data-bs-toggle="offcanvas" data-bs-target="#filterModal2">
            <i class="mdi mdi-filter" style="font-size: 16px; margin-right: 8px;"></i> Filter
          </button>
        </div>
        <!-- Chart -->
        <div class="flot-chart-wrapper">
          <div class="flot-chart" id="flotPie"></div>
        </div>
      </div>
    </div>
  </div>
</div>



<!-- Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="filterModal" aria-labelledby="filterModalLabel">
  <div class="offcanvas-header" style="background-color: #d1242c; color: white;">
    <h5 class="offcanvas-title" id="filterModalLabel">Filter Options</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="text-muted">Please select the filter options before applying.</p>
    <form>
      <div class="mb-4 p-3 border rounded">
        <label for="planning-plant" class="form-label fw-bold text-danger">Planning Plant</label>
        <select class="form-select" id="planning-plant">
          <option selected disabled>Choose Planning Plant</option>
          <option value="plant-001">Plant 001 - Kuala Lumpur</option>
          <option value="plant-002">Plant 002 - Penang</option>
          <option value="plant-003">Plant 003 - Johor Bahru</option>
        </select>
      </div>
      <div class="mb-4 p-3 border rounded">
        <label for="maintenance-plant" class="form-label fw-bold text-danger">Maintenance Plant</label>
        <select class="form-select" id="maintenance-plant">
          <option selected disabled>Choose Maintenance Plant</option>
          <option value="maint-001">Maintenance 001 - KL East</option>
          <option value="maint-002">Maintenance 002 - Bayan Lepas</option>
          <option value="maint-003">Maintenance 003 - Pasir Gudang</option>
        </select>
      </div>

      <!-- Location -->
      <div class="mb-4 p-3 border rounded">
        <label for="location" class="form-label fw-bold text-danger">Location</label>
        <select class="form-select" id="location">
          <option selected disabled>Choose Location</option>
          <option value="location-kl">Kuala Lumpur</option>
          <option value="location-penang">Penang</option>
          <option value="location-johor">Johor Bahru</option>
        </select>
      </div>

      <!-- Equipment Type -->
      <div class="mb-4 p-3 border rounded">
        <label for="equipment-type" class="form-label fw-bold text-danger">Equipment Type</label>
        <select class="form-select" id="equipment-type">
          <option selected disabled>Choose Equipment Type</option>
          <option value="crane-mobile">Mobile Crane</option>
          <option value="crane-tower">Tower Crane</option>
          <option value="crane-overhead">Overhead Crane</option>
        </select>
      </div>

      <!-- Equipment Component -->
      <div class="mb-4 p-3 border rounded">
        <label for="equipment-component" class="form-label fw-bold text-danger">Equipment Component</label>
        <select class="form-select" id="equipment-component">
          <option selected disabled>Choose Equipment Component</option>
          <option value="component-hook">Hook</option>
          <option value="component-rope">Rope</option>
          <option value="component-boom">Boom</option>
          <option value="component-counterweight">Counterweight</option>
        </select>
      </div>

      <!-- Apply Button -->
      <div class="d-grid">
        <button type="submit" class="btn btn-primary">Apply Filters</button>
      </div>
    </form>
  </div>
</div>

@endsection

@push('custom-scripts')
<script>
  function filterProgress(status) {
    const rows = document.querySelectorAll('#dataTableExample tbody tr');
    rows.forEach(row => {
      const rowStatus = row.getAttribute('data-progress');
      row.style.display = (status === '' || rowStatus === status) ? '' : 'none';
    });
  }
</script>
@endpush

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.js') }}"></script>
  <script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.resize.js') }}"></script>
  <script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.pie.js') }}"></script>
  <script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.categories.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/jquery.flot.js') }}"></script>
@endpush