@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')
    <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>
    <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 Data Ketinggian Air Dari Perangkat</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_ketinggian_air/seacrh') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @method("POST")
                            <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 form-select @error('device')
                          is-invalid
                        @enderror"
                                        required>
                                        <option value="">Pilih</option>
                                        @foreach ($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 type="submit" name="kirim" value="filter"
                                        class="btn-primary btn">Filter</button>
                                    <button type="submit" name="kirim" value="excel"
                                        class="btn-primary btn">EXCELL</button>
                                    <button type="submit" name="kirim" value="pdf"
                                        class="btn-primary btn">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>Ketinggian Air (CM)</th>
                                        <th>Koordinat</th>
                                        <th>Tanggal</th>
                                        <th>Jam</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_ketinggian_air/ambil_laporan_ketinggian') }}",
        
        columns : [
        {
          data : 'DT_RowIndex',
          name : 'DT_RowIndex',
          orderable : false,
          searchable : false
        }, 
        {
          data : 'nama_device',
          name : 'nama_device'
        },
        {
          data : 'location',
          name : 'location'
        },
        {
          data : 'depth',
          name : 'depth'
        },
        {
            data : 'lat',
            name : 'lat'
        },
        {
          data : 'date_report',
          name : 'date_report'
        },
        {
          data : 'time_report',
          name : 'time_report'
        }
      ]
      });
    });
    </script>
@endsection