@extends('web.layouts.layout')

@section('css')
    <link rel="stylesheet" href="{{asset('assets/web/css/customer_styles.css')}}" />
    <link rel="manifest" href="{{asset('manifest.json')}}">
@endsection

@section('container_content')
    <input type="hidden" class="token_rout" value="{{route('customer.getToken')}}">
    <input type="hidden" class="device_token" value="">
    <!--Contents-->
    <main class="menu-main">
        <section class="home">
            <div class="container">
                @include('web.layouts.partial')
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <div class="mb-5">
                            <h4>Choose your Category & Vendor</h4>
                            <p>Choose from the categories below to show Vendors</p>
                        </div>
                        <div class="sections">
                            <div class="owl-carousel owl-theme">
                                @foreach ($categories as $category)
                                    <div class="items text-center">
                                        <a href="{{route('customer.getCategoryShops', $category->id)}}" data-method="get" class="icons category_link">
                                            <img src="{{asset('assets/web/images/icons/stethoscope.svg')}}" alt="">
                                        </a>
                                        <h5>{{$category->name}}</h5>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="content section-padding">
                            <div class="row category_shops_container">
                                @foreach ($shops as $shop)
                                    <div class="col-lg-6 removed_container">
                                        <div class="items">
                                            <div class="img">
                                                <img src="{{$shop->photo ? asset($shop->photo) : asset('assets/web/images/item-1.jpg')}}" alt="">
                                            </div>
                                            <div class="info" data-lat="{{$shop->latitude}}" data-lng="{{$shop->longitude}}">
                                                <h6><a href="{{route('customer.numbers', $shop->id)}}">{{$shop->name}}</a></h6>
                                                <p><img src="{{asset('assets/web/images/icons/location.svg')}}" alt=""> <span></span></p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @include('web.layouts.customer_side_menu')

    </main>
    <!--End-Contents-->

@endsection

@section('inner_js')
    {{-- FIREBASE--}}
    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-app.js"></script>

    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
    {{--    <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-analytics.js"></script>--}}

    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-auth.js"></script>
    {{--    <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-firestore.js"></script>--}}
    <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-messaging.js"></script>
    <script>
        var max_range = "{{settingRang()->max_range}}";
    </script>
    <script src="{{asset('assets/web/js/home.js')}}"></script>
    {{--    <script src="{{asset('firebase-messaging-sw.js')}}"></script>--}}
@endsection