{{-- Extends layout --}}
@extends('front.layouts.app')

{{-- Content --}}
@section('content')


    <nav class="navbar navbar-expand-lg navbar-light p-0">
        <h4 class="mb-0 pr-2 ls1  font-weight-bold"> {{ __('Yeni Tespit Girişi') }}</h4>
    </nav>

    <div class="line line-xs line-dark"></div>

    <div class="card card-custom w-100">

        <!--begin::Form-->
        <form class="form" method="POST" action="{{ route('member.determination_save') }}"
            enctype="multipart/form-data" onsubmit="return validateDeterminationFormSubmit();">
            @csrf
            @method('PATCH')
            <div class="card-body">
                @component('front.components.select_recursive', [
                    'label' => __('Kategori'),
                    'name' => 'determination_category_id',
                    'options' => $categories,
                    'option_id' => 'id',
                    'option_value' => 'title',
                    'selected_value' => old('determination_category_id') ? old('determination_category_id') : null,
                    'suffix' => __('Tanımladığını canlı türüne ilişkin kategoriyi seçiniz. Sadece bir seçim yapabilirsiniz.'),
                    'required' => 'REQUIRED',
                    ])
                @endcomponent
                @component('front.components.determination_type_select', [
                    'label' => __('Kayıt tipi'),
                    'name' => 'determination_type_id',
                    'options' => $types,
                    'option_id' => 'id',
                    'option_value' => 'title',
                    'selected_value' => old('determination_type_id') ? old('determination_type_id') : null,
                    'placeholder' => __('Lütfen tespit tipi seçiniz'),
                    'required' => 'REQUIRED',
                    ])
                @endcomponent
                @component('front.components.determination_specie_guess', [
                    'label' => __('Canlı Türü (Bilimsel İsim)'),
                    'name' => 'specie_guess',
                    'value' => old('specie_guess') ? old('specie_guess') : null,
                    'placeholder' => __('Lütfen tür tanımı giriniz'),
                    'suffix' => __(' Türü tanımlamak için kutuya tür ismini giriniz. Tanımladığnız tür bir uzman tarafından
                    onaylandığı taktirde kesinlik kazanacaktır. '),
                    ])
                @endcomponent
                @component('front.components.images_upload', [
                    'label' => __(' Canlının resimlerini giriniz..'),
                    'suffix' => __('Yüklemek istediğiniz fotoğraf en fazla 1.5 MB olmalıdır. İlk seçtiğiniz resim asıl resim,
                    diğerleri ise tespitinizin destekleyici resimleri olarak kaydedilecektir. Yüklediğiniz resimlerin sırasını
                    ok simgelerine tıklayarak değiştirebilirsiniz.'),
                    ])
                @endcomponent
                @component('front.components.date', [
                    'label' => __('Tarih'),
                    'name' => 'seen_at',
                    'value' => old('seen_at') ? old('seen_at') : null,
                    'placeholder' => __('Tespit edilen tarih'),
                    'suffix' => __('DİKKAT...Tespitinizin tanımlanabilmesi için sağdaki tarih seçiçiyi kullanınız...'),
                    'required' => 'REQUIRED',
                    ])
                @endcomponent
                @component('front.components.determination_equipment_autocomplete', [
                    'label' => __('Ekipman'),
                    'name' => 'determination_equipment_name',
                    'value' => old('determination_equipment_name'),
                    'placeholder' => __('Ekipman giriniz'),
                    'suffix' => __('Ekipmanın gövde modelini belirtin.. '),
                    ])
                @endcomponent
                @component('front.components.determination_equipment_lens_autocomplete', [
                    'label' => __('Ekipman'),
                    'name' => 'determination_equipment_lens_name',
                    'value' => old('determination_equipment_lens_name'),
                    'placeholder' => __('Lens giriniz'),
                    'suffix' => __('Ekipmanın lens modelini belirtin.. '),
                    ])
                @endcomponent
                @component('front.components.input', [
                    'label' => __('Başlık'),
                    'name' => 'title',
                    'value' => old('title'),
                    'placeholder' => __('Lütfen başlık giriniz'),
                    'suffix' => __('Tespitin sitede hangi isimle görüntülenmesini istiyorsunuz? '),
                    'required' => 'REQUIRED',
                    ])
                @endcomponent
                @component('front.components.textarea', [
                    'label' => __('Açıklama'),
                    'name' => 'text',
                    'value' => old('text'),
                    'placeholder' => 'Lütfen açıklama giriniz',
                    'class' => 'editor',
                    'suffix' => __('Lütfen gözlem detaylarını giriniz...'),
                    ])
                @endcomponent


                @component('front.components.determination_map_locations')
                @endcomponent

                @component('front.components.select', [
                    'label' => __('Ülke'),
                    'name' => 'determination_country_id',
                    'options' => $countries,
                    'option_id' => 'id',
                    'option_value' => 'title',
                    'selected_value' => old('determination_country_id') ? old('determination_country_id') :
                    App\Models\DeterminationCountry::TURKEY,
                    'suffix' => __('Lütfen bir ülke seçiniz...'),
                    'required' => 'REQUIRED',
                    ])
                @endcomponent

                @component('front.components.determination_city', [
                    'label' => __('Şehir'),
                    'name' => 'determination_city_title',
                    'selected_value' => null,
                    'value' => old('determination_city_title'),
                    'placeholder' => 'Lütfen şehir giriniz',
                    'required' => 'REQUIRED',
                    ])
                @endcomponent



            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-success mr-2">{{ __('Kaydet') }}</button>
                <button type="reset" class="btn btn-secondary">{{ __('İptal') }}</button>
            </div>




        </form>
        <!--end::Form-->
    </div>
@endsection

@section('styles')
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .ui-autocomplete-loading {
            background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
        }

    </style>
@endsection
@section('scripts')

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
        integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

    <script src="{{ asset('js/plupload.full.min.js') }}"></script>
    <script>
        $(function() {
            $("#determination_city_title").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('json.cities') }}",
                        dataType: "json",
                        data: {
                            term: request.term,
                            country_id: $("#determination_country_id").val()
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                },
                minLength: 2,
                select: function(event, ui) {
                    $("#determination_city_title").val(ui.item.value);
                    $("#determination_city_id").val(ui.item.id);
                    $("#location-text-box").val(ui.item.value);
                }
            });
        });

        $(function() {
            $("#determination_equipment_name").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('json.equipments') }}",
                        dataType: "json",
                        data: {
                            term: request.term,
                            type: "{{ App\Models\DeterminationEquipment::GOVDE }}"
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                },
                minLength: 2,
                select: function(event, ui) {
                    $("#equipment_list").val(ui.item.value);
                    $("#determination_equipment_id").val(ui.item.id);
                }
            });
        });

        $(function() {
            $("#determination_equipment_lens_name").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('json.equipments') }}",
                        dataType: "json",
                        data: {
                            term: request.term,
                            type: "{{ App\Models\DeterminationEquipment::LENS }}",
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                },
                minLength: 2,
                select: function(event, ui) {
                    $("#determination_equipment_lens_id").val(ui.item.id);
                }
            });
        });
    </script>

    <script type="text/javascript">
        // Custom example logic

        var uploader = new plupload.Uploader({
            runtimes: 'html5,flash,silverlight,html4',
            browse_button: 'pickfiles', // you can pass an id...
            container: document.getElementById('container'), // ... or DOM Element itself
            url: '{{ route('member.image.upload') }}',
            http_method: 'POST',
            flash_swf_url: '../js/Moxie.swf',
            silverlight_xap_url: '../js/Moxie.xap',
            multipart_params: {
                "_token": "{{ csrf_token() }}",
            },
            filters: {
                max_file_size: '4MB',
                mime_types: [{
                    title: "Image files",
                    extensions: "jpg,gif,png"
                }, ]
            },

            init: {
                PostInit: function() {
                    document.getElementById('filelist').innerHTML = '';

                    document.getElementById('uploadfiles').onclick = function() {
                        uploader.start();
                        return false;
                    };
                },

                FilesAdded: function(up, files) {
                    cntr = 1;
                    plupload.each(files, function(file) {
                        document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' +
                            file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
                        document.getElementById('filelist').innerHTML +=
                            '<input type="hidden" name="images[]" id="' + cntr + '" value="' + file
                            .name + '" />';
                        cntr++;

                        if (cntr == 5) {
                            document.getElementById('console').appendChild(document.createTextNode(
                                "Üzgünüz. En fazla 4 resim yükleme hakkınız bulunmaktadır."));
                            return false;
                        }
                    });


                },

                UploadProgress: function(up, file) {
                    document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file
                        .percent + "%</span>";
                },

                Error: function(up, err) {
                    document.getElementById('console').appendChild(document.createTextNode("\nError #" + err
                        .code + ": " + err.message));
                }
            }
        });

        uploader.init();


        ///

        $("#determination_type_id").change(
            function() {
                if ($(this).val() == "1") // if this is Onaya Gönder
                {
                    $("#specie_guess_container").show("slow", function() {});
                } else {
                    $("#specie_guess_container").hide("slow", function() {});
                }
            }
        );
    </script>

    {{-- Google Maps --}}
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyChRAIjH-F2TEjUyw_2RruRhSXIMiFZlXA&libraries=geometry,places">
    </script>
    <script>
        var map;
        var marker;

        function initialize() {
            var mapOptions = {
                zoom: 12
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

            // Get GEOLOCATION
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = new google.maps.LatLng(position.coords.latitude,
                        position.coords.longitude);

                    map.setCenter(pos);
                    marker = new google.maps.Marker({
                        position: pos,
                        map: map,
                        draggable: true
                    });
                }, function() {
                    handleNoGeolocation(true);
                });
            } else {
                // Browser doesn't support Geolocation
                handleNoGeolocation(false);
            }

            function handleNoGeolocation(errorFlag) {
                if (errorFlag) {
                    var content = 'Error: The Geolocation service failed.';
                } else {
                    var content = 'Error: Your browser doesn\'t support geolocation.';
                }

                var options = {
                    map: map,
                    position: new google.maps.LatLng(60, 105),
                    content: content
                };

                map.setCenter(options.position);
                marker = new google.maps.Marker({
                    position: options.position,
                    map: map,
                    draggable: true
                });

            }

            // get places auto-complete when user type in location-text-box
            var input = /** @type {HTMLInputElement} */
                (
                    document.getElementById('location-text-box'));


            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);

            var infowindow = new google.maps.InfoWindow();
            marker = new google.maps.Marker({
                map: map,
                anchorPoint: new google.maps.Point(0, -29),
                draggable: true
            });

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                infowindow.close();
                marker.setVisible(false);
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    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.setIcon( /** @type {google.maps.Icon} */ ({
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(35, 35)
                }));
                marker.setPosition(place.geometry.location);
                marker.setVisible(true);

                var address = '';
                if (place.address_components) {
                    address = [
                        (place.address_components[0] && place.address_components[0].short_name || ''), (place
                            .address_components[1] && place.address_components[1].short_name || ''), (place
                            .address_components[2] && place.address_components[2].short_name || '')
                    ].join(' ');
                }

                $("#determination_city_title").val(sehirAdiniAyikla());
                setMarkerPositions();

            });
            myMarkerListener();
        }

        google.maps.event.addDomListener(window, 'load', initialize);

        function myMarkerListener() {
            marker.addListener("drag", function(evt) {
                $("#latitude").val(evt.latLng.lat());
                $("#longitude").val(evt.latLng.lng());
            });
        }

        function myCenterListener() {

            map.addListener("center_changed", function() {
                setMarkerPositions();
            });
        }

        $(document).ready(function() {
            setTimeout("myMarkerListener()", 2000);
        });

        function setMarkerPositions() {
            if (marker) {
                $("#latitude").val(marker.getPosition().lat());
                $("#longitude").val(marker.getPosition().lng());
            }
        }

        function sehirAdiniAyikla() {
            var address = $("#location-text-box").val();
            var tmparr = address.split(',');
            var sehir = tmparr[tmparr.length - 2];
            if(sehir){
                var cityarr = sehir.trim().split('/');
            var raw_city = cityarr[cityarr.length - 1];
            return raw_city;
            }

        }

        function validateDeterminationFormSubmit(){

            if(!document.getElementById('filelist').innerHTML.includes('<b><span>100%</span></b>')){
                alert("{{ __('Lütfen en az bir resim seçip Resimleri Yükle butonuna tıklayınız') }}");
                return false;
            }
            return true;
        }
    </script>
@endsection