@extends('layouts/contentLayoutMaster')

@section('title', 'DataTables')

@section('vendor-style')
  {{-- vendor css files --}}
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" type="text/css" href="{{asset('css/base/plugins/forms/pickers/form-flat-pickr.css')}}">

@endsection


@section('content')
<!-- Ajax Sourced Server-side -->
<section id="ajax-datatable">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header border-bottom d-flex " style="justify-content: space-between !important">
          <h4 class="card-title">Sensor</h4>
        </div>
        <div class="card-datatable m-1">
          <table class=" table-hover   table tables-responsive" style="width:100% !important" id="table">
            <thead>
              <tr>
                <th>#</th>
                <th>IMEI</th>
                <th>Nama Device</th>
                <th>Ketinggian Air</th>
                <th>Images</th>
                <th>Report Time</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="modal fade" id="hapus" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog  modal-lg" role="document">
    <form method="POST" enctype="multipart/form-data" class="modal-content" accept="">
      @csrf
      <div class="modal-header">
        <h5 class="modal-title" id="modalFullTitle">Hapus Level</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="p-2 text-center">
          <h4>Apakah Anda Yakin Ingin Menghapus Data Ini!</h4>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Hapus</button>
      </div>
    </form>
  </div>
</div>
<div class="modal fade" id="edit" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog  modal-lg" role="document">
    <form method="POST" enctype="multipart/form-data" class="modal-content" accept="">
      @csrf
      <div class="modal-header">
        <h5 class="modal-title" id="modalFullTitle">Edit Level</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="containers">
          <div class="mb-1">
            <label for="" style="margin-bottom: 5px !important;"> <h5>Level</h5></label>
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              placeholder="Level"
              required name="level"
              value="Admin"
              aria-describedby="basic-addon-search1"
            />
          </div>
          </div>
          <div class="mb-1">
            <label for="" style="margin-bottom: 5px !important;"> <h5>Status</h5></label>
          <div class="input-group" style="width: 100% !important">
            <select class="form-control "  >
              <option value="">Pilih</option>
              <option value="Aktif" selected>Aktif</option>
              <option value="Tidak Aktif">Tidak Aktif</option>
            </select>
          </div>
          </div>
          <div class="mb-1">
            <label for="" style="margin-bottom: 5px !important;"> <h5>Keterangan</h5></label>
          <div class="input-group" style="width: 100% !important">
            <textarea name="keterangan" id="" class="form-control" required cols="30" rows="7">Lorem ipsum dolor sit amet.</textarea>
          </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Simpan</button>
      </div>
    </form>
  </div>
</div>
@endsection


@section('vendor-script')
{{-- vendor files --}}
  <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection

@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(mix('js/scripts/tables/table-datatables-advanced.js')) }}"></script>
  <script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>
  <script src="{{ asset(mix('js/scripts/components/components-modals.js')) }}"></script>
  <script>
    $(document).ready(function(){
      $("#table").DataTable();
    });
  </script>
@endsection