@extends('layouts.app')
@section('content')
<section class="content">
    <div class="container-fluid">

        <div class="px-sm-4">
                <header>
                    <div class="row mt-2 mt-sm-3">
                        <div class="col-md-7 col-10">
                            <div class="top-head">
                                <h1>Milk Collection Center (MCC)</h1>
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="/home">Settings</a></li>
                                        <li class="breadcrumb-item" aria-current="page"><a href="/milk-centers">MCC</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">View</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                        {{-- <div class="col-md-5 text-sm-right text-left">
                            <a href="settings-ddeEdit.html">
                                <span class="badge pencil-box">
                                    <i class="fa fa-pencil-alt" aria-hidden="true"></i>
                                </span>
                            </a>
                        </div> --}}
                    </div>
                </header>

            <div class="row mt-2">
                <div class="col-md-12">
                    <div class="user-editbox">

                        <div class="row">
                            <div class="col-md-3 mb-2 mb-sm-0">
                                <div class="dam-constructionleftimg">
                                    <img src="{{ isset($milkCollectionCenter->user->profile_pic) ?$milkCollectionCenter->user->profile_pic : '' }}"
                                    onerror="this.src='/assets/img/user-default.jpg'"
                                    alt="{{ isset($milkCollectionCenter->user->profile_pic) ? $milkCollectionCenter->user->profile_pic : '' }}" width="40px" height="40px">
                                    {{-- <img src="/assets/img/project-detailsleft.png" alt=""> --}}
                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="projects-detailsright">
                                    <div class="row mb-1 mb-sm-4">
                                        <div class="col-md-7 mb-2 mb-sm-0">
                                            <h2>{{ @$milkCollectionCenter->name }}</h2>
                                            <h4>+256 {{ @$milkCollectionCenter->phone }} <i class="fa fa-circle"
                                                    aria-hidden="true"></i>
                                                <small>{{ @$milkCollectionCenter->email }}</small>
                                            </h4>
                                            <h4>
                                                <small style="text-decoration:none;">Contact person:</small><span> {{ @$milkCollectionCenter->contact_person }} </span><i class="fa fa-circle" aria-hidden="true"></i>
                                                <small style="text-decoration:none;">Farmers mapped:</small> <span> {{$farmersManaged}} </span>
                                        
                                            </h4>
                                            <span class="badge emanuel-badge"> <span>Service Radius:</span> {{ @$milkCollectionCenter->service_radius }} KM</span>

                                        </div>
                                        <div class="col-md-5 text-sm-right">
                                            @if ($milkCollectionCenter->status == 'active')
                                            <span class="badge active-badge">Active</span>
                                            @else
                                            <span class="badge inactive-badge">Inactive</span>
                                            @endif
                                            {{-- <span class="badge active-badge">{{ @$milkCollectionCenter->status }}</span> --}}

                                            {{-- <div class="silver-imgbox mt-sm-5 mt-2">
                                                <img src="/assets/img/silver.svg" alt="">
                                            </div> --}}

                                            <!-- <div class="chat-botbox new-chatbox float-sm-right mt-sm-4 mt-2">
                                                <img src="/assets/img/chat-botimg.svg" alt="">
                                            </div> -->
                                        </div>
                                    </div>


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

                        <div class="row mt-3">
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$approvedProjects}}</h3>
                                    <h4>Approved <br> Applications</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$rejectedProjectCount}}</h3>
                                    <h4>Rejected <br> Applications</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6 mt-3 mt-sm-0">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$openProjects}}</h3>
                                    <h4>Pending <br> Applications </h4>
                                </div>
                            </div>
                            <!-- <div class="col-md-6 text-right">
                                <button type="button" class="btn save-btn">Account Statment</button>
                            </div> -->
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$averageTat ?? 0}} Days</h3>
                                    <h4>Average <br class="d-sm-block d-none">  TAT</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$farmersManaged}}</h3>
                                    <h4>Farmers<br class="d-sm-block d-none"> Managed</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6 mt-sm-0 mt-3">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$ddes}}</h3>
                                    <h4>DDE</h4>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3 mt-sm-4">
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$milkSupplyArr['avgPerDayMilkSupply'] ?? 0}} Ltr.</h3>
                                    <h4>Avg. Milk<br class="d-sm-block d-none">Supplied/day</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox newgreen-box text-center">
                                    <h3>{{$milkSupplyArr['avgPerWeekMilkSupply'] ?? 0}} Ltr.</h3>
                                    <h4>Avg. Milk<br class="d-sm-block d-none">Supplied/Week</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox newyellow-box text-center">
                                    <h3>{{$milkSupplyArr['avgPerMonthMilkSupply'] ?? 0}} Ltr.</h3>
                                    <h4>Avg. Milk<br class="d-sm-block d-none">Supplied/Month</h4>
                                </div>
                            </div>
                        </div>

                        <div class="position-relative mt-3 mt-sm-5" >

                            <div class="cow-map" id="map"></div>
                            <div class="map-addressbox">
                                <h6>Address</h6>
                                <p>{{ @$milkCollectionCenter->user->address->full_address }}</p>
                            </div>
                            <div class="show-mapbox">
                                <a href="https://www.google.com/maps/search/?api=1&query={{@$milkCollectionCenter->user->address->latitude}},{{ @$milkCollectionCenter->user->address->longitude}}" target="_blank">Show on Map</a>
                            </div>
                        </div>

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

        </div>

    </div>
</section>
@endsection
@section('scripts')
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ config('app.google_maps_api_key') }}&callback=initMap&libraries=places&v=weekly"
        defer></script>
    <script type="text/javascript">

        // let nav = document.querySelector("main-headfixedtop");
        //     window.onscroll = function () {
        //     if(document.documentElement.scrollTop > 20){
        //         nav.classList.add("scroll-on");
        //     }else{
        //         nav.classList.remove("scroll-on");
        //     }
        // }


        $(document).ready(function(e) {
            $('#image').change(function() {
                let reader = new FileReader();
                reader.onload = (e) => {
                    $('#preview-image-before-upload').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            });
            initMap(lat, lng);
        });

        function activeStatus() {
            var status = 'active';
            $('#status').val(status);
            document.getElementById('staus').setAttribute('onclick', 'inactiveStaus()');
        }

        function inactiveStaus() {
            var status = 'inactive';
            $('#status').val(status);
            document.getElementById('staus').setAttribute('onclick', 'activeStatus()');
        }

    var lat = '';
    var lng = '';


    // Farmer's address google map script
    let map;
    async function initMap(lat, lng) {
        var lat = lat ? parseFloat(lat) : -34.397;
        var lng = lng ? parseFloat(lng) : 150.644;
        const { Map } = await google.maps.importLibrary("maps");
        map = new Map(document.getElementById("map"), {
            center: { lat: lat, lng: lng },
            zoom: 8,
        });
        var marker = new google.maps.Marker({
            position: { lat: lat, lng: lng },
            map: map,
            draggable: false,
            animation: google.maps.Animation.BOUNCE
        });
    }

        let autocomplete;
        let address1Field;
        let address2Field;
        let postalField;

        function initMaps() {

            postalField = document.querySelector("#zip_code");
            const map = new google.maps.Map(document.getElementById("map"), {
                center: {
                    lat: 40.749933,
                    lng: -73.98633
                },
                zoom: 13,
                mapTypeControl: false,
            });

            const card = document.getElementById("pac-card");
            const input = document.getElementById("pac-input");

            const biasInputElement = document.getElementById("use-location-bias");
            const strictBoundsInputElement = document.getElementById("use-strict-bounds");
            const options = {
                componentRestrictions: {
                    country: ["ug"]
                },
                fields: ["formatted_address", "geometry", "name"],
                strictBounds: false,
                types: ["address"],
            };


            map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
            const autocomplete = new google.maps.places.Autocomplete(input, options);
            autocomplete.bindTo("bounds", map);

            const infowindow = new google.maps.InfoWindow();
            const infowindowContent = document.getElementById("infowindow-content");

            infowindow.setContent(infowindowContent);

            const marker = new google.maps.Marker({
                map,
                anchorPoint: new google.maps.Point(0, -29),
            });

            autocomplete.addListener("place_changed", () => {
                infowindow.close();
                marker.setVisible(false);



                const place = autocomplete.getPlace();
                console.log(place);


                var lastIndex = place.formatted_address.lastIndexOf(",")
                var country = place.formatted_address.substring(lastIndex + 1);
                var state = place.formatted_address.split(",")[2].trim();

                $('#country_id').html('<option>' + country + '</option>');
                $('#state_id').html('<option>' + state + '</option>');
                $('#city_id').html('<option>' + place.name + '</option>');
                $('#address').html(place.name + ', ' + place.formatted_address);



                if (!place.geometry || !place.geometry.location) {
                    // User entered the name of a Place that was not suggested and
                    // pressed the Enter key, or the Place Details request failed.
                    window.alert("No details available for input: '" + place.name + "'");
                    return;
                }

                // If the place has a geometry, then present it on a map.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);
                }

                marker.setPosition(place.geometry.location);
                marker.setVisible(true);
                infowindowContent.children["place-name"].textContent = place.name;
                infowindowContent.children["place-address"].textContent =
                    place.formatted_address;
                infowindow.open(map, marker);
            });


            // Sets a listener on a radio button to change the filter type on Places
            // Autocomplete.
            function setupClickListener(id, types) {
                const radioButton = document.getElementById(id);

                radioButton.addEventListener("click", () => {
                    autocomplete.setTypes(types);
                    input.value = "";
                });
            }

            setupClickListener("changetype-all", []);
            setupClickListener("changetype-address", ["address"]);
            setupClickListener("changetype-establishment", ["establishment"]);
            setupClickListener("changetype-geocode", ["geocode"]);
            setupClickListener("changetype-cities", ["(cities)"]);
            setupClickListener("changetype-regions", ["(regions)"]);
            biasInputElement.addEventListener("change", () => {
                if (biasInputElement.checked) {
                    autocomplete.bindTo("bounds", map);
                } else {
                    // User wants to turn off location bias, so three things need to happen:
                    // 1. Unbind from map
                    // 2. Reset the bounds to whole world
                    // 3. Uncheck the strict bounds checkbox UI (which also disables strict bounds)
                    autocomplete.unbind("bounds");
                    autocomplete.setBounds({
                        east: 180,
                        west: -180,
                        north: 90,
                        south: -90
                    });
                    strictBoundsInputElement.checked = biasInputElement.checked;
                }

                input.value = "";
            });
            strictBoundsInputElement.addEventListener("change", () => {
                autocomplete.setOptions({
                    strictBounds: strictBoundsInputElement.checked,
                });
                if (strictBoundsInputElement.checked) {
                    biasInputElement.checked = strictBoundsInputElement.checked;
                    autocomplete.bindTo("bounds", map);
                }

                input.value = "";
            });

        }

        // window.initMap = initMap;

        function getStates(th) {
            var countryId = $('#country_id').val();
            var stateId = "";

            @if(isset($milkCollectionCenter->address->state_id) && $milkCollectionCenter->address->state_id)
            stateId = '{{$milkCollectionCenter->address->state_id}}';
            @endif

            console.log(stateId);
            var data = {
                country_id: countryId,
                '_token': '{{{csrf_token()}}}'
            }
            $.ajax({
                url: '/ajax/states',
                type: 'POST',
                data: data,
                success: function(data) {
                    var selectbox = '';
                    if (data) {
                        selectbox = '<select name="state_id" class="form-control edit-input edit-select" data-live-search="true"  onchange="getCities(this)" id="state_id">';
                        selectbox += '<option>Select State</option>';
                        $.each(data, function(i, item) {
                            if (i == stateId) {
                                selectbox += '<option value="' + i + '" selected="selected">' + item + '</option>';
                            } else {
                                selectbox += '<option value="' + i + '">' + item + '</option>';
                            }
                        });
                        selectbox += '</select>';
                    }
                    $('#state_id').html(selectbox);
                    if (stateId) {
                        getCities();
                    }
                }
            });
        }

        function getCities(th) {
            var stateId = $('#state_id').val();
            var cityId = "";

            @if(isset($milkCollectionCenter->address->city_id) && $milkCollectionCenter->address->city_id)
            cityId = '{{$milkCollectionCenter->address->city_id}}';
            @endif

            var data = {
                state_id: stateId,
                '_token': '{{{csrf_token()}}}'
            }
            $.ajax({
                url: '/ajax/cities',
                type: 'POST',
                data: data,
                success: function(data) {
                    var selectbox = '';
                    if (data) {
                        selectbox = '<select name="city_id" class="form-control edit-input edit-select" data-live-search="true" id="city_id">';
                        selectbox += '<option>Select City</option>';
                        $.each(data, function(i, item) {
                            if (i == cityId) {
                                selectbox += '<option value="' + i + '" selected="selected">' + item + '</option>';
                            } else {
                                selectbox += '<option value="' + i + '">' + item + '</option>';
                            }
                        });
                        selectbox += '</select></div>';
                    }
                    $('#city_id').html(selectbox);

                }
            });
        }

        $(document).ready(function() {
            if ($('#country_id').val()) {
                getStates();
            }
        });

    </script>
@endsection