@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="name">Nama</label>
                <input 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
                <span class="help-block">{{ trans('cruds.device.fields.name_helper') }}</span>
            </div>
             <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) }}">
                @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="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) }}">
                @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="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}}">{{$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="site_id">Site</label>
                <select class="form-control select2" name="site_id">
                    <option value="">-</option>
                    @foreach (\App\Models\Site::get()->pluck('name', 'id') as $id=>$site)
                        <option value="{{$id}}">{{$site}}</option>
                    @endforeach
                </select>
                @if($errors->has('site_id'))
                    <div class="invalid-feedback">
                        {{ $errors->first('site_id') }}
                    </div>
                @endif
            </div>            
            @can('device_admin_access')
            <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="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>    
            <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