@extends('layouts.app')

@section('css')
@endsection

@section('content')

<div class="main main-app p-3 p-lg-4">
  <div class="d-md-flex align-items-center justify-content-between mb-4">
    <div>
      <ol class="breadcrumb fs-sm mb-1 mt-2">
        <li class="breadcrumb-item" aria-current="page">
          <span class="badge bg-primary"><i class="ri-building-2-fill"></i> {{(session()->get('Global_PrfSiteName'))}}</span>
        </li>
        <li class="breadcrumb-item"><a href="{{route('module_uxpixel.index')}}">{{$Title}}</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{$Subtitle}}</li>
      </ol>
    </div>
    <div class="d-flex gap-2 mt-3 mt-md-0">
      <a href="{{route('module_uxpixel.index')}}" class="btn btn-white d-flex align-items-center gap-2"><i class="ri-share-line fs-18 lh-1"></i>UXPixel List</a>
      <a href="{{route('home')}}" class="btn btn-primary d-flex align-items-center gap-2"><i class="ri-bar-chart-2-line fs-18 lh-1"></i>Back To Dashboard</a>
    </div>
  </div>

  <div class="row g-2">
    <div class="col-md-12 col-xl-5">
    <div class="card card-post">
        <div class="card-header">
          <h5 class="main-subtitle mb-0">{{$Subtitle}}</h5>
        </div>
      <form id="formUpdate_devicecontroller" onsubmit="updateForm('formUpdate_device_profile', 'btnUpdate_devicecontroller', 'Updating Device Controller...')" action="{{ route('module_uxpixel.update', $UXPixel->dvc_id)}}" method="POST">
        @csrf
        @method('PUT')
        <div class="card-body">
        @if (!Auth::user()->prf_sites_id)
          <div class="alert alert-solid alert-warning d-flex align-items-center text-black" role="alert">
          <i class="ri-information-line"></i>
            Please Setup
            <a href="#modal_sys_prf" data-bs-toggle="modal"><abbr title="Configure System Preference"><strong>&nbsp;System Preference&nbsp;</strong></abbr></a>
            Before Continue.
          </div>
        @endif
          <p class="mb-3"><strong>Setup UXPixel Profile information.</strong></p>

          <div class="d-flex d-sm-block d-xl-flex align-items-center mb-2">
            <div class="helpdesk-icon text-white">
              <img width="100%" src="{{asset('assets/img/device/UXPixel.png')}}"/>
            </div>
            <div class="ms-3 ms-sm-0 ms-xl-3 mt-sm-3 mt-xl-0">
              <h2 class="card-value d-flex align-items-baseline mb-0">UXPixel Controller</h2>
              <label class="card-label fs-sm fw-medium mb-1"><strong>Setup UXPixel Profile information.</strong></label>
            </div>
          </div>

          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Device Name</label>
              <input required name="dvc_name" value="{{ $UXPixel->dvc_name }}" class="form-control form-control-lg mb-2" type="text" aria-label=".form-control-lg">
            </div>

            <div class="col-md-6">
              <label class="form-label">Location Name</label>
              <input name="dvc_loc_name" value="{{ $UXPixel->dvc_loc_name }}" class="form-control form-control-lg mb-2" type="text" aria-label=".form-control-lg">
            </div>

            <div class="col-md-6">
              <label class="form-label">Asset Name</label>
              <input name="dvc_ast_name" value="{{ $UXPixel->dvc_ast_name }}" class="form-control form-control-lg mb-2" type="text" aria-label=".form-control-lg">
            </div>

            <div class="col-md-6">
              <label class="form-label">API Key</label>
              <input required readonly name="api_key_value" value="{{ $UXPixel->api_key_value }}" class="form-control form-control-lg mb-2" type="text" aria-label=".form-control-lg">
            </div>

            <div class="col-md-6">
              <label class="form-label">Device Model</label>
              <select required name="dvc_model" class="form-select form-select-lg" aria-label=".form-select-lg">
                @if ($UXPixel->dvc_model)
                <option selected value="{{ $UXPixel->dvc_model }}">Current : {{ $UXPixel->dvc_model }}</option>
                @else
                <option disabled selected value="">Please Choose</option>
                @endif
                <option value="Avonix">Avonix</option>
                <option value="Air Handling Unit">Air Handling Unit</option>
                <option value="Package Unit">Package Unit</option>
                <option value="Split Unit">Split Unit</option>
                <option value="Chiller">Chiller</option>
                <option value="VRV">VRV</option>
                <option value="Ultimate Pixel">Ultimate Pixel</option>
              </select>
            </div>

            <div class="col-md-6">
                <label class="form-label">Device Status</label>
                <select required name="dvc_status" class="form-select form-select-lg" aria-label=".form-select-lg">
                  @if ($UXPixel->dvc_status)
                  <option selected value="{{ $UXPixel->dvc_status }}">Current : {{ $UXPixel->dvc_status }}</option>
                  @endif
                  <option disabled value="">Please Choose</option>
                  <option value="Active">Active</option>
                  <option value="Not Active">Not Active</option>
                </select>
            </div>

            <div class="d-grid gap-2 mt-5">
                <button id="btnUpdate_devicecontroller" type="submit" class="btn btn-primary btn-lg">Update Device Controller</button>
            </div>
          </div>
        </div>
      </form>
    </div>
    </div>

    <div class="col-md-12 col-xl-7">
      <div class="card card-post">
        <div class="card-header">
          <h5 class="main-subtitle mb-0">UXPixel Sensor Management</h5>
        </div>

        <div class="card-body">

          <div class="d-flex d-sm-block d-xl-flex align-items-center mb-2">
            <div class="helpdesk-icon text-white">
              <img width="100%" src="{{asset('assets/img/device/UXPixel_Sensor.png')}}"/>
            </div>
            <div class="ms-3 ms-sm-0 ms-xl-3 mt-sm-3 mt-xl-0">
              <h2 class="card-value d-flex align-items-baseline mb-0">{{ $UXPixel->dvc_name.' / '.optional(session('snsrdetail'))->snsr_name ?? 'Sensor List' }}</h2>
              <label class="card-label fs-sm fw-medium mb-1"><strong>IoT Sensor Information</strong></label>
            </div>
          </div>

          <ul class="nav nav-pills border" id="v-pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" id="v-pills-sensor-tab" href="#v-pills-sensor" aria-controls="v-pills-sensor" data-toggle="pill" role="tab" data-bs-toggle="tab" aria-selected="true">
                    <div class="d-flex align-items-center">
                        <div class="tab-icon"><i class="ri-table-2 me-1"></i></div>
                        <div class="tab-title">Sensor List</div>
                    </div>
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="v-pills-sensordetail-tab" href="#v-pills-sensordetail" aria-controls="v-pills-sensordetail" data-toggle="pill" role="tab" data-bs-toggle="tab" aria-selected="false">
                    <div class="d-flex align-items-center">
                        <div class="tab-icon"><i class="ri-phone-camera-line me-1"></i></div>
                        <div class="tab-title">Sensor Details</div>
                    </div>
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="v-pills-sensorsetting-tab" href="#v-pills-sensorsetting" aria-controls="v-pills-sensorsetting" data-toggle="pill" role="tab" data-bs-toggle="tab" aria-selected="false">
                    <div class="d-flex align-items-center">
                        <div class="tab-icon"><i class="ri-settings-2-line me-1"></i></div>
                        <div class="tab-title">Settings</div>
                    </div>
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="v-pills-sensorparameter-tab" href="#v-pills-sensorparameter" aria-controls="v-pills-sensorparameter" data-toggle="pill" role="tab" data-bs-toggle="tab" aria-selected="false">
                    <div class="d-flex align-items-center">
                        <div class="tab-icon"><i class="ri-code-box-line me-1"></i></div>
                        <div class="tab-title">Parameters</div>
                    </div>
                </a>
            </li>

          </ul>

          <div class="tab-content py-3" id="v-pills-tabContent">

            @include('module_uxpixel.tabs_sensor.v-pills-sensor')

            @include('module_uxpixel.tabs_sensor.v-pills-sensordetail')

            @include('module_uxpixel.tabs_sensor.v-pills-sensorsetting')

            @include('module_uxpixel.tabs_sensor.v-pills-sensorparameter')

          </div>

        </div>
      </div>
    </div>

    </div><!-- row -->

    @include('layouts.inc.footer')

</div><!-- main -->

@endsection

@section('js')
  <script src="{{ asset('views/module_uxpixel/navtab.js') }}"></script>

  <script type="text/javascript">
    function updateForm(formId, buttonId, buttonText) {
        var button = document.getElementById(buttonId);
        button.innerHTML = '<span id="ShowSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ' + buttonText;
        button.disabled = true;
        document.getElementById(formId).submit();
    }
  </script>

  <script type="text/javascript">

    function formUpdate_devicecontroller()
    {
        document.getElementById("btnUpdate_devicecontroller").innerHTML = '<span id="ShowSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Updating Device Controller...';
        document.getElementById("btnUpdate_devicecontroller").disabled = true;
        document.getElementById('formUpdate_device_profile').submit();
    }

    function formUpdate_sensordetail()
    {
        document.getElementById("btnUpdate_sensordetail").innerHTML = '<span id="ShowSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Updating Sensor Detail...';
        document.getElementById("btnUpdate_sensordetail").disabled = true;
        document.getElementById('formUpdate_sensordetail').submit();
    }

    function formUpdate_sensorsetting()
    {
        document.getElementById("btnUpdate_sensorsetting").innerHTML = '<span id="ShowSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Updating Sensor Detail...';
        document.getElementById("btnUpdate_sensorsetting").disabled = true;
        document.getElementById('formUpdate_sensorsetting').submit();
    }

  </script>

  {{-- <script src="{{ asset('views/module_uxpixel/modal_sensor/modal_add_sensor.js') }}?v=5"></script> --}}
  {{-- <script src="{{ asset('views/module_uxpixel/modal_sensor/modal_add_sensor_v2.js') }}?v=11"></script> --}}
  <script src="{{ asset('views/module_uxpixel/modal_sensor/modal_add_sensor_v3.js') }}?v=2"></script>


@endsection