@extends('admin.layouts.master')
@push('css')
{{--    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_foD6VvulHSpxKYjtgehkQ_UoVGHH64Y&libraries=places&callback=initMap"--}}
{{--            async defer></script>--}}

<style>
    #myMap {
        height: 350px;
        width: 680px;
    }

</style>



@endpush
@section('content')

    @include('admin.layouts.nav')
    @include('admin.layouts.navbar')


    <div class="app-content content">


        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-body">
                @include('admin.layouts.flash-message')
                @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
            @endif
            <!-- Data list view starts -->
                <section id="data-list-view" class="data-list-view-header">

                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">الفلتر</h4>
                            <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li><a data-action="collapse"><i class="feather icon-chevron-down"></i></a></li>
                                    <li><a data-action=""><i class="feather icon-rotate-cw users-data-filter"></i></a>
                                    </li>
                                    <li><a data-action="close"><i class="feather icon-x"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div class="users-list-filter">
                                    <form>
                                        <div class="row">
                                            <div class="col-12 col-sm-6 col-lg-3">
                                                <form method="post" action="{{ url('ads') }}">
                                                    <label for="users-list-role">حالة الاعلان</label>
                                                    <fieldset class="form-group">
                                                        <select name="status" class="form-control" id="users-list-role">
                                                            <option value="0">تحت المعالجة</option>
                                                            <option value="1">فعال</option>
                                                            <option value="2">منتهى</option>
                                                        </select>
                                                        <br>
                                                        <button type="submit" class="btn btn-danger btn-sm ">فلتر
                                                        </button>
                                                    </fieldset>
                                                </form>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>



                    <a href="{{route('ads.create')}}" class="btn btn-info">اضافه اعلان جديد</a>


                    <!-- DataTable starts -->
                    <div class="table-responsive">
                        <table class="table data-list-view">
                            <thead>
                            <tr>
                                <th></th>
                                <th> التسلسل</th>
                                <th> النوع</th>
                                <th>حاله الاعلان</th>
                                <th>المالك</th>
                                <th> تميز الاعلان</th>
                                <th>المزيد</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach( $ads  as $ad)
                                <tr>
                                    <td></td>
                                    <td class="product-name">{{ $ad->id  }}</td>
                                    <td class="product-name">{{ $ad->type()?->first()->name  }}</td>
                                    <td>
                                        @if(  $ad->status !=  '1'  )
                                            <div class="chip chip-danger">
                                                <div class="chip-body">
                                                    <div class="chip-text"> تحت المراجعة</div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="chip chip-success">
                                                <div class="chip-body">
                                                    <div class="chip-text"> تمت الموافقه</div>
                                                </div>
                                            </div>
                                        @endif
                                    </td>
                                    <td class="product-name">{{ $ad->user?->name  }}</td>
                                    <td>
                                        @if(  $ad->featured_ad !=  1  )
                                            <div class="chip chip-danger">
                                                <div class="chip-body">
                                                    <div class="chip-text"> الاعلان غير مميز</div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="chip chip-success">
                                                <div class="chip-body">
                                                    <div class="chip-text"> الاعلان مميز</div>
                                                </div>
                                            </div>
                                        @endif
                                    </td>
                                    <td class="product-action">

                                        <a class="btn btn-success btn-sm "
                                           href="{{ route('ads.edit',$ad->id) }}">
                                            تعديل
                                        </a>


                                        <form action="{{ route('ads.destroy',$ad->id) }}" method="POST">
                                            <a type="submit" class="btn btn-info btn-sm "
                                               href="{{ route('ads.show',$ad->id) }}">
                                                عرض
                                            </a>
                                            @if(  $ad->status ==  \App\Models\Ad::Pending )
                                                <a type="submit" class="btn btn-warning btn-sm "
                                                   href="{{ route('ads.approve',$ad->id) }}">
                                                    موافقة
                                                </a>
                                            @endif
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm ">حذف</button>
                                        </form>

                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <!-- DataTable ends -->
                </section>
                <!-- Data list view end -->

            </div>
        </div>
    </div>
    <!-- END: Content-->

    <div class="sidenav-overlay"></div>
    <div class="drag-target"></div>


@endsection
@push('js')
{{--    <script>--}}
{{--        function initialize() {--}}

{{--            $('form').on('keyup keypress', function(e) {--}}
{{--                var keyCode = e.keyCode || e.which;--}}
{{--                if (keyCode === 13) {--}}
{{--                    e.preventDefault();--}}
{{--                    return false;--}}
{{--                }--}}
{{--            });--}}
{{--            const locationInputs = document.getElementsByClassName("map-input");--}}

{{--            const autocompletes = [];--}}
{{--            const geocoder = new google.maps.Geocoder;--}}
{{--            for (let i = 0; i < locationInputs.length; i++) {--}}

{{--                const input = locationInputs[i];--}}
{{--                const fieldKey = input.id.replace("-input", "");--}}
{{--                const isEdit = document.getElementById(fieldKey + "-latitude").value != '' && document.getElementById(fieldKey + "-longitude").value != '';--}}

{{--                const latitude = parseFloat(document.getElementById(fieldKey + "-latitude").value) || 29.375859;--}}
{{--                const longitude = parseFloat(document.getElementById(fieldKey + "-longitude").value) || 47.9774052;--}}

{{--                const map = new google.maps.Map(document.getElementById(fieldKey + '-map'), {--}}
{{--                    center: {lat: latitude, lng: longitude},--}}
{{--                    zoom: 12--}}
{{--                });--}}
{{--                const marker = new google.maps.Marker({--}}
{{--                    map: map,--}}
{{--                    // draggable: true,--}}
{{--                    position: {lat: latitude, lng: longitude},--}}
{{--                    draggable: true,--}}
{{--                    animation: google.maps.Animation.DROP,--}}

{{--                });--}}

{{--                marker.addListener('click', toggleBounce);--}}


{{--                marker.setVisible(isEdit);--}}

{{--                const autocomplete = new google.maps.places.Autocomplete(input);--}}
{{--                autocomplete.key = fieldKey;--}}
{{--                autocompletes.push({input: input, map: map, marker: marker, autocomplete: autocomplete});--}}
{{--            }--}}

{{--            for (let i = 0; i < autocompletes.length; i++) {--}}
{{--                const input = autocompletes[i].input;--}}
{{--                const autocomplete = autocompletes[i].autocomplete;--}}
{{--                const map = autocompletes[i].map;--}}
{{--                const marker = autocompletes[i].marker;--}}

{{--                google.maps.event.addListener(autocomplete, 'place_changed', function () {--}}
{{--                    marker.setVisible(false);--}}
{{--                    const place = autocomplete.getPlace();--}}

{{--                    geocoder.geocode({'placeId': place.place_id}, function (results, status) {--}}
{{--                        if (status === google.maps.GeocoderStatus.OK) {--}}
{{--                            const lat = results[0].geometry.location.lat();--}}
{{--                            const lng = results[0].geometry.location.lng();--}}
{{--                            setLocationCoordinates(autocomplete.key, lat, lng);--}}
{{--                        }--}}
{{--                    });--}}

{{--                    if (!place.geometry) {--}}
{{--                        window.alert("No details available for input: '" + place.name + "'");--}}
{{--                        input.value = "";--}}
{{--                        return;--}}
{{--                    }--}}

{{--                    if (place.geometry.viewport) {--}}
{{--                        map.fitBounds(place.geometry.viewport);--}}
{{--                    } else {--}}
{{--                        map.setCenter(place.geometry.location);--}}
{{--                        map.setZoom(17);--}}
{{--                    }--}}
{{--                    marker.setPosition(place.geometry.location);--}}
{{--                    marker.setVisible(true);--}}

{{--                });--}}
{{--            }--}}
{{--        }--}}

{{--        function setLocationCoordinates(key, lat, lng) {--}}
{{--            const latitudeField = document.getElementById(key + "-" + "latitude");--}}
{{--            const longitudeField = document.getElementById(key + "-" + "longitude");--}}
{{--            latitudeField.value = lat;--}}
{{--            longitudeField.value = lng;--}}
{{--        }--}}


{{--        function toggleBounce() {--}}
{{--            if (marker.getAnimation() !== null) {--}}
{{--                marker.setAnimation(null);--}}
{{--            } else {--}}
{{--                marker.setAnimation(google.maps.Animation.BOUNCE);--}}
{{--            }--}}
{{--        }--}}
{{--    </script>--}}

{{--    --}}{{--    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_foD6VvulHSpxKYjtgehkQ_UoVGHH64Y&callback=myMap"></script>--}}
{{--    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_foD6VvulHSpxKYjtgehkQ_UoVGHH64Y&callback=initialize&libraries=places" async defer></script>--}}



    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA_foD6VvulHSpxKYjtgehkQ_UoVGHH64Y">
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
    </script>
    <script type="text/javascript">
        var map;
        var marker;
        var myLatlng = new google.maps.LatLng(29.375859,47.9774052);
        var geocoder = new google.maps.Geocoder();
        var infowindow = new google.maps.InfoWindow();
        function initialize(){
            var mapOptions = {
                zoom: 18,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("myMap"), mapOptions);

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

            geocoder.geocode({'latLng': myLatlng }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        $('#latitude,#longitude').show();
                        $('#address').val(results[0].formatted_address);
                        $('#latitude').val(marker.getPosition().lat());
                        $('#longitude').val(marker.getPosition().lng());
                        infowindow.setContent(results[0].formatted_address);
                        infowindow.open(map, marker);
                    }
                }
            });

            google.maps.event.addListener(marker, 'dragend', function() {

                geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            $('#address').val(results[0].formatted_address);
                            $('#latitude').val(marker.getPosition().lat());
                            $('#longitude').val(marker.getPosition().lng());
                            infowindow.setContent(results[0].formatted_address);
                            infowindow.open(map, marker);
                        }
                    }
                });
            });

        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>


@endpush