<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;
  }

  .select2-container .select2-search--inline .select2-search__field {
    min-height: 27px;
    display: flex;
    align-items: center;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: #444;
  }


  .chart-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .chart-wrapper {
    flex: 1;
    min-width: 300px;
  }

  .search-bg {
    background:
      linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
      url('./assets/img/bg-banner2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
    padding: 20px;
    color: white;
  }

 
  
  

  .hsn-header-yellow {
    background-color: #FFF2CC !important;
  }

  .hsn-header-blue {
    background-color: #DEEBF7 !important;
  }

  .hsn-header-green {
    background-color: #E2F0D9 !important;
  }

  .hsn-header-white {
    background-color: #ffffff !important;
  }

  #btnreset {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
    padding: 0.5rem 2rem;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  #btnreset:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
  }
   
  .chart-card table td:nth-child(3) {
    text-align: left !important; /* Force left alignment */
    padding-left: 8px;           /* Small padding for readability */
  }
</style>
<main class="main">
  <!-- Hero Section -->
  <section id="hero" class="hero section pt-0">
    <div class="search-bg">
      <div class="container">
      
     
        <div class="mb-2 mt-3 d-flex justify-content-center">
          <!-- Your Search Form -->
          <div class="col-md-7">
                  

            <h5 class="fs-5 fw-bold text-dark-blue">Top 25 HSN codes by values.</h5>
          
            <form id="hsn-code" action="top-25-hsn-code.php" method="post">                        
              <div class="row gy-2 align-items-center">
                <!-- HSN Code -->
                <div class="col-md-6">   
                  <label class="text-dark-blue  fw-bold" for="sel_chapeter">Select Chapter:</label>
                  <select id="sel_chapeter" name="chapeter_code" class="form-select filter required" required>
                    <?=getHSNCodeChapter($chaptercode)?>
                  </select>
                </div>    


                <div class="col-md-6">
                  <label class="text-dark-blue  fw-bold" for="to_country">Import in:</label>
                  <select id="to_country" name="to_country" class="form-select filter required" required>
                    <?=getToCountry($to_country) ?>
                  </select>
                </div>





              </div>

              <div class="col-md-12 text-end ms-auto mt-3">
                <button type="submit" name="btnsearch" id="btnsearch" class="btn btn-primary me-0 me-sm-2 mx-1">
                  Search
                  <img src="<?= DOC_ROOT ?>assets/img/search.png" alt="Search"
                    style="height: 18px; vertical-align: middle; margin-left: 6px;">
                </button>

                <button type="reset" name="btnreset" id="btnreset" class="btn btn-secondary me-0 me-sm-2 mx-1">
                  Reset
                  <img src="<?= DOC_ROOT ?>assets/img/reset.png" alt="Reset"
                    style="height: 18px; vertical-align: middle; margin-left: 6px;">
                </button>


              </div>


            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="container py-4">
      <div class="row">

        <div class="col-md-12">



          <?php  if($searchdatacount > 0){  ?>

          <h6 class="fs-5 fw-bold text-dark-blue">

            Top 25 HSN Codes for Imports to <?= $to_country ?> in Chapter : <?= $chaptercode ?>


          </h6>


          <div class="chart-container">
           <div class="chart-wrapper chart-card">  
                  <canvas id="Top25HSNCodelineChart"></canvas>
                <p class="text-center mt-3 fw-bold"></p>
 
              
                </div>  

          </div>  
         

          <div class="chart-card mb-4">


          <div class="table-responsive">
                <table class="table table-bordered table-sm text-center align-middle small table-hover"
                  style="font-size: 14px;">
                  <thead>
                    
                   <?= $rowheader?>
                  
                  </thead>
                  <tbody>
                    <tr class="table-secondary text-center fw-bold">
                      <td colspan="4" class="p-0"></td>
                      <td  colspan="7" class="p-0">Unit: Thousand US Dollars</td>
                    </tr>
                     <?=$rows?>
                  </tbody>
                </table>
              </div>
         

          </div>

          <?php  }else if(isset($searchdatacount))  { ?>
          <h6 class="fs-5 fw-bold text-dark-blue">
            <?=$searchText?>
          </h6>


          <h1> No records found for the selected filter.</h1>
          <?php  } ?>



        </div>
      </div>
    </div>
  </section>
</main>