@extends('landing.layouts.app')

@section('content')
    <div class="container p-0 fadeIn">

        <div class="mt-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('landing.nearbyStore') }}"
                                                   style="text-decoration: none" class="text-primary text-capitalize">Stores</a>
                    </li>
                    <li class="breadcrumb-item active text-dark text-capitalize"
                        aria-current="page">{{ $store->name }}</li>
                </ol>
            </nav>
        </div>

        <div class="mt-2  pb-2 mb-4">
            <div class="d-flex align-items-center gap-3">
                <div>
                    @if($store->profile)
                        <img src="{{ Storage::url($store->profile) }}"
                             class="img-responsive  pb-0" style="width: 63px;height: 63px;" alt="..."/>
                    @else
                        <img src="{{ asset('store.jpeg') }}"
                             class="img-responsive border border-light  pb-0 w-100" style="width: 63px;height: 63px;"
                             alt="..."/>
                    @endif
                </div>
                <div>
                    <h4 class="font-weight-semibold m-0">{{  $store->name }}</h4>
                    <p class="text-secondary small mb-0">{{  $store->address }} {{ $store->pincode }}</p>
                    <p class="text-secondary small mb-0">
                        <i
                            class="bi bi-star-fill text-warning"></i>
                      {{ $store->avg_rating }}

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

        </div>


        <div class="row">
            <div class="col-lg-9">
                <div id="map" style="height: 250px;width: 100%;"></div>
            </div>
            <div class="col-lg-3">
                <div class="card py-4 px-2 border-light">
                    <div class="d-flex flex-column align-items-center justify-content-center pb-2">
                        <p class="fw-semibold text-dark text-center">Scan QR code to buy products from this store.</p>
                        {!! QrCode::size(150)->generate(route('landing.browse.store',['store'=>$store->id,'name'=>$store->name])) !!}

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

        <div>
            <livewire:landing.browse lazy :store="$store->id" />
        </div>

        <div class="card shadow mb-3 p-3 bg-body rounded border-light mt-4">
            <livewire:landing.store_review :store="$store" lazy/>
        </div>


    </div>
@endsection
@push('scripts')
    <script type="text/javascript"
            src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAPS_API') }}"></script>

    <script>
        var lat = {{ $store->latitude }};
        var lng = {{ $store->longitude }};

        const myLatLng = {lat: parseFloat(lat), lng: parseFloat(lng)};
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 14,
            center: myLatLng,
        });

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(parseFloat(lat), parseFloat(lng)),
            map: map
        });

        i = 0;
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent('Site In');
                infowindow.open(map, marker);
            }
        })(marker, i));

    </script>

@endpush