<link rel="stylesheet" href="<?= base_url() ?>assets/libs/nice-select2/nice-select2.css">

<script src="<?= base_url() ?>assets/libs/nice-select2/nice-select2.js"></script>


      <div class="row w-100 mx-0 px-0">
          <div class="col-12 px-0 mx-0">
              <div class="alert alert-danger px-0 mx-0" id="danger_information" role="alert" style="display: none;">
                    
              </div>
          </div>
          <div class="col-12 col-lg-5 px-0 mx-0">
              <div class="card shadow-md px-0 mx-0 ">
                  <h5 class="card-header">Machine Selection</h5>
                  <div class="card-body">
                    <form>
                        <div class=" w-100 ">
                            <label style="padding-left: 2.5px; font-size: 14px;">Line Group</label>
                            <div class="mt-2">
                                <select id="lineSelect" class="mt-n4 w-100 ">
                                    <option value="" disabled selected>Select the line</option>
                                    <?php if(!empty($result)): ?>
                                        <?php foreach ($result as $line) :?>
                                        <option data-machine-parse="<?= base64_encode(json_encode($line->machines)) ?>" value="<?= $line->id ?>"><?= $line->name ?></option>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </select>
                            </div>
                        </div>
                        <div class="mt-4 w-100 ">
                            <label style="padding-left: 2.5px; font-size: 14px;">Machine Name</label>
                            <div class="mt-2">
                                <select id="machineSelect" class="mt-n4 w-100 ">
                                    <option value="" disabled selected>Select the machine</option>
                                </select>
                            </div>
                        </div>
                        <div class="mt-5 d-flex w-100 justify-content-between">
                            <span>Machine Name : </span>
                            <span class="fw-bold label-machine-name">-</span>
                        </div>
                        <div class="mb-4 mt-3 d-flex w-100 justify-content-between ">
                            <span>Machine No : </span>
                            <span class="fw-bold label-machine-no">-</span>
                        </div>
                        <div class=" w-100">
                            <label style="padding-left: 2.5px; font-size: 14px;">Operation Date</label>
                              <input class="form-control" type="date" name="production_date" />
                        </div>
                        <div class="d-flex mt-3">
                            <button class="btn btn-primary me-2" id="btn_show_data">Show Data</button>
                            <button class="btn btn-outline-primary" id="reset_filter">Clear</button>
                        </div>
                    </form>
                  </div>
              </div>
          </div>
          <div class="col-12 col-lg-7 mx-0 ps-lg-4 px-0 pt-3 pt-lg-0">
            <div class="card shadow-md px-0 mx-0 card-information-machine">
                <h5 class="card-header">Machine Information</h5>
                <div class="card-body">
                    <div class="row mx-0 px-0 w-100">
                        <div class="col-12 col-lg-7 px-0 mt-n4 ">
                            <div class="d-flex w-100 justify-content-between mt-4 mb-2">
                                <span>Operation Date : </span>
                                <span class="fw-bold label-operation-date">-</span>
                            </div>
                            <div class="d-flex w-100 justify-content-between mb-2">
                                <span>Total Operation Time (Hours) : </span>
                                <span class="fw-bold label-total-operation-time">-</span>
                            </div>
                            <div class="d-flex w-100 justify-content-between mb-2">
                                <span>Operation Time Today (Hours) : </span>
                                <span class="fw-bold label-total-operation-time-today">-</span>
                            </div>
                            <div class="d-flex w-100 justify-content-between mb-2">
                                <span class="text-primary">Average Rpm (Today) : </span>
                                <span class="fw-bold label-average-rpm-today">-</span>
                            </div>
                            <div class="d-flex w-100 justify-content-between mb-2">
                                <span class="text-primary">Average Temperature (Today) : </span>
                                <span class="fw-bold label-average-temperature-today">-</span>
                            </div>
                            <div class="d-flex w-100 justify-content-between mb-2">
                                <span class="text-primary">Average Current (Today) : </span>
                                <span class="fw-bold label-average-current-today">-</span>
                            </div>
                            <div class="d-flex w-100 justify-content-between mb-2">
                                <span class="text-primary">Average Operation (Daily) : </span>
                                <span class="fw-bold label-average-operation-daily">-</span>
                            </div>
                            <?php if(session()->get('role_id')!=3||session()->get('role_id')!='3'): ?>
                                <div style="margin-top: 53px;">
                                    <h5 class="mt-n4 mb-0">Setting</h5> 
                                    <span>Setting Target Time</span>
                                    <div class="input-group mt-2">
                                        <input
                                          type="number"
                                          name="goal"
                                          class="form-control"
                                          placeholder="100"
                                          min="0"
                                          step="1"
                                          oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                                        />
                                        <span class="input-group-text">Hours</span>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                    <button class="btn btn-primary me-2" id="btn_save_target">Submit</button>
                                </div>  
                            <?php else: ?>
                                <div style="margin-top: 53px;">
                                    <h5 class="mt-n4 mb-0 text-white" >Setting</h5> 
                                    <span class="text-white">Setting Target Time</span>
                                    <div class=" input-group mt-2" style="opacity: 0;">
                                        <input
                                          type="hidden"
                                          name="goal"
                                          class="form-control"
                                          placeholder="100"
                                          min="0"
                                          step="1"
                                          oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                                        />
                                        <span class="input-group-text">Hours</span>
                                  </div>
                                </div>
                                <div class="d-flex mt-3" style="opacity: 0;">
                                    <button class="btn btn-primary me-2" id="btn_save_target">Submit</button>
                                </div> 
                            <?php endif; ?>
                        </div>
                        <div class="parent-chart col-12 col-lg-5 d-flex flex-column justify-content-lg-start  justify-content-start px-0 mt-5 mt-lg-0  px-lg-3 mx-0">
                            <div class="w-100 mb-3">
                                <div class="d-flex justify-content-between">
                                    <span class="text-center">Target Time</span>
                                    <div class="label-target-time">
                                        -
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between mt-2">
                                    <span class="text-center">Time Now</span>
                                    <div class="label-time-now">
                                        -
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between mt-2">
                                    <span class="text-center">Status Machine</span>
                                    <div class="label-status-machine">
                                        -
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-lg-end  justify-content-center">
                                <div id="achivedChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="col-12 mx-0 px-0 pt-3">
            <div class="card shadow-md px-0 mx-0 ">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-header">Current</h5>
                    <div class="pe-3">
                        <!-- <span class="badge rounded bg-label-success">Current</span> -->
                    </div>
                </div>
                <div class="card-body">
                    <div class="row w-100 px-0 mx-0">
                        <div class="col-12 col-lg-3 px-0 mx-0">
                            <div id="historyAmper"></div>
                        </div>
                        <div class="col-12 col-lg-9 mx-0 px-0">
                            <div id="historyUsed"></div>
                        </div>
                    </div>
                </div>
            </div>
          </div>


<!--           <div class="col-12 mx-0 px-0 pt-3">
            <div class="card shadow-md px-0 mx-0 ">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-header">Voltage</h5>
                    <div class="pe-3">
                    </div>
                </div>
                <div class="card-body">
                    <div class="row w-100 px-0 mx-0">
                        <div class="col-12 col-lg-3 px-0 mx-0">
                            <div id="chartHistoryVoltage"></div>
                        </div>
                        <div class="col-12 col-lg-9 mx-0 px-0">
                            <div id="chartHistoryVoltageUsed"></div>
                        </div>
                    </div>
                </div>
            </div>
          </div> -->


          <div class="col-12 mx-0 px-0 pt-3">
            <div class="card shadow-md px-0 mx-0 ">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-header">RPM</h5>
                    <div class="pe-3">
                        <!-- <span class="badge rounded bg-label-danger">RPM</span> -->
                    </div>
                </div>
                <div class="card-body">
                    <div class="row w-100 px-0 mx-0">
                        <div class="col-12 col-lg-3 px-0 mx-0">
                            <div id="chartHistoryRpm"></div>
                        </div>
                        <div class="col-12 col-lg-9 mx-0 px-0">
                            <div id="chartHistoryRpmUsed"></div>
                        </div>
                    </div>
                </div>
            </div>
          </div>

          <div class="col-12 mx-0 px-0 pt-3">
            <div class="card shadow-md px-0 mx-0 ">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-header">Temperature</h5>
                    <div class="pe-3">
                        <!-- <span class="badge rounded bg-label-warning">Temperature</span> -->
                    </div>
                </div>
                <div class="card-body">
                    <div class="row w-100 px-0 mx-0">
                        <div class="col-12 col-lg-3 px-0 mx-0">
                            <div id="chartHistoryTemperature"></div>
                        </div>
                        <div class="col-12 col-lg-9 mx-0 px-0">
                            <div id="chartHistoryTemperatureUsed"></div>
                        </div>
                    </div>
                </div>
            </div>
          </div>

            <?php if(session()->get('role_id')!=3||session()->get('role_id')!='3'): ?>
              <div class="col-12 mx-0 px-0 pt-3">
                <div class="card shadow-md px-0 mx-0 ">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-header">Export Data</h5>
                        <div class="pe-3">
                            <button class="btn_export btn btn-danger me-1" data-type="PDF"><i class="bx bxs-file mb-1 " ></i> PDF</button>
                            <button class="btn_export btn btn-primary" data-type="EXCEL"><i class="bx bxs-file mb-1" ></i> Excel</button>
                        </div>
                    </div>
                </div>
              </div>
            <?php endif; ?>

      </div>

