@extends('web.layouts.master')

@section('contents')

    <!-- start filter bar -->
    <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 $category)
                                                <option
                                                    value="{{ $category->id }}"> {{$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="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($home_categories 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>
                <div class="col-md-7 col-lg-8">
                    <div class="left-grid row">

                                                @foreach($banners as $banner)
                            @if($i == 1)
                                <div class="col-md-12 col-lg-12">
                                    <div class="banner-div lg-banner wow fadeIn">
                                        @else
                                            <div class="col-md-6 col-lg-6">
                                                <div class="banner-div wow fadeIn">


                                                    @endif


                                                    <a href="">
                                                        <img src="{{$banner->image}}"
                                                             @if($i == 1) style="width: 1132px;height: 310px"
                                                             @else style="width: 335px;height: 141px"
                                                             @endif class="img-fluid" alt="banner img">
                                                    </a>
                                                </div>
                                            </div>
                                                                                        @endforeach

                                    </div>
                                </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <!-- end brands  -->

    <!-- start -->
    <section class="filter-block grey-bg">
        <div class="nav-links white-bg">
            <div class="container">
                <ul class="nav nav-tabs" style="justify-content: center !important;" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link  active tap_category" id="nav-first-tab" data-toggle="tab" role="tab"
                           aria-controls="first-tab" data-id="null" aria-selected="true" style="cursor:pointer">@lang('data.all')</a>

                    </li>
                    @foreach($taps_categories as $tap_category)
                        <li class="nav-item">
                            <a class="nav-link tap_category" id="nav-second-tab" data-toggle="tab"
                               data-id="{{$tap_category->id}}" role="tab"
                               aria-controls="second-tab" aria-selected="false"
                               style="cursor:pointer">{{$tap_category->name[\App::getLocale()]}}</a>
                        </li>
                    @endforeach

                </ul>
            </div>
        </div>
        <div class="container">
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="first-tab" role="tabpanel" aria-labelledby="first-tab">
                    <div class="main-content">
                        <div class="title">
                            <div class="right-grid">
                                <h3 id="category_name">@lang('data.all')</h3>
                                <p style="cursor:pointer" id="tap_see_all" class="main-color">@lang('data.see_all')</p>
                                <p style="cursor:pointer" id="tap_see_new">@lang('data.only_new')</p>
                            </div>
                            <div class="left-grid">
                                <div class="single-select">
                                    <select name="city_id" onchange="city()" id="select_city" 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" 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 -->

@stop

@section('script')

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

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

                    $(".parent_category").html('');
                    $(".child_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();
                }
            });
        });
        $(".tap_category").on('click', function () {
            var category_id = $(this).data("id");
            console.log(category_id);
            $.ajax({
                type: 'GET',
                url: '{{route('get_tap_products')}}',
                data: {category_id: category_id},
                beforeSend: function (data) {
                    $("#post-search").html('');
                    $('.ajax-load').show();

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

                    $("#post-search").append(data.html);


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

        });
        $("#tap_see_all").on('click', function () {
            $("#tap_see_all").addClass('main-color');
            $("#tap_see_new").removeClass("main-color");


            $.ajax({
                type: 'GET',
                url: '{{route('get_tap_all')}}',
                data: {},
                beforeSend: function (data) {
                    $("#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();
                }
            });

        });
        $("#tap_see_new").on('click', function () {
            $("#tap_see_new").addClass('main-color');
            $("#tap_see_all").removeClass("main-color");

            $.ajax({
                type: 'GET',
                url: '{{route('get_tap_new')}}',
                data: {},
                beforeSend: function (data) {
                    $("#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 city() {

            var city_id = $("#select_city").val();

            console.log(city_id);

            $.ajax({
                type: 'GET',
                url: '{{route('tap_products_city')}}',
                data: {city_id: city_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>



@stop