@extends('layouts.app')

@section('link')
<link href="{{ asset('css/select2.min.css') }}" rel="stylesheet">
@endsection

@section('style')
<style type="text/css">   

</style>
@endsection

@section('content')
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Създаване на спортна площадка</h3>
                <div class="pull-right">
                    <button class="btn btn-primary back-btn" onclick="window.history.back()">Назад</button>
                </div>
            </div>

            <div class="panel-body">
                <form id="playground_create" method="POST" action="{{ route('admin.playgrounds.store') }}" class="form form-horizontal" enctype="multipart/form-data">
                    {{ csrf_field() }}

                    <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                        <label for="name" class="col-sm-2 col-form-label control-label">Име</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="name" name="name" value="{{old('name')}}"/>
                            @if ($errors->has('name'))
                                    <span class="help-block"><strong>{{ $errors->first('name') }}</strong></span>
                            @endif
                            <div class="errorBox"></div>
                        </div>
                    </div>
                    
                    <div class="form-group{{ $errors->has('domain_name') ? ' has-error' : '' }}">
                        <label for="domain_name" class="col-sm-2 col-form-label control-label">Име за домейн</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="domain_name" name="domain_name" value="{{old('domain_name')}}"/>
                            @if ($errors->has('domain_name'))
                                    <span class="help-block"><strong>{{ $errors->first('domain_name') }}</strong></span>
                            @endif
                            <div class="errorBox"></div>
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('user_id') ? ' has-error' : '' }}">
                        <label for="user" class="col-sm-2 col-form-label control-label">Потребител</label>
                        <div class="col-sm-8">                                
                            <select class="form-control" id="user" name="user_id">
                                <option value=""></option>
                                @foreach($users as $user)
                                <option value="{{$user->id}}" {{old('user_id')==$user->id ? "selected" : ""}}>{{$user->name}}</option>
                                @endforeach
                            </select>
                            @if ($errors->has('user_id'))
                                    <span class="help-block"><strong>{{ $errors->first('user_id') }}</strong></span>
                            @endif
                            <div class="errorBox"></div>
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('location_id') ? ' has-error' : '' }}">
                        <label for="location" class="col-sm-2 col-form-label control-label">Населено място</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="location" name="location_id">
                                <option value=""></option>
                                @foreach($locations as $location)
                                <option value="{{$location->id}}" {{old('location_id')==$location->id ? "selected" : ""}}>{{$location->name}}</option>
                                @endforeach
                            </select>
                            @if ($errors->has('location_id'))
                                    <span class="help-block"><strong>{{ $errors->first('location_id') }}</strong></span>
                            @endif
                            <div class="errorBox"></div>
                        </div>
                    </div>
                    
                    <div class="form-group{{ $errors->has('address') ? ' has-error' : '' }}">
                        <label for="pac-input" class="col-sm-2 col-form-label control-label">Адрес</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="pac-input" name="address" type="text" placeholder="Въведете местоположение" />
                            <input type="hidden" id="gps_lat" name="gps_lat" value=""/>
                            <input type="hidden" id="gps_lng" name="gps_lng" value=""/>
                            <div class="pac-card" id="pac-card">
                                <div id="pac-container">                                    
                                    
                                </div>
                            </div>
                            @if ($errors->has('address'))
                                    <span class="help-block"><strong>{{ $errors->first('address') }}</strong></span>
                            @endif
                            <div class="errorBox"></div>
                            <div id="map" style="width:100%;height:300px;"></div>
                        </div>
                    </div>     
                    
                    
                    <div class="form-group{{ $errors->has('sports[]') ? ' has-error' : '' }}">
                        <label for="sports" class="col-sm-2 col-form-label control-label">Спортове</label>
                        <div class="col-sm-8">   
                            @foreach(__('texte.sports_arr') as $key=>$value)
                                <label> 
                                    <input type="checkbox" value="{{$key}}" name="sports[]"> {{$value}} 
                                </label>                                 
                            @endforeach

                            @if ($errors->has('sports[]'))
                                    <span class="help-block"><strong>{{ $errors->first('sports[]') }}</strong></span>
                            @endif
                            <div class="errorBox"></div>
                        </div>
                    </div>         
                    
                    <div class="form-group{{ $errors->has('info') ? ' has-error' : '' }}">
                        <label for="description" class="col-sm-2 col-form-label control-label">Информация</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" id="info" name="info">{{ old('info') }}</textarea>
                            @if ($errors->has('info'))
                                <span class="help-block"><strong>{{ $errors->first('info') }}</strong></span>
                            @endif
                            <div class="errorBox"></div>
                        </div>
                    </div>
                    
                    <div class="form-group{{ $errors->has('image.*') ? ' has-error' : '' }}">
                        <label class="col-sm-2 col-form-label control-label">Лого</label>
                        <div class="col-sm-8">                            
                                
                            <div class="image_div">
                                <div class="img-row-edit">
                                    <img class="element_image" src="{{url('/images/empty_image.jpg')}}" alt="here goes the image"/>
                                </div>
                                <div class="img-row">
                                    <div class="margin--bottom-5">
                                        <div class="custom-file">
                                            <label class="btn btn-success m-btn--icon-only">
                                                <input class="custom-file-input" type="file" name="image">
                                                <i class="glyphicon glyphicon-upload"></i>
                                            </label>
                                            <a href="javascript:;" class="btn btn-danger m-btn--icon-only remove_image">
                                                <i class="glyphicon glyphicon-trash"></i>
                                            </a>
                                        </div>
                                        @if ($errors->has('image.*'))
                                            <span class="help-block"><strong>{{ $errors->first('image.*') }}</strong></span>
                                        @endif
                                        <div class="errorBox"></div>
                                    </div>
                                </div>
                                <div class="clear-both"></div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-12" style='text-align: center;'>
                            <button type="submit" class="btn btn-primary">Добави</button>
                        </div>
                    </div>

                </form>
            </div>
            <div class="panel-footer"></div>
        </div>
    </div>
</div>

<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/validation.js') }}"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrU5w4OnkGgneaQOGDKJzcv2wpYRZo7Bk&callback=initMap&libraries=places&v=weekly" defer></script>

<script src="{{ asset('js/select2.min.js') }}"></script>

<script src="/vendor/unisharp/ckeditor/ckeditor.js"></script>

<script type="text/javascript" charset="utf-8">
    
    var options = {
        filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
        filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
        filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
        filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}',
        filebrowserUploadMethod: 'form'
    };
    CKEDITOR.replace('info',options);     

    CKEDITOR.on('instanceReady', function(){
        $.each( CKEDITOR.instances, function(instance) {
            CKEDITOR.instances[instance].on("change",
                function(e) {
                        for ( instance in CKEDITOR.instances)
                            CKEDITOR.instances[instance].updateElement();
                });
          });
    });
                
    $('#location,#user').select2();
    
    var map;
    var marker;
    
    $(document).ready(function(){       
        initMap();
        
        marker.setVisible(false);
        map.setZoom(8);        
    });
    
    
    function initMap() {
        var lat = 42.607709548752355, lng = 26.01724681854248;
        
        var options = {
            zoom: 17,
            center: new google.maps.LatLng(lat, lng),
            mapTypeControlOptions: { mapTypeIds: [] },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            draggableCursor:'crosshair',
            draggingCursor: 'move'
        }
        
        map = new google.maps.Map(document.getElementById('map'), options);
        
        const card = document.getElementById("pac-card");
        const input = document.getElementById("pac-input");
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
        const autocomplete = new google.maps.places.Autocomplete(input); // Bind the map's bounds (viewport) property to the autocomplete object,
        // so that the autocomplete requests use the current map bounds for the
        // bounds option in the request.

        autocomplete.bindTo("bounds", map); // Set the data fields to return when the user selects a place.

        autocomplete.setFields([
          "address_components",
          "geometry",
          "icon",
          "name",
        ]);
        
        marker = new google.maps.Marker({position: {lat: lat, lng: lng}, map: map});
        
        
        autocomplete.addListener("place_changed", () => {          
          marker.setVisible(false);
          const place = autocomplete.getPlace();

          if (!place.geometry) {
            // User entered the name of a Place that was not suggested and
            // pressed the Enter key, or the Place Details request failed.
            window.alert(
              "No details available for input: '" + place.name + "'"
            );
            return;
          } // If the place has a geometry, then present it on a map.

          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17); // Why 17? Because it looks good.
          }

          marker.setPosition(place.geometry.location);
          marker.setVisible(true);
          
          $('#gps_lat').val(marker.getPosition().lat());
          $('#gps_lng').val(marker.getPosition().lng());
        });
        
        var geocoder = new google.maps.Geocoder();
        
        google.maps.event.addListener(map, 'click', function(event) {
            marker.setPosition(event.latLng);
            marker.setVisible(true);
            
            $('#gps_lat').val(marker.getPosition().lat());
            $('#gps_lng').val(marker.getPosition().lng());
            
            geocodeLatLng(event.latLng, geocoder)
            
        });
    }
    
    function geocodeLatLng(latlng, geocoder) {
        geocoder.geocode({'latLng': latlng}, function(results, status) {
            if(status == google.maps.GeocoderStatus.OK) {
              if (results[0]) {
                  $('#pac-input').val(results[0].formatted_address);
              }
              else {
                alert("No results");
              }
            }
            else {
              alert("Geocoding unsuccessful: Status " + status);
            }
        });
    }
    
    function readURL(element,input){
         if(input.files && input.files[0]) {
           var reader = new FileReader();
           reader.onload = function(e) {
             element.closest('.image_div').find('.element_image').attr('src', e.target.result);
           }
           reader.readAsDataURL(input.files[0]);
         }
     }

     $(document).on('change',".custom-file-input",function() {
        var element = $(this);
        $(this).closest('.margin--bottom-5').find('.errorBox').html('');
        $('.submit').attr('disabled',false);
        if($(this).val()!=''){
            if(this.files[0].size>5242880){
                $(this).closest('.margin--bottom-5').find('.errorBox').append('<label class="error size_error">Снимката трябва да бъде до 5МБ</label><br/>');
                $('.submit').attr('disabled',true);
            }
            else{
                $(this).closest('.margin--bottom-5').find('.errorBox').find('.size_error').remove();
            }
            
            if($.inArray(this.value.split('.').pop(),['jpg','jpeg','png','bmp','gif','svg'])==-1){
                $(this).closest('.image_div').find('.element_image').attr('src',"{{URL::asset('/images/empty_image.jpg')}}");
                $(this).closest('.image_div').find('.custom-file-input').val('').change();
                $(this).closest('.margin--bottom-5').find('.errorBox').append('<label class="error extension_error">Файлът трябва да е с разширение jpg, jpeg ,png ,bmp ,gif или svg.</label>');
                $('.submit').attr('disabled',true);
            }
            else{
                $(this).closest('.margin--bottom-5').find('.errorBox').find('.extension_error').remove();
            }
        }
         readURL(element,this);
     });

     $(document).on('click','.remove_image',function(){
         if($('.image_div').length>1){
             $(this).closest('.image_div').remove();
             if(!$('.error').length){
                 $('.submit').attr('disabled',false);
             }
         }
         else{
             $(this).closest('.image_div').find('.element_image').attr('src',"{{URL::asset('/images/empty_image.jpg')}}");
             $(this).closest('.image_div').find('.custom-file-input').val('').change();
         }
     });
     
     $(document).ready(function() {
        $(window).keydown(function(event){
          if(event.keyCode == 13) {
            event.preventDefault();
            return false;
          }
        });
    }); 
</script>




@endsection