<style>
  canvas {
    width: 100% !important;
    max-height: 300px;
  }

  .stat-item {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    text-align: center;
  }

  .stat-icon {
    font-size: 2rem;
    color: #0d6efd;
    margin-bottom: 10px;
  }

  .chart-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
  }
  .select2-container .select2-selection--single {
  height: 38px;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid #ced4da;
}

</style>
<main class="main">
  <!-- Hero Section -->
  <section id="hero" class="hero section">
    <div class="container py-4">
      <div class="text-center mb-5">
        <h2 class="fw-bold text-dark">2023 USA Synthetic Twine Import Dashboard</h2>
        <p class="text-muted">Imports by Country, Share %, Monthly Trends, and Growth</p>
      </div>
      <div class="chart-card mb-4">


        <!-- Your Search Form -->
        <form action="hsn-code.php" method="post" data-aos-delay="200">
          <div class="row gy-2 align-items-center">

              <!-- HSN Code -->
            <div class="col-md-2">
              <select name="hsn_code" class="form-select select2">
                <!-- <option value="">HSN Code</option> -->
                <?= $hsncodeoptions ?>         
                <!-- Add more as needed -->
              </select>           
            </div>        

            <!-- From Country -->
            <div class="col-md-2">
              <select name="from_country" class="form-select select2" required>
                <!-- <option value="">From Country</option> -->
                <?= $importfromoptions ?>
               
              </select>                      
            </div>                     
   
            <!-- To Country -->
            <div class="col-md-2">
              <select name="to_country" class="form-select select2" required>
                <!-- <option value="">To Country</option> -->
                  <?= $importtoptions ?>
              </select>
            </div>

             
  
            <!-- Search Input -->
            <div class="col-md-4">
              <div class="input-group">
                <span class="input-group-text bg-primary text-white"><i class="fas fa-search"></i></span>
                <input type="text" name="query" class="form-control" placeholder="Enter keywords...">
              </div>
            </div>

            <!-- Submit Button -->
            <div class="col-md-2">
              <button type="submit" name="btnsearch" class="btn btn-primary w-100">
                <i class="fas fa-search me-1"></i> Search
              </button>
            </div>

          </div>
        </form>

      </div>
      <div class="row">
        <!-- Left Column: Bar Chart + Table -->
        <div class="col-md-12">
          <div class="chart-card mb-4">
            <canvas id="barChart"></canvas>
            <div class="table-responsive">
              <table class="table table-bordered table-sm text-center align-middle small table-hover">
                <thead class="table-primary">
                  <tr>
                    <th rowspan="2" class="align-middle">Sr. No.</th>
                    <th rowspan="2" class="align-middle">HSN Product Code</th>
                    <th rowspan="2" class="align-middle">Product Label</th>
                    <th rowspan="2" class="align-middle">Product Images</th>
                    <!-- 2021 -->
                    <th>Import from World by USA</th>
                    <th>Import from India to USA</th>
                    <th rowspan="2" class="align-middle">India's share in 2021%</th>
                    <th>Import from China to USA</th>
                    <th rowspan="2" class="align-middle">China's share in 2021%</th>
                    <th>Import from Vietnam to USA</th>
                    <th rowspan="2" class="align-middle">Vietnam's share in 2021%</th>
                    <!-- 2022 -->
                    <th>Import from World by USA</th>
                    <th>Import from India to USA</th>
                    <th rowspan="2" class="align-middle">India's share in 2022%</th>
                    <th>Import from China to USA</th>
                    <th rowspan="2" class="align-middle">China's share in 2022%</th>
                    <th>Import from Vietnam to USA</th>
                    <th rowspan="2" class="align-middle">Vietnam's share in 2022%</th>
                    <!-- 2023 -->
                    <th>Import from World by USA</th>
                    <th>Import from India to USA</th>
                    <th rowspan="2" class="align-middle">India's share in 2023%</th>
                    <th>Import from China to USA</th>
                    <th rowspan="2" class="align-middle">China's share in 2023%</th>
                    <th>Import from Vietnam to USA</th>
                    <th rowspan="2" class="align-middle">Vietnam's share in 2023%</th>
                  </tr>
                  <tr>
                    <!-- 2021 -->
                    <th>Value in US $ (2021)</th>
                    <th>Value in US $ (2021)</th>
                    <th>Value in US $ (2021)</th>
                    <th>Value in US $ (2021)</th>
                    <!-- 2022 -->
                    <th>Value in US $ (2022)</th>
                    <th>Value in US $ (2022)</th>
                    <th>Value in US $ (2022)</th>
                    <th>Value in US $ (2022)</th>
                    <!-- 2023 -->
                    <th>Value in US $ (2023)</th>
                    <th>Value in US $ (2023)</th>
                    <th>Value in US $ (2023)</th>
                    <th>Value in US $ (2023)</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>9001</td>
                    <td>Optical Fibres and Parts</td>
                    <td><img src="https://dubaiyellowpagesonline.com/userdata/companylogo/products/1751265159.webp"
                        class="img-fluid rounded" alt="Product" /></td>
                    <!-- 2021 -->
                    <td>3,066,232</td>
                    <td>1,250,000</td>
                    <td><b>40.8%</b></td>
                    <td>1,200,000</td>
                    <td><b>39.1%</b></td>
                    <td>350,000</td>
                    <td>11.4%</td>
                    <!-- 2022 -->
                    <td>4,250,000</td>
                    <td>1,750,000</td>
                    <td><b>41.2%</b></td>
                    <td>1,450,000</td>
                    <td><b>34.1%</b></td>
                    <td>750,000</td>
                    <td>17.6%</td>
                    <!-- 2023 -->
                    <td>5,500,000</td>
                    <td>2,250,000</td>
                    <td><b>40.9%</b></td>
                    <td>1,800,000</td>
                    <td><b>32.7%</b></td>
                    <td>1,100,000</td>
                    <td>20.0%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>