@extends('web.layouts.master')
@section('title' , $category->name[\App::getLocale()])
@section('contents')
    <!-- start filter bar -->
    <input hidden value="{{$category->id}}" id="category_id">



    <section class="filter-bar">
        <div class="container">
            <div class="row">

                <div class="col-md-5 col-lg-4">

                    <div class="right-grid">

                        <form action="{{route('filter_home')}}" method="GET" enctype="multipart/form-data">

                            <div class="row">
                                {{--                                {{csrf_field()}}--}}
                                <div class="col-12">
                                    <div class="single-select">

                                        <select name="grand_id" id="slctall" class="custom-select grand_category">
                                            <option value="null" selected>@lang('data.select_haraj')</option>
                                            @foreach(\App\Models\Category::whereParentId(null)->get() as $s_category)
                                                <option
                                                    value="{{ $s_category->id }}"> {{$s_category->name[\App::getLocale()]}} </option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('grand_id'))
                                            <small class="text-danger">{{ $errors->first('grand_id') }}</small>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6">
                                    <div class="single-select mt">
                                        <select name="parent_id" id="slct" class="custom-select parent_category">

                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6">
                                    <div class="single-select mt">
                                        <select name="child_id" id="slct2" class="custom-select child_category">

                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12 col-lg-12">
                                    <div class="single-select mt">
                                        <button type="submit" class="btn btn-main btn-hover full-width-btn btn-submit">

                                            @lang('data.search')
                                        </button>
                                    </div>
                                </div>


                            </div>
                        </form>

                    </div>

                </div>
                <div class="col-md-7 col-lg-8">
                    <div class="row">
                        <div class="col-12">
                            <div class="left-grid form-group search-box">
                                <span class="icon"><i class="fas fa-search"></i></span>
                                <form action="{{route('search')}}" method="GET" enctype="multipart/form-data">
                                    {{--                                    @csrf--}}
                                    <input name="search" type="search" required class="form-control"

                                           placeholder="@lang('data.search_for_product')">

                                    <button class="btn search-btn">@lang('data.search')</button>

                                </form>

                            </div>
                            @if ($errors->has('search'))
                                <small class="text-danger">{{ $errors->first('search') }}</small>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- end filter bar -->

    <!-- start brands  -->
    <section class="filter-block all-brands white-bg">
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-lg-4">
                    <div class="right-grid">
                        <ul class="list-unstyled brands-list">
                            @foreach(\App\Models\Category::where(['status'=>'active', 'parent_id'=>\App\Models\Setting::first()->value('category_id') ])->get() as $cat)
                                <li class="brand-col wow fadeInUp">
                                    <a href="{{route('categories',$cat->id)}}">
                                        <img src="{{$cat->image}}" class="img-fluid"
                                             alt="brand img">
                                    </a>
                                </li>
                            @endforeach

                        </ul>
                    </div>
                    <div class="right-grid">
                        <ul class="list-unstyled all-categories">
                           @foreach($key_words as $key_word)
                            <li class="border-link wow fadeInUp">
                                <a href="{{route('categories',$key_word->id)}}">{{$key_word->name[\App::getLocale()]}}</a>
                            </li>
                               @endforeach

                        </ul>
                    </div>
                </div>
                <div class="col-md-7 col-lg-8 grey-bg">
                    <div class="main-content">
                        <div class="title">
                            <div class="right-grid">
                                <h3>{{$category->name[\App::getLocale()]}}</h3>
                                <p style="cursor:pointer ;    margin: 0 15px;" id="all_products" class="main-color">@lang('data.see_all')</p>
                                <p style="cursor:pointer" id="new_products">@lang('data.only_new')</p>
                            </div>
                            <div class="left-grid d-flex">
                                <div class="round-sh ch-grid">
                                    <img src="{{asset('web/img/dynamic/icons/menu.png')}}" alt="img">
                                </div>
                                <div class="round-sh single-select sm-img">
                                    <a onclick="mark_in()">
                                        <img src="{{asset('web/img/dynamic/icons/cursor.png')}}" alt="img">
                                        <span class="text">@lang('data.nearest')</span>
                                    </a>
                                </div>
                                <div class="single-select">
                                    <select name="city_id" onchange="city()" id="slct02" class="custom-select">
                                        <option value="0">@lang('data.select_city')</option>
                                        @foreach(\App\Models\City::all() as $city)
                                            <option value="{{$city->id}}">{{$city->name[App::getLocale()]}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row grid-cols" id="post-search">
                            @include('web.data.data_search')

                        </div>
                        <div class="ajax-load text-center" style="display:none">
                            <p><img style="width: 75px;" src="{{asset('loading_image.gif')}}"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end brands  -->


@endsection


@section('script')
    <script>


        function city() {

            var city_id = $("#slct02").val();
            var search = $("input[name=search]").val();
            var category_id = $("#category_id").val();


            console.log(search, city_id, category_id);

            $.ajax({
                type: 'POST',
                url: '{{route('search_city_ajax')}}',
                data: {search: search, city_id: city_id, category_id: category_id},
                beforeSend: function () {
                    $("#post-search").html('');
                    $('.ajax-load').show();

                },
                success: function (data) {
                    console.log(data.html);
                    $('.ajax-load').hide();
                    $("#post-search").append(data.html);


                },
                error: function (jqXHR, textStatus, errorThrown) {
                    errorFunction();
                }
            });

        }

        function mark_in() {
            // if (navigator.geolocation) {
            //     navigator.geolocation.getCurrentPosition(showPosition);
            // } else {
            //     x.innerHTML = "Geolocation is not supported by this browser.";
            // }
            //
            // function showPosition(position) {
            //     $('#lat').val(position.coords.latitude);
            //     $('#lng').val(position.coords.longitude);
            //     // x.innerHTML = "Latitude: " + position.coords.latitude +
            //     //     "<br>Longitude: " + position.coords.longitude;
            // }

            navigator.geolocation.getCurrentPosition(function (position) {
                var lat = position.coords.latitude;
                var lng = position.coords.longitude;
                var search = $("input[name=search]").val();
                var category_id = $("#category_id").val();

                console.log(search, lng, lat, category_id);

                $.ajax({
                    type: 'POST',
                    url: '{{route('search_location_ajax')}}',
                    data: {search: search, lat: lat, lng: lng, category_id: category_id},
                    beforeSend: function () {
                        $("#post-search").html('');
                        $('.ajax-load').show();

                    },
                    success: function (data) {
                        console.log(data.html);
                        $('.ajax-load').hide();
                        $("#post-search").append(data.html);


                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        errorFunction();
                    }
                });
            }, function () {
                Swal.fire({
                    title: '{{trans('data.error')}}',
                    text: 'لا يمكن البحث بالاقرب الا باعطاء الصلاحية',
                    icon: 'error',
                    confirmButtonText: '{{trans('data.close')}}'
                });
            });

        }
    </script>
    <script>
        $(".grand_category").on('change', function () {
            var category_id = $(".grand_category").val();
            $.ajax({
                type: 'GET',
                url: '{{route('get_parent_categories_ajax')}}',
                data: {category_id: category_id},

                success: function (data) {
                    console.log(data.parent_view);

                    $(".parent_category").html('');
                    $(".parent_category").append(data.parent_view);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    errorFunction();
                }
            });
        });

        $(".parent_category").on('change', function () {
            var category_id = $(".parent_category").val();
            $.ajax({
                type: 'GET',
                url: '{{route('get_categories_ajax')}}',
                data: {category_id: category_id},

                success: function (data) {
                    console.log(data.child_view);

                    $(".child_category").html('');
                    $(".child_category").append(data.child_view);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    errorFunction();
                }
            });
        });
        $("#new_products").on('click', function () {
            $("#new_products").addClass('main-color');
            $("#all_products").removeClass("main-color");
            var category_id = $("#category_id").val();
            $.ajax({
                type: 'GET',
                url: '{{route('search_new_products')}}',
                data: { category_id: category_id},
                beforeSend: function () {
                    $("#post-search").html('');
                    $('.ajax-load').show();

                },
                success: function (data) {
                    console.log(data.html);
                    $('.ajax-load').hide();
                    $("#post-search").append(data.html);


                },
                error: function (jqXHR, textStatus, errorThrown) {
                    errorFunction();
                }
            });
        });
        $("#all_products").on('click', function () {
            $("#all_products").addClass('main-color');
            $("#new_products").removeClass("main-color");
            var category_id = $("#category_id").val();
            $.ajax({
                type: 'GET',
                url: '{{route('search_all_products')}}',
                data: {category_id: category_id},
                beforeSend: function () {
                    $("#post-search").html('');
                    $('.ajax-load').show();

                },
                success: function (data) {
                    console.log(data.html);
                    $('.ajax-load').hide();
                    $("#post-search").append(data.html);


                },
                error: function (jqXHR, textStatus, errorThrown) {
                    errorFunction();
                }
            });
        });
    </script>

@endsection