@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')) }}">
  <script src="{{ asset('vendors/js/charts/apexcharts.min.js') }}"></script>
@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')
<style>
    .template_from {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    @media screen and (max-width:1420px)
    {
        .template_from {
            grid-template-columns: repeat(2,1fr);
        }
    }

    @media screen and (max-width:650px)
    {
        .template_from {
            grid-template-columns: repeat(1,1fr);
        }
    }
</style>
<!-- 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">Laporan Hasil Perhitungan Hulu Sungai</h4>
        </div>
        <div class="card-datatable m-1">
          @if (session()->get('success'))
          <div class="alert alert-success m-2 p-1">{{ session()->get('success') }}</div>
      @endif
      @if (session()->get('error'))
          <div class="alert alert-danger m-2 p-1">{{ session()->get('error') }}</div>
      @endif
      @if ($errors->any())
      <div class="alert m-2 p-1 alert-danger">
          <ul>
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div>
  @endif
            <form action="{{ url("laporan_hasil_perhitungan/search") }}" method="POST" enctype="multipart/form-data" >
                @csrf
                <div class="template_from">
                    <div class="box">
                        <label for="awal"><h5>Tanggal Mulai</h5></label>
                        <input type="date" value="" name="awal" class="form-control @error('awal')
                          is-invalid
                        @enderror" required>
                        @error('awal')
                          <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="box">
                        <label for="akhir"><h5>Tanggal Sampai</h5></label>
                        <input type="date" value="" name="akhir" class="form-control @error('akhir')
                          is-invalid
                        @enderror" required>
                        @error('akhir')
                          <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="box">
                        <label for="device"><h5>Pilih Perangkat</h5></label>
                        <select name="device" id="select2-nested-empat"  class="select2 @error('device')
                          is-invalid
                        @enderror form-select" required>
                            <option value="">Pilih</option>
                            @foreach ($result_device as $devices)
                              <option value="{{ $devices->no }}">{{ $devices->nama_device }}</option>
                            @endforeach
                        </select>
                        @error('device')
                          <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="box" style="margin-top: 25px;">
                        <button class="btn-primary btn" type="submit" name="kirim" value="filter">Filter</button>
                        <button class="btn-primary btn" type="submit" name="kirim" value="excel">EXCELL</button>
                        <button class="btn-primary btn" type="submit" name="kirim" value="pdf">PDF</button>
                    </div>
                </div>
                </form>
          <div class="table-responsive">
            <table class=" table-hover  table-striped table tables-responsive" style="width:100% !important" id="table">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Nama Perangkat</th>
                    <th>Lokasi</th>
                    <th>Koordinat</th>
                    <th>Rata-Rata Ketinggian</th>
                    <th>Status Siaga</th>
                    <th>Tanggal Interval</th>
                    <th>Tanggal Kalkulasi</th>
                  </tr>
                </thead>
              </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@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({
            processing: true,
            serverSide: true,
            ajax: "{{ url('laporan_hasil_perhitungan/ambil_laporans/' . $device . '/' . $awal . '/' . $akhir) }}",
            columns: [{
                    data: "DT_RowIndex",
                    name: "DT_RowIndex",
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'nama_device',
                    name: 'nama_device'
                },
                {
                    data: 'location',
                    name: 'location'
                },
                {
                    data: 'lat',
                    name: 'lat'
                },
                {
                    data: 'depth_average',
                    name: 'depth_average'
                },
                {
                    data: 'status_siaga',
                    name: 'status_siaga'
                },
                {
                    data: 'datetime_calculate',
                    name: 'datetime_calculate'   
                },
                {
                    data: 'last_time',
                    name: 'last_time'
                }
            ]
        });
    });
</script>
@endsection