<style>
        .custom-table {
        width: 100%;
        border: 1px solid #000;
        direction: rtl;
      }
      .custom-table th,
      .custom-table td {
        border: 1px solid #000;
        padding: 5px;
        text-align: center;
      }
      .custom-table tr {
        border-style: solid !important;
       
      }
      .table-header {
        background-color: #f2f2f2;
      }
      .table-section {
        margin-bottom: 20px;
      }
      .ltr-input {
        direction: ltr;
      }
  </style>
 <!--start main wrapper-->
 <main class="main-wrapper">
    <div class="main-content">

      <div class="row">
        <div class="col-md-8 my-2">
          <h3 class="fmon">User Measurement</h3>
        </div>
       
      </div>
      <!-- <form class="row my-2">
        <div class="col-md-6 my-2">
            <label for="" class="clabel">Chest circumference</label>
            <input class="form-control formInput " type="text" name="" id="" placeholder="1/18">
        </div>
        <div class="col-md-6 my-2">
            <label for="" class="clabel">Neck circumference</label>
            <input class="form-control formInput " type="text" name="" id="" placeholder="2/18">
        </div>
        <div class="col-md-6 my-2">
            <label for="" class="clabel">Shoulder width</label>
            <input class="form-control formInput " type="text" name="" id="" placeholder="3/18">
        </div>
        <div class="col-md-6 my-2">
            <label for="" class="clabel">Arm length</label>
            <input class="form-control formInput " type="text" name="" id="" placeholder="4/18">
        </div>
        <div class="col-md-6 my-2">
            <label for="" class="clabel">Bicep circumference</label>
            <input class="form-control formInput " type="text" name="" id="" placeholder="5/18">
        </div>
        <div class="col-md-6 my-2">
            <label for="" class="clabel">Wrist circumference</label>
            <input class="form-control formInput " type="text" name="" id="" placeholder="6/18">
        </div>
        <div class="col-md-6 my-2">
            <label for="" class="clabel">Back length</label>
            <input class="form-control formInput " type="text" name="" id="" placeholder="7/18">
        </div>
        <div class="col-md-6 my-2">
            <label for="" class="clabel">Stomach circumference</label>
            <input class="form-control formInput " type="text" name="" id="" placeholder="8/18">
        </div>
        <div class="col-md-12 my-2 d-flex justify-content-center">
            <button class="btn setBtn px-5 py-3">Save</button>
         </div>
      </form> -->

      <!-- <div class="table-section table-responsive">
        <table class="custom-table ">
          <tr class="table-header">
            <th>رقم</th>
            <th>الاسم</th>
            <th>عدد</th>
            <th>طول</th>
            <th>كتف</th>
            <th>كم بزمه</th>
            <th>كم</th>
            <th>صدر</th>
            <th>قوله</th>
            <th>السعر</th>
          </tr>
          <tr>
            <td rowspan="4" style="vertical-align: middle"></td>
            <td>
              <input type="text" class="form-control ltr-input" name="name" />
            </td>
            <td>
              <input
                type="number"
                class="form-control ltr-input"
                name="number"
              />
            </td>
            <td>
              <input
                type="number"
                class="form-control ltr-input"
                name="length"
              />
              <input
                type="number"
                class="form-control ltr-input mt-1"
                name="length"
              />
            </td>
            <td>
              <input
                type="number"
                class="form-control ltr-input"
                name="shoulder"
              />
            </td>
            <td>
              <input
                type="number"
                class="form-control ltr-input"
                name="sleeve"
              />
              <input
                type="number"
                class="form-control ltr-input mt-1"
                name="sleeve"
              />
            </td>
            <td>
              <input
                type="number"
                class="form-control ltr-input"
                name="sleeve"
              />
              <input
                type="number"
                class="form-control ltr-input mt-1"
                name="sleeve"
              />
            </td>
            <td>
              <input
                type="number"
                class="form-control ltr-input"
                name="chest"
              />
              <input
                type="number"
                class="form-control ltr-input mt-1"
                name="chest"
              />
            </td>
            <td>
              <input type="text" class="form-control ltr-input" name="phrase" />
            </td>
            <td>
              <input
                type="number"
                class="form-control ltr-input"
                name="price"
              />
            </td>
          </tr>
          <tr class="table-header">
            <th colspan="8"></th>
            <th>الباقي</th>
          </tr>
          <tr>
            <td colspan="8"></td>
            <td>
              <input
                type="number"
                class="form-control ltr-input"
                name="balance"
              />
            </td>
          </tr>
          <tr class="table-header">
            <th colspan="8"></th>
            <th>الدفع</th>
          </tr>
          <tr>
            <td colspan="9"></td>
            <td>
              <input
                type="number"
                class="form-control ltr-input"
                name="payment"
              />
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <table class="custom-table">
                <tr>
                  <th>ادكمه</th>
                  <th>سعودي مخفي</th>
                  <th>اماراتي</th>
                  <th>تطريز</th>
                  <th> طربوش متحرك</th>
                  <th>رقم جيب</th>
                </tr>
                <tr>
                  <th>لاادكمه</th>
                  <td>بخيه اولب</td>
                  <td>بحريني</td>
                  <td>جيب كيس</td>
                  <td>سحاب</td>
                  <td>جيب سينة</td>
                </tr>
                <tr>
                  <th>يقه دار</th>
                  <td>سادة كويتي</td>
                  <td>شد</td>
                  <td>جيب كويتي</td>
                  <td>*****</td>
                  <td>جلو</td>
                </tr>
                <tr>
                  <th>عبادي</th>
                  <td>مخفي كويتي</td>
                  <td>بات دار</td>
                  <td>ابره</td>
                  <td>TT</td>
                  <td>بائين</td>
                </tr>
             
              </table>
            </td>
          </tr>
        </table>
      </div> -->
      <?php
$product = $order['productsData'][0] ?? [];
$size = $sizeData ?? []; 
// print_r($size);// Ensure you pass $sizeDetails based on sizeId from controller
?>
<div class="table-section table-responsive">
  <table class="custom-table ">
    <tr class="table-header">
      <th>رقم</th>
      <th>الاسم</th>
      <th>عدد</th>
      <th>طول</th>
      <th>كتف</th>
      <th>كم بزمه</th>
      <th>كم</th>
      <th>صدر</th>
      <th>قوله</th>
      <th>السعر</th>
    </tr>
    <tr>
      <td rowspan="4" style="vertical-align: middle"><?= $product['id'] ?? '' ?></td>
      <td>
        <input type="text" class="form-control ltr-input" name="name" value="<?= $size['name'] ?? '' ?>" />
      </td>
      <td>
        <input type="number" class="form-control ltr-input" name="number" value="<?= $product['totalQuantity'] ?? '' ?>" />
      </td>
      <td>
        <input type="number" class="form-control ltr-input" name="length" value="<?= $size['lengthFront'] ?? '' ?>" />
        <input type="number" class="form-control ltr-input mt-1" name="length" value="<?= $size['lengthBack'] ?? '' ?>" />
      </td>
      <td>
        <input type="number" class="form-control ltr-input" name="shoulder" value="<?= $size['shoulder'] ?? '' ?>" />
      </td>
      <td>
        <input type="number" class="form-control ltr-input" name="sleeve" value="<?= $size['bzmaSleeveLeft'] ?? '' ?>" />
        <input type="number" class="form-control ltr-input mt-1" name="sleeve" value="<?= $size['bzmaSleeveRight'] ?? '' ?>" />
      </td>
      <td>
        <input type="number" class="form-control ltr-input" name="sleeve" value="<?= $size['sleeveLeft'] ?? '' ?>" />
        <input type="number" class="form-control ltr-input mt-1" name="sleeve" value="<?= $size['sleeveRight'] ?? '' ?>" />
      </td>
      <td>
        <input type="number" class="form-control ltr-input" name="chest" value="<?= $size['chestTop'] ?? '' ?>" />
        <input type="number" class="form-control ltr-input mt-1" name="chest" value="<?= $size['chestBottom'] ?? '' ?>" />
      </td>
      <td>
        <input type="text" class="form-control ltr-input" name="phrase" value="<?= $size['phrase'] ?? '' ?>" />
      </td>
      <td>
        <input type="number" class="form-control ltr-input" name="price" value="<?= $product['price'] ?? '' ?>" />
      </td>
    </tr>
    <tr class="table-header">
      <th colspan="8"></th>
      <th>الباقي</th>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td>
        <input type="number" class="form-control ltr-input" name="balance" value="" />
      </td>
    </tr>
    <tr class="table-header">
      <th colspan="8"></th>
      <th>الدفع</th>
    </tr>
    <tr>
      <td colspan="9"></td>
      <td>
        <input type="number" class="form-control ltr-input" name="payment" value="" />
      </td>
    </tr>
    <tr>
      <td colspan="8">
        <table class="custom-table">
          <tr>
            <th>ادكمه</th>
            <th>سعودي مخفي</th>
            <th>اماراتي</th>
            <th>تطريز</th>
            <th> طربوش متحرك</th>
            <th>رقم جيب</th>
          </tr>
          <tr>
            <th>لاادكمه</th>
            <td>بخيه اولب</td>
            <td>بحريني</td>
            <td>جيب كيس</td>
            <td>سحاب</td>
            <td>جيب سينة</td>
          </tr>
          <tr>
            <th>يقه دار</th>
            <td>سادة كويتي</td>
            <td>شد</td>
            <td>جيب كويتي</td>
            <td>*****</td>
            <td>جلو</td>
          </tr>
          <tr>
            <th>عبادي</th>
            <td>مخفي كويتي</td>
            <td>بات دار</td>
            <td>ابره</td>
            <td>TT</td>
            <td>بائين</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>


   
  </main>
  <!--end main wrapper-->


  <!--start overlay-->
  <div class="overlay btn-toggle"></div>
  <!--end overlay-->