@extends('layouts.admin')
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush
@section('content')

<div class="card">
    <div class="card-header">
        {{ trans('global.edit') }} {{ trans('cruds.device.title_singular') }}
    </div>

    <div class="card-body">
        <form method="POST" action="{{ route("admin.devices.update", [$device->id]) }}" enctype="multipart/form-data">
            @method('PUT')
            @csrf
            <div class="form-group">
                <label for="imei">IMEI</label>
                <input class="form-control {{ $errors->has('imei') ? 'is-invalid' : '' }}" type="text" name="imei" id="imei" value="{{ old('imei', $device->imei) }}" {{ (Gate::allows('device_admin_access')) ? '' : 'disabled' }}>
                @if($errors->has('imei'))
                    <div class="invalid-feedback">
                        {{ $errors->first('imei') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.device_helper') }}</span>
            </div>   
            <div class="form-group">
                <label for="name">Nama</label>
                <input placeholder="Nama Device" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" type="text" name="name" id="name" value="{{ old('name', $device->name) }}">
                @if($errors->has('name'))
                <div class="invalid-feedback">
                    {{ $errors->first('name') }}
                </div>
                @endif
            </div>
	    <div class="form-group">
                <label for="serial_number">{{ trans('cruds.device.fields.serial_number') }}</label>
                <input class="form-control {{ $errors->has('serial_number') ? 'is-invalid' : '' }}" type="text" name="serial_number" id="serial_number" value="{{ old('serial_number', $device->serial_number) }}" {{ (Gate::allows('device_admin_access')) ? '' : 'disabled' }}>
                @if($errors->has('serial_number'))
                    <div class="invalid-feedback">
                        {{ $errors->first('serial_number') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.serial_number_helper') }}</span>
            </div>               
            <div class="form-group">
                <label for="lat">{{ trans('cruds.device.fields.lat') }}</label>
                <input class="form-control {{ $errors->has('lat') ? 'is-invalid' : '' }}" type="text" name="lat" id="lat" value="{{ old('lat', $device->lat) }}">
                @if($errors->has('lat'))
                    <div class="invalid-feedback">
                        {{ $errors->first('lat') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.lat_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="long">{{ trans('cruds.device.fields.long') }}</label>
                <input class="form-control {{ $errors->has('long') ? 'is-invalid' : '' }}" type="text" name="long" id="long" value="{{ old('long', $device->long) }}">
                @if($errors->has('long'))
                    <div class="invalid-feedback">
                        {{ $errors->first('long') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.long_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="specification">Brand</label>
                <select class="form-control select2" name="brand_id">
                    {{-- <option value="">-</option> --}}
                    @foreach ($brands as $id=>$brand)
                        <option value="{{$id}}"  {{ $device->brand_id == $id ? 'selected' : '' }}>{{$brand}}</option>
                    @endforeach
                </select>
                @if($errors->has('brand'))
                    <div class="invalid-feedback">
                        {{ $errors->first('brand') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.specification_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="type">{{ trans('cruds.device.fields.type') }}</label>
                <select class="form-control select2" name="type_id">
                    {{-- <option value="">-</option> --}}
                    @foreach ($types as $id=>$type)
                        <option value="{{$id}}" {{ $device->type_id == $id ? 'selected' : '' }}>{{$type}}</option>
                    @endforeach
                </select>
                @if($errors->has('type'))
                    <div class="invalid-feedback">
                        {{ $errors->first('type') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.type_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="specification">{{ trans('cruds.device.fields.specification') }}</label>
                <select class="form-control select2" name="specification_id">
                    {{-- <option value="">-</option> --}}
                    @foreach ($specifications as $id=>$specification)
                        <option value="{{$id}}"  {{ $device->specification_id == $id ? 'selected' : '' }}>{{$specification}}</option>
                    @endforeach
                </select>
                @if($errors->has('specification'))
                    <div class="invalid-feedback">
                        {{ $errors->first('specification') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.specification_helper') }}</span>
            </div>
            <!-- <div class="form-group">
                <label for="specification">Tags</label>
                <select valule="new,test"class="js-example-data-multiple" name="tags[]" multiple="multiple">
                </select>
                @if($errors->has('specification'))
                <div class="invalid-feedback">
                    {{ $errors->first('specification') }}
                </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.specification_helper') }}</span>
            </div> -->

            <div class="form-group">
                <label for="tags">{{ trans('cruds.device.fields.tag') }}</label>
                <div style="padding-bottom: 4px">
                    <span class="btn btn-info btn-xs select-all" style="border-radius: 0">{{ trans('global.select_all') }}</span>
                    <span class="btn btn-info btn-xs deselect-all" style="border-radius: 0">{{ trans('global.deselect_all') }}</span>
                </div>
                <select class="form-control select2 {{ $errors->has('tags') ? 'is-invalid' : '' }}" name="tags[]" id="tags" multiple>
                    @if ($device->tags)
                        @foreach($tags as $id => $tag)
                            <option value="{{ $id }}" {{ (in_array($id, old('tags', [])) || $device->tags->contains($id)) ? 'selected' : '' }}>{{ $tag }}</option>
                        @endforeach
                    @else
                        @foreach($tags as $id => $tag)
                            <option value="{{ $id }}" {{ (in_array($id, old('tags', []))) }}>{{ $tag }}</option>
                        @endforeach
                    @endif
                </select>
                @if($errors->has('tags'))
                    <div class="invalid-feedback">
                        {{ $errors->first('tags') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.tag_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="attributes">{{ trans('cruds.device.fields.attributes') }}</label>
                <textarea class="form-control {{ $errors->has('attributes') ? 'is-invalid' : '' }}" type="text" name="attributes" id="attributes">{{ old('attributes', $device->attributes) }}</textarea>
                @if($errors->has('attributes'))
                    <div class="invalid-feedback">
                        {{ $errors->first('attributes') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.attributes_helper') }}</span>
            </div>    
            @can('device_admin_access')
            <div class="form-group">
                <label for="kwh">KWh</label>
                <input class="form-control {{ $errors->has('kwh') ? 'is-invalid' : '' }}" type="text" name="kwh" id="kwh" value="{{ old('kwh', $device->kwh) }}" {{ (Gate::allows('device_admin_access')) ? '' : 'disabled' }}>
                @if($errors->has('kwh'))
                    <div class="invalid-feedback">
                        {{ $errors->first('kwh') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.kwh_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="kwh_adjustment">KWh Adjustment</label>
                <input class="form-control {{ $errors->has('kwh_adjustment') ? 'is-invalid' : '' }}" type="text" name="kwh_adjustment" id="kwh_adjustment" value="{{ old('kwh_adjustment', $device->kwh_adjustment) }}" {{ (Gate::allows('device_admin_access')) ? '' : 'disabled' }}>
                @if($errors->has('kwh_adjustment'))
                    <div class="invalid-feedback">
                        {{ $errors->first('kwh_adjustment') }}
                    </div>
                @endif
                <span class="help-block">in Kilo Watt</span>
            </div>
            <div class="form-group">
                <label for="on_time">Waktu ON</label>
                <input class="form-control {{ $errors->has('on_time') ? 'is-invalid' : '' }}" type="text" name="on_time" id="on_time" value="{{ old('on_time', $device->on_time) }}" {{ (Gate::allows('device_admin_access')) ? '' : 'disabled' }}>
                @if($errors->has('on_time'))
                    <div class="invalid-feedback">
                        {{ $errors->first('on_time') }}
                    </div>
                @endif
                <span class="help-block">Format: H:m (Hour:minute)</span>
            </div>
            <div class="form-group">
                <label for="off_time">Waktu OFF</label>
                <input class="form-control {{ $errors->has('off_time') ? 'is-invalid' : '' }}" type="text" name="off_time" id="off_time" value="{{ old('off_time', $device->off_time) }}" {{ (Gate::allows('device_admin_access')) ? '' : 'disabled' }}>
                @if($errors->has('off_time'))
                    <div class="invalid-feedback">
                        {{ $errors->first('off_time') }}
                    </div>
                @endif
                <span class="help-block">Format: H:m (Hour:minute)</span>
            </div>            
            <div class="form-group">
                <label for="custom_company_id">Custom CID</label>
                <input class="form-control {{ $errors->has('custom_company_id') ? 'is-invalid' : '' }}" type="text" name="custom_company_id" id="imei" value="{{ old('custom_company_id', $device->custom_company_id) }}" {{ (Gate::allows('device_admin_access')) ? '' : 'disabled' }}>
                @if($errors->has('imei'))
                    <div class="invalid-feedback">
                        {{ $errors->first('custom_company_id') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.device_helper') }}</span>
            </div>       
            <div class="form-group">
                <label for="company_id">{{ trans('cruds.device.fields.company') }}</label>
                <select class="form-control select2 {{ $errors->has('company_id') ? 'is-invalid' : '' }}" name="company_id" id="company_id">
                    @foreach($companies as $id => $company)
                        <option value="{{ $id }}" {{ (old('company_id') ? old('company_id') : $device->company_id ?? '') == $id ? 'selected' : '' }}>{{ $company }}</option>
                    @endforeach
                </select>
                @if($errors->has('company_id'))
                    <div class="invalid-feedback">
                        {{ $errors->first('company_id') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.company_helper') }}</span>
            </div>                   
            <div class="form-group">
                <label for="user_id">{{ trans('cruds.device.fields.user') }}</label>
                <select class="form-control select2 {{ $errors->has('user') ? 'is-invalid' : '' }}" name="user_id" id="user_id">
                    @foreach($users as $id => $user)
                        <option value="{{ $id }}" {{ (old('user_id') ? old('user_id') : $device->user->id ?? '') == $id ? 'selected' : '' }}>{{ $user }}</option>
                    @endforeach
                </select>
                @if($errors->has('user'))
                    <div class="invalid-feedback">
                        {{ $errors->first('user') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.device.fields.user_helper') }}</span>
            </div>
            @endcan  

            <button class="mb-2 btn btn-success" type="button" onclick="getLocation()">Get Coordinate</button>
            &nbsp;&nbsp;<span id="coordinate">Click the button to get coordinate</span>

            <div class="form-group">
                <button class="btn btn-danger" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    var latitude = document.getElementById("lat");
    var longitude = document.getElementById("long");
    var coordinate = document.getElementById("coordinate");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            x.value = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        latitude.value = position.coords.latitude;
        longitude.value = position.coords.longitude;
        coordinate.innerHTML = position.coords.latitude + ' , ' + position.coords.longitude;

        // var greenIcon = new L.Icon({
        //     iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
        //     shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        //     iconSize: [25, 41],
        //     iconAnchor: [12, 41],
        //     popupAnchor: [1, -34],
        //     shadowSize: [41, 41]
        // });

        // // var map = L.map('mapid').setView([-6.899525, 107.653151], 5);
        // // var map = L.map('mapid').setView([position.coords.latitude, position.coords.longitude], 14);
        // var mymap = L.map('mapid').setView([-6.887442995884511, 107.60709428994403], 12);
        // L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        //     attribution: '',
        //     maxZoom: 18,
        //     id: 'mapbox/streets-v11',
        //     tileSize: 512,
        //     zoomOffset: -1,
        //     accessToken: 'pk.eyJ1IjoieWFuc3lhZiIsImEiOiJjMzVkYTY5MDVhMWFhOGY3ODBkZjdiNTAyYzZlZjZmMyJ9.SbqZCRXhTUWf3loLAXMFRg'
        // }).addTo(mymap);

        // var marker = L.marker([position.coords.latitude, position.coords.longitude]).addTo(map);
        // marker.setIcon(greenIcon);
    }
</script>
@endsection