@extends('stores.layouts.app')

@section('content')

<div class="mb-5">
    <div class="row px-3">
        <div class="col-sm-6 col-lg-3">
            <div class="card shadow">
                <div class="card-body mb-4 pb-0 d-flex justify-content-between align-items-start">
                    <div>
                        <div class="fs-4 fw-semibold">{{ $totalOrders }}</div>
                        <div>Total Orders</div>
                    </div>
                    <div class="align-items-end">
                        <span style="font-size: 3rem;"><i class="bi bi-boxes"></i></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-lg-3">
            <div class="card shadow">
                <div class="card-body mb-4 pb-0 d-flex justify-content-between align-items-start">
                    <div>
                        <div class="fs-4 fw-semibold">{{ $pendingOrders }}</div>
                        <div>Pending Orders</div>
                    </div>
                    <div class="align-items-end">
                        <span style="font-size: 3rem;"><i class="bi bi-box2"></i></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-lg-3">
            <div class="card shadow">
                <div class="card-body mb-4 pb-0 d-flex justify-content-between align-items-start">
                    <div>
                        <div class="fs-4 fw-semibold">{{ $completedOrders }}</div>
                        <div>Completed Orders</div>
                    </div>
                    <div class="align-items-end">
                        <span style="font-size: 3rem;"><i class="bi bi-check2-circle"></i></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-lg-3">
            <div class="card shadow">
                <div class="card-body mb-4 pb-0 d-flex justify-content-between align-items-start">
                    <div>
                        <div class="fs-4 fw-semibold">{{ $canceledOrders}}</div>
                        <div>Canceled Orders</div>
                    </div>
                    <div class="align-items-end">
                        <span style="font-size: 3rem;"><i class="bi bi-x-diamond"></i></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-5 card">
        <livewire:tables.store_low_quantiy lazy />
    </div>

    <div class="mt-5 p-3">
        <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'=>auth()->user()->id,'name'=>auth()->user()->name])) !!}

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

    <div class="mt-5 card">
        <livewire:tables.store_orders :type="$type"  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 = {{ auth()->user()->latitude }};
        var lng = {{ auth()->user()->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