@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">Edit Perangkat</h4>
                        <a href="{{ url('device/index') }}" class="btn btn-warning">Kembali</a>
                    </div>
                    <div class="card-body mt-1">
                        @if (session('error'))
                            <div class="alert alert-danger p-1">
                                {{session('error')}}
                            </div>
                        @endif
                        @if ($errors->any())
                        <div class="alert  p-1 alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                        <form action="{{ url('device/edit_device') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method("PUT")
                            <input type="hidden" name="id" value="{{ $id }}">
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Nama Perangkat*</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" class="form-control @error('nama_device')
                                                is-invalid
                                            @enderror" placeholder="Nama Perangkat" required value="{{ $first->nama_device }}"
                                                name="nama_device" aria-describedby="basic-addon-search1" />
                                        </div>
                                        @error('nama_device')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>IMEI*</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="number" class="form-control @error('imei')
                                            is-invalid
                                            @enderror" placeholder="IMEI" required value="{{ $first->imei }}"
                                                name="imei" aria-describedby="basic-addon-search1" />
                                        </div>
                                        @error('imei')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Latitude*</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" class="form-control @error('lat')
                                            is-invalid
                                            @enderror" placeholder="Latitude" required value="{{ $first->lat }}"
                                                name="lat" aria-describedby="basic-addon-search1" />
                                        </div>
                                        @error('lat')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Longitude*</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" class="form-control @error('lng')
                                            is-invalid
                                            @enderror" placeholder="Longitude" required value="{{ $first->lng }}"
                                                name="lng" aria-describedby="basic-addon-search1" />
                                        </div>
                                        @error('lng')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Status</h5>
                                        </label>
                                        <div class="d-flex flex-column">
                                            <div class="form-check form-check-primary form-switch">
                                                <input type="checkbox" name="status" class="form-check-input" {{ ($first->status_run == 1) ? "checked" : ""; }} id="customSwitch3" value="1">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Lokasi*</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" class="form-control @error('location')
                                            is-invalid
                                            @enderror" placeholder="Lokasi" required value="{{ $first->location }}"
                                                name="location" aria-describedby="basic-addon-search1" />
                                        </div>
                                        @error('location')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Kedalaman Sungai*</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="number" class="form-control @error('depth')
                                                is-invalid
                                            @enderror" placeholder="Kedalaman Sungai" required value="{{ $first->depth }}"
                                                name="depth" aria-describedby="basic-addon-search1" />
                                        </div>
                                        @error('depth')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-1">
                                        <div style="width: 150px;height: 120px;" class="mb-1">
                                            <img src="{{ asset('upload/' . $first->photo_device) }}" alt="" class="img-fluid img-thumbnail w-100 h-100">
                                        </div>
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Foto Device</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="hidden" name="file_lama" value="{{ $first->photo_device }}">
                                            <input type="file" class="form-control @error('file')
                                            is-invalid
                                            @enderror" placeholder="foto"
                                                name="file" aria-describedby="basic-addon-search1" />
                                        </div>
                                        @error('file')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </form>
                    </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();
        });
    </script>
@endsection