@extends('layouts.admin')

@section('styles')
<style>
    #img:hover {opacity: 0.7;}
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    }

    /* Modal Content (image) */
    .modal-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
    }

    /* Caption of Modal Image */
    #caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
        text-align: center;
        color: #ccc;
        padding: 10px 0;
        height: 150px;
    }

    /* Add Animation */
    .modal-content, #caption {
        -webkit-animation-name: zoom;
        -webkit-animation-duration: 0.6s;
        animation-name: zoom;
        animation-duration: 0.6s;
    }

    @-webkit-keyframes zoom {
        from {-webkit-transform:scale(0)}
        to {-webkit-transform:scale(1)}
    }

    @keyframes zoom {
        from {transform:scale(0)}
        to {transform:scale(1)}
    }

    /* The Close Button */
    .close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
    }

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

    /* 100% Image Width on Smaller Screens */
    @media only screen and (max-width: 700px){
        .modal-content {
            width: 100%;
        }
    }
</style>
@endsection

@section('breadcrumb-item')
    <li class="breadcrumb-item">Shops List</li>
    <li class="breadcrumb-item active">Show Details</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">
            <p class="h5 mb-0 float-left"><i class="fa fa-list pr-1"></i>Show Details</p>
            <a href="{{route('admin.shop.edit', ['shop' => $shop->id])}}" data-toggle="tooltip" data-placement="bottom"
               title="Edit Record" class="text-white float-right">
                <i class="fa fa-edit"></i>
            </a>
        </div>
        <div class="card-body">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th colspan="2" class="border-0 pt-0">
                        <h4 class="text-center">
                            <img class="rounded-circle" id="img" src="{{ $shop->avatar }}"
                                 alt="{{ $shop->name }}" height="150" width="150">
                        </h4>
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>Name:</th>
                    <td>{{ $shop->name }}</td>
                </tr>
                <tr>
                    <th>Contact Person:</th>
                    <td>{{ $shop->contact_person }}</td>
                </tr>
                <tr>
                    <th>Designation:</th>
                    <td>{{ $shop->designation }}</td>
                </tr>
                <tr>
                    <th>Email Address:</th>
                    <td>{{ $shop->email }}</td>
                </tr>
                <tr>
                    <th>Phone Number:</th>
                    <td>{{ $shop->phone }}</td>
                </tr>
                <tr>
                    <th>Whatsapp Number:</th>
                    <td>{{ $shop->whatsapp }}</td>
                </tr>
                <tr>
                    <th>Credit Limit:</th>
                    <td>{{ $shop->credit_limit }}</td>
                </tr>
                <tr>
                    <th>Address:</th>
                    <td>{{$shop->address}}</td>
                </tr>
                <tr>
                    <th>Area:</th>
                    <td>{{$shop->areaName}}</td>
                </tr>
                <tr>
                    <th>City:</th>
                    <td>{{$shop->cityName}}</td>
                </tr>
                <tr>
                   @php
                        $base = url(getenv("APP_URL"));
                        $part1 = '/admin/shop/';
                        $id    = $shop->id;
                        $part2 = '/show';

                        $shop_url = $base.$part1.$id.$part2;
                        @endphp
                    <td>{{QrCode::generate($shop_url) }}</td>
                </tr>
               
                </tbody>
            </table>
        </div>
        <div id="map" style="height: 200px;"></div>
        <input name="long" type="hidden" id = "long" value="{{$shop->longitude}}">
        <input name="lat" type="hidden" id = "lat" value="{{$shop->latitude}}">
    </div>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
    </div>

@endsection
@section('scripts')
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDS8zyodwPqrKvQvPYM94e7cq00sXeQ2KU&callback=initMap">
    </script>

    <script>
        function initMap() {

            var map;
            var lat = document.getElementById('lat').value;
            var long = document.getElementById('long').value;
            function initialize() {
                var mapOptions = {
                    zoom: 20,
                    center: {lat: +lat, lng: +long}
                };
                map = new google.maps.Map(document.getElementById('map'),
                    mapOptions);

                var marker = new google.maps.Marker({
                    // The below line is equivalent to writing:
                    // position: new google.maps.LatLng(-34.397, 150.644)
                    position: {lat: +lat, lng: +long},
                    map: map
                });

                // You can use a LatLng literal in place of a google.maps.LatLng object when
                // creating the Marker object. Once the Marker object is instantiated, its
                // position will be available as a google.maps.LatLng object. In this case,
                // we retrieve the marker's position using the
                // google.maps.LatLng.getPosition() method.
                var infowindow = new google.maps.InfoWindow({
                    content: '<p>Marker Location:' + marker.getPosition() + '</p>'
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        }


        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the image and insert it inside the modal - use its "alt" text as a caption
        var img = document.getElementById("img");
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");
        img.onclick = function(){
            modal.style.display = "block";
            modalImg.src = this.src;
            captionText.innerHTML = this.alt;
        };

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        };
    </script>
@endsection