@extends('layouts.app')

@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/tree.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.create')}}" class="btn btn-white d-flex align-items-center gap-2"><i class="ri-share-line fs-18 lh-1"></i>Create UXPIxel</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-3">

    @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

    <div class="col-xl-8">
      <div class="card card-post">

        <div class="card-header">
          <h5 class="main-subtitle mb-0"">{{$Subtitle}}</h5>
        </div>

        <div class="card-body">

          <p class="mb-3">UXPixel - {{ count($UXPixel) }} Records</p>

          <div class="table-responsive-sm text-nowrap">
            <table class="table table-sm table-hover table-bordered table-striped mb-0 align-middle">
              <thead>
                <tr>
                  <th scope="col">UXPixel Name</th>
                  <th scope="col">Model</th>
                  <th scope="col">Status</th>
                  <th class="text-center" scope="col">Sensor</th>
                  <th class="text-center" scope="col">Action</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($UXPixel as $upxl)
                <tr>
                  <td>{{ $upxl->dvc_name }}</td>
                  <td>{{ $upxl->dvc_model }}</td>
                  <td>
                    @if ($upxl->dvc_status == 'Active')
                      <span class="badge bg-success">{{$upxl->dvc_status}}</span>
                    @elseif ($upxl->dvc_status == 'Not Active')
                      <span class="badge bg-danger">{{$upxl->dvc_status}}</span>
                    @endif
                  </td>
                  <td class="text-center">{{ $upxl->cntr_sensor }}</td>
                  <td class="text-center"><a href="{{ route('module_uxpixel.edit', $upxl->dvc_id)}}">edit</a> | delete</td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-4">
      <div class="card">
        <div class="card-body">



          <ul class="tree tree-margin mb-0">
            <li> <!-- Tier 1 -->
              <a class="btn btn-primary flex-fill bg-gradient">{{(session()->get('Global_PrfSiteName'))}}</a>
              <ul>
                @foreach ($UXPixel as $uxpl)
                <li><!-- Tier 2 -->
                  <a class="btn btn-success"><i class="ri-edit-2-line"></i></a>
                  <a class="btn btn-success flex-fill bg-gradient">{{ $uxpl->dvc_name }} </a>
                  <a class="btn btn-secondary"><i class="ri-add-circle-line"></i></a>
                  <a class="btn btn-danger"><i class="ri-delete-bin-5-line"></i></a>
                  <ul>
                    @foreach ($snsrlist as $snsr)
                      @if ($snsr->dvc_id == $uxpl->dvc_id)
                      <li> <!-- Tier 3 -->
                        <a class="btn btn-info"><i class="ri-edit-2-line"></i></a>
                        <a class="btn btn-info flex-fill bg-gradient">{{ $snsr->snsr_name }}</a>
                        <a class="btn btn-secondary"><i class="ri-add-circle-line"></i></a>
                        <a class="btn btn-danger"><i class="ri-delete-bin-5-line"></i></a>
                      </li> <!-- End Tier 3 -->
                      @endif
                    @endforeach
                  </ul>
                </li><!-- End Tier 2 -->
                @endforeach
              </ul>
            </li><!-- End Tier 1 -->
          </ul>

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

  </div><!-- row -->
  @include('layouts.inc.footer')
</div><!-- main -->
@endsection

@section('js')

@endsection