<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  <link href="http://fonts.cdnfonts.com/css/roboto" rel="stylesheet">


  <title>Калькулятор</title>



  <style>
body {
  background: #e9e9e9;
  font-family: Roboto;
}

#calculator-form-wrap {
  display:flex;
  justify-content: center;

}


#calculator-form {
  background: #ffffff;
  padding:15px 35px;
  border-radius: 5px;
  text-align: center;

}

.calculate-value-input, .calculate-cost-input {
  padding: 7px 12px;
  border: 1px solid #cacaca;
}

.calculate-value-input option, .calculate-cost-input option {
  padding: 7px 12px;
  font-size: 16px;
}

.result-right {
  font-size:38px;
}

.measuring {
  font-size: 15px;
    display: flex;
    justify-content: center;
}







    </style>
</head>

<body>




  <br>

  <p id="message">

  </p>


  <?php
  $id = '1Ev0ja9xNGRcivu3BrhhVuhaoGADfRV8sI4Nk-VBWSok'; // id Google таблицы
  $gid = '0';
  $rangeLength = 'A:A';
  $rangeWidth = 'B:B';
  $rangeHeight = 'C:C';
  $rangeQuantity = 'D:E';

  $csvLength = file_get_contents('https://docs.google.com/spreadsheets/d/' . $id . '/export?format=csv&gid=' . $gid . '&range=' . $rangeLength);
  $csvWidth = file_get_contents('https://docs.google.com/spreadsheets/d/' . $id . '/export?format=csv&gid=' . $gid . '&range=' . $rangeWidth);
  $csvHeight = file_get_contents('https://docs.google.com/spreadsheets/d/' . $id . '/export?format=csv&gid=' . $gid . '&range=' . $rangeHeight);
  $csvQuantity = file_get_contents('https://docs.google.com/spreadsheets/d/' . $id . '/export?format=csv&gid=' . $gid . '&range=' . $rangeQuantity);


  $csvLength = explode("\r\n", $csvLength);
  $csvWidth = explode("\r\n", $csvWidth);
  $csvHeight = explode("\r\n", $csvHeight);
  $csvQuantity = explode("\r\n", $csvQuantity);



  $arrayLength = array_map('str_getcsv', $csvLength);
  $arrayWidth = array_map('str_getcsv', $csvWidth);
  $arrayHeight = array_map('str_getcsv', $csvHeight);
  $arrayQuantity = array_map('str_getcsv', $csvQuantity);


  ?>



<div id="calculator-form-wrap">

  <form action="" id="calculator-form">

  <h1>Калькулятор объема и стоимости</h1>



  <br>


    <select name="length" id="length" class="calculate-value-input">
      <option selected disabled>Длина</option>
      <?php
      $counter = 0;
      foreach ($arrayLength as $key => $value) {
        if ($counter > 0) { ?>
          <option value='<?php echo $value[0] ?>'><?php echo $value[0] ?></option>
        <?php }
        $counter++;    ?>

      <?php } ?>
    </select>




    <select name="width" id="width" class="calculate-value-input">
      <option selected disabled>Ширина</option>

      <?php
      $counter = 0;
      foreach ($arrayWidth as $key => $value) {
        if ($counter > 0) { ?>
          <option value='<?php echo $value[0] ?>'><?php echo $value[0] ?></option>
        <?php }
        $counter++;    ?>

      <?php } ?>
    </select>




    <select name="height" id="height" class="calculate-value-input">
      <option selected disabled>Высота</option>

      <?php
      $counter = 0;
      foreach ($arrayHeight as $key => $value) {
        if ($counter > 0) { ?>
          <option value='<?php echo $value[0] ?>'><?php echo $value[0] ?></option>
        <?php }
        $counter++;    ?>

      <?php } ?>
    </select>



<br>
<br>
     <div id="result-value">
      &nbsp
      <br>
     &nbsp</div>
     



    <br>
    <br>


    <label for="quantity"></label>
    <select name="quantity" id="quantity" class="calculate-cost-input">
      <option selected disabled>Количество</option>

      <?php
      $counter = 0;
      foreach ($arrayQuantity as $key => $value) {
        if ($counter > 0) { ?>
          <option value='<?php echo $value[0] ?>' data-price="<?php echo $value[1] ?>" ><?php echo $value[0] ?></option>
        <?php }
        $counter++;    ?>

      <?php } ?>
    </select>






<br>
<br>
      &nbsp<div id="result-cost">
      &nbsp
      <br>
     &nbsp
      </div>
      



  </form>

  </div>

  <div style="display:flex; justify-content:center;">

<div style="background:#ffffff; padding: 40px; margin:50px 0px; width: 600px; color:#3b3b3b; line-height:170%;">
    <a href="https://docs.google.com/spreadsheets/d/1Ev0ja9xNGRcivu3BrhhVuhaoGADfRV8sI4Nk-VBWSok/edit#gid=0" target="_blank">Ссылка на файл</a> Google таблицы.
</div>

</div>

  <script type="text/javascript" src="calculator.js"></script>









</body>

</html>