@extends('admin.layouts.admin')

@section('title', 'Edit Vehicle' )

@section('content')
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            {{ Form::open(['route'=>['admin.buses.update', $bus->id],'method' => 'put','class'=>'form-horizontal form-label-left']) }}

            @include('admin.snippets.input_text', ['field' => 'bus_number', 'title' => 'Vehicle Number Plate', 'required' => true, 'value' => $bus->bus_number])
            @include('admin.snippets.input_text', ['field' => 'make', 'placeholder' => 'Toyota,Isuzu','placeholder','title'=>"Make",'value'=>$bus->make])
                        @include('admin.snippets.input_select', ['field' => 'fuel', 'title' => 'Fuel Type', 'items' => $type_obj,'key' => 'fuel','required' => true,'value'=>'fuel','selected'=>$bus->fuel])

            @include('admin.snippets.input_text', ['field' => 'capacity', 'placeholder' => '13 seater','title'=>"Capacity",'value'=>$bus->capacity])

            @include('admin.snippets.input_select', [
                'field' => 'route_id', 'title' => 'Select Route', 'items' => $routes,
                'key' => 'id', 'value' => 'title', 'required' => true, 'selected' => $bus->route_id])

            @include('admin.snippets.input_select', [
            'field' => 'school_id', 'title' => 'Select School', 'items' => $schools, 'key' => 'id',
            'value' => 'school_name', 'required' => true, 'selected' => $bus->school_id])

            @include('admin.snippets.input_select', [
                'field' => 'current_location', 'title' => 'Current Location' ,'items' => ['SCHOOL', 'DROP', 'PICKUP','IDLE'],
                'selected' => $bus->current_location, 'required' => true])

            {{--@include('admin.snippets.input_text', ['field' => 'current_lat', 'title' => 'Current Latitude', 'value' => $bus->current_lat])--}}

            {{--@include('admin.snippets.input_text', ['field' => 'current_lat', 'title' => 'Current Longitude', 'value' => $bus->current_lat])--}}

            <div class="form-group">
                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                    <a class="btn btn-primary" href="{{ route('admin.buses') }}">Back</a>
                    <button type="submit" class="btn btn-success"> Save</button>
                </div>
            </div>

            <div class="form-group" style="margin-top: 30px;">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">
                    Location on map
                </label>
                <div class="col-sm-9 col-xs-12">
                    <div id="map" style="height: 500px;" class="col-xs-9"></div>
                </div>
            </div>
            {{ Form::close() }}
        </div>
    </div>
@endsection

@section('scripts')
    @parent

    <script>
        // map
        var map;
        var marker;
        function initMap() {
            var myLatLng = {lat: -25.363, lng: 131.044};

            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: myLatLng
            });

            marker = new google.maps.Marker({
                map: map
            });

            console.log(marker);
        }
    </script>

    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key={{ config('firebase.api_key') }}&callback=initMap"
            type="text/javascript"></script>
    <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "{{ config('firebase.api_key') }}",
            authDomain: "{{ config('firebase.auth_domain') }}",
            databaseURL: "{{ config('firebase.database_url') }}",
            projectId: "{{ config('firebase.project_id') }}",
            storageBucket: "{{ config('firebase.storage_bucket') }}",
            messagingSenderId: "{{ config('firebase.sender_id') }}"
        };
        firebase.initializeApp(config);
        var ref = firebase.database().ref('buses/' + '{{ $bus->id }}');
        ref.on('value', function (snapshot) {
            var newLatLng = new google.maps.LatLng(snapshot.val().lat, snapshot.val().lang);
            marker.setPosition(newLatLng);
            map.setCenter(newLatLng);
            map.setZoom(13);
        });

    </script>
@endsection