@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>Dairy Development Executive (DDE)</h1>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/dairy-executives">Settings</a></li>
                                    <li class="breadcrumb-item" aria-current="page"><a href="/dairy-executives">DDE</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="{{ $ddeUser->profile_pic ? $ddeUser->profile_pic : '/assets/img/user-default.jpg' }}" 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>{{ @$dde->name }}</h2>
                                            @php
                                                $rating = App\Helpers\CommonHelper::getUserRating('dde',@$dde->id); 
                                            @endphp 

                                            @if($rating->count > 0)
                                            <h3>
                                                @if($rating->average > 0 && $rating->average < 1)
                                                    <img class="rating-star" src="{{asset('assets/img/half-yellowstar.svg')}}" alt="">
                                                @endif

                                                @if($rating->average >= 1)
                                                    <img class="rating-star" src="{{asset('assets/img/full-yellowstar.svg')}}"  alt="">
                                                @endif

                                                @if($rating->average > 1 && $rating->average < 2)
                                                    <img class="rating-star" src="{{asset('assets/img/half-yellowstar.svg')}}" alt="">
                                                @endif

                                                @if($rating->average >= 2)
                                                    <img class="rating-star" src="{{asset('assets/img/full-yellowstar.svg')}}"  alt="">
                                                @endif

                                                @if($rating->average > 2 && $rating->average < 3)
                                                    <img class="rating-star" src="{{asset('assets/img/half-yellowstar.svg')}}" alt="">
                                                @endif

                                                @if($rating->average >= 3)
                                                    <img class="rating-star" src="{{asset('assets/img/full-yellowstar.svg')}}"  alt="">
                                                @endif

                                                @if($rating->average > 3 && $rating->average < 4)
                                                    <img class="rating-star" src="{{asset('assets/img/half-yellowstar.svg')}}" alt="">
                                                @endif

                                                @if($rating->average >= 4)
                                                    <img class="rating-star" src="{{asset('assets/img/full-yellowstar.svg')}}"  alt="">
                                                @endif

                                                @if($rating->average > 4 && $rating->average < 5)
                                                    <img class="rating-star" src="{{asset('assets/img/half-yellowstar.svg')}}" alt="">
                                                @endif

                                                @if($rating->average >= 5)
                                                    <img class="rating-star" src="{{asset('assets/img/full-yellowstar.svg')}}"  alt="">
                                                @endif
                                                <span>({{$rating->count}})</span>

                                                <span class="badge view-ratingsbadge ml-sm-3 cursor-pointer" data-toggle="modal" data-target="#ratingDetailModal" onclick="userRatingDetail({{$dde->id}},'dde')">View Ratings</span>
                                            </h3>
                                            @endif
                                            <h4>+256 {{ @$dde->phone }} <i class="fa fa-circle"
                                                    aria-hidden="true"></i>
                                                <small>{{ @$dde->email }}</small>
                                            </h4>
                                            @php
                                                use Carbon\Carbon;
                                                $parsedDOB = Carbon::parse($dde->dob);
                                                $carbonMemberSince = Carbon::parse($dde->member_since); 
                                                $experience = $carbonMemberSince->diffInYears(Carbon::now()); 
                                                
                                            @endphp
                                            <h4 class="mt-2"> {{$parsedDOB->age}} years old <i class="fa fa-circle"
                                                    aria-hidden="true"></i>
                                                {{$experience}} yrs exp. <i class="fa fa-circle" aria-hidden="true"></i>
                                                Emp. code: {{@$dde->emp_code}}
                                            </h4>
                                            <span class="badge emanuel-badge"> <span>MCC:</span> {{ @$dde->mcc->name }}</span>

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

                                            @if ($assignedBadge == 'bronze')
                                            <div class="silver-imgbox mt-sm-4 mt-2">
                                                <img src="{{asset('/assets/img/bronze.svg')}}" alt="">
                                            </div>
                                            @endif
                                            @if ($assignedBadge == 'silver')
                                            <div class="silver-imgbox mt-sm-4 mt-2">
                                                <img src="{{asset('/assets/img/silver.svg')}}" alt="">
                                            </div>
                                            @endif

                                            @if ($assignedBadge == 'gold')
                                            <div class="silver-imgbox mt-sm-4 mt-2">
                                                <img src="{{asset('/assets/img/gold.svg')}}" alt="">
                                            </div>
                                            @endif
                                            
                                            

                                            <!-- <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-2">
                            <div class="col-md-12 text-right">
                                <a href="{{url('/financial/index')}}?ddeFilter={{@$dde->id}}"><button type="button" class="btn save-btn">Account Statement</button></a>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$farmerAssigned}}</h3>
                                    <h4>Farmers <br> Managed</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$farmerEnrolled}}</h3>
                                    <h4>Projects <br> Enrolled </h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$projectCount}}</h3>
                                    <h4>Projects</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$liveStockProjectCount}}</h3>
                                    <h4>Live Stocks</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$customLoanProjectCount}}</h3>
                                    <h4>Custom Loans</h4>
                                </div>
                            </div>
                           
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$avgMilkSupply}} Ltr.</h3>
                                    <h4>Current Avg. <br class="d-sm-block d-none">  Milk Yield / Cow</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{$totalFarmProduction}} Ltr.</h3>
                                    <h4>Total Farm Production <br class="d-sm-block d-none">(Last 6 months)</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6 mt-sm-0 mt-3">
                                <div class="farmers-managedbox text-center">
                                    <h3>{{round($averageTat ?? 0,2)}} days</h3>
                                    <h4>Average <br class="d-sm-block d-none">  TAT  </h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6 mt-sm-0 mt-3">
                                <div class="farmers-managedbox text-center">
                                    <h3>UGX {{ App\Helpers\CommonHelper::amountConversion(@$ddeEarned) ?? 0}}</h3>
                                    <h4>Earned</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6 mt-sm-0 mt-3">
                                <div class="farmers-managedbox text-center">
                                    <h3>UGX {{ App\Helpers\CommonHelper::amountConversion(@$ddeDues) ?? 0}}</h3>
                                    <h4>Due</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6 mt-sm-0 mt-3">
                                <div class="farmers-managedbox text-center">
                                    <h3>UGX {{ App\Helpers\CommonHelper::amountConversion(@$ddePending) ?? 0}}</h3>
                                    <h4>Pending</h4>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3 mt-sm-4">
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox newgreen-box text-center">
                                    <h3>{{$activeProjects}}</h3>
                                    <h4>Active  <br class="d-sm-block d-none"> Projects</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6">
                                <div class="farmers-managedbox newyellow-box text-center">
                                    <h3>{{$pendingProjects}}</h3>
                                    <h4>Pending  <br class="d-sm-block d-none">Projects</h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6 mt-sm-0 mt-3">
                                <div class="farmers-managedbox newblue-box text-center">
                                    <h3>{{$completedProjects}}</h3>
                                    <h4>Completed  <br class="d-sm-block d-none"> Projects </h4>
                                </div>
                            </div>
                            <div class="col-md-2 col-6 mt-sm-0 mt-3">
                                <div class="farmers-managedbox newbrown-box text-center">
                                    <h3>{{$pendingEnquiries}}</h3>
                                    <h4>Pending <br class="d-sm-block d-none"> Enquiries</h4>
                                </div>
                            </div>
                        </div>
                        <h3 class="mt-4">Target & Commission</h3>
                        <div class="row mt-3 mt-sm-4">
                            @if(isset($ddeSlab))
                                @foreach($ddeSlab as $slab)
                                    @if($slab->target_status == 'Achieved')
                                    <div class="col-md-2 col-6">
                                        <div class="farmers-managedbox text-center">
                                            <h3>{{$slab->commission_percent}}%</h3>
                                            <h4>{{$slab->loan_closure_from}} to {{$slab->loan_closure_upto}}</h4>
                                            <span class="badge active-badge mt-2">Achieved</span>
                                        </div>
                                    </div>
                                    @endif

                                    @if($slab->target_status == 'In progress')
                                    <div class="col-md-2 col-6">
                                        <div class="farmers-managedbox text-center">
                                            <h3>{{$slab->commission_percent}}%</h3>
                                            <h4>{{$slab->loan_closure_from}} to {{$slab->loan_closure_upto}}</h4>
                                            <span class="badge active-badge yellow mt-2">In-progress</span>
                                        </div>
                                    </div>
                                    @endif

                                    @if($slab->target_status == 'Pending')
                                    <div class="col-md-2 col-6">
                                        <div class="farmers-managedbox text-center">
                                            <h3>{{$slab->commission_percent}}%</h3>
                                            <h4>{{$slab->loan_closure_from}} to {{$slab->loan_closure_upto}}</h4>
                                            <span class="badge active-badge red mt-2">Pending</span>
                                        </div>
                                    </div>
                                    @endif

                                @endforeach
                            @endif
                           
                        </div>


                        <div class="position-relative mt-3 mt-sm-5" >
                            {{-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3506.3204343865!2d77.39619587395619!3d28.500005475737346!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce98bcf35c41f%3A0x6f5bf1668672f31!2sSleepwell!5e0!3m2!1sen!2sin!4v1690193700403!5m2!1sen!2sin"
                            class="setting-map" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> --}}
                            <div class="cow-map" id="map"></div>
                            <div class="map-addressbox">
                                <h6>Address</h6>
                                <p>{{ @$dde->user->address->full_address }}</p>
                            </div>
                            <div class="show-mapbox">
                                <a href="https://www.google.com/maps/search/?api=1&query={{@$dde->user->address->latitude}},{{ @$dde->user->address->longitude}}" target="_blank">Show on Map</a>
                                {{-- <p>Show on Map</p> --}}
                            </div>
                        </div>

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

        </div>

    </div>
    <!-- Project Rating Detail Side Modal -->
    @include('farmer.project-modal-partials.project-rating')
    <!-- Project Rating Detail Side Modal -->
</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">
        $(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()');
        }

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


        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
        });
    }

    function userRatingDetail(ratedForId,user){
        console.log(ratedForId);
		$.ajax({
			url  : "{{url('farmers/get/user-rating-details')}}",
			type : "POST",
			data : {
						_token: "{{ csrf_token() }}",
						ratedForId : ratedForId,
                        user : user
					},
			success	: function(response){
				console.log("data:",response);
				let html = '';
				$('#rating-details').html('');

				$.each(response, (key,rating) => {
					let raundedRating = rating.rating;
					if(user == 'farmer'){
						$('#reviewHeading').text('Project reviews for the Farmer');
					}
					else if(user == 'dde'){
						$('#reviewHeading').text('Project reviews for the DDE');
					} 
					else if(user == 'supplier'){
						$('#reviewHeading').text('Project reviews for the Supplier');
					} 
					else{
						$('#reviewHeading').text('Project reviews');
					}
					// let feedback = rating.feedback
					html +=	`<div class="popup-ratingboxcontent">
								<h6>
									`
									if(raundedRating > 0 && raundedRating < 1){
										html +=`<img src="{{asset('assets/img/half-yellowstar.svg')}}" alt="">`
									}
									if(raundedRating >= 1){
										html +=`<img src="{{asset('assets/img/full-yellowstar.svg')}}" alt="">`
									}
									if(raundedRating > 1 && raundedRating < 2){
										html +=`<img src="{{asset('assets/img/half-yellowstar.svg')}}" alt="">`
									}
									if(raundedRating >= 2){
										html +=`<img src="{{asset('assets/img/full-yellowstar.svg')}}" alt="">`
									}
									if(raundedRating > 2 && raundedRating < 3){
										html +=`<img src="{{asset('assets/img/half-yellowstar.svg')}}" alt="">`
									}
									if(raundedRating >= 3){
										html +=`<img src="{{asset('assets/img/full-yellowstar.svg')}}" alt="">`
									}
									if(raundedRating > 3 && raundedRating < 4){
										html +=`<img src="{{asset('assets/img/half-yellowstar.svg')}}" alt="">`
									}
									if(raundedRating >= 4){
										html +=`<img src="{{asset('assets/img/full-yellowstar.svg')}}" alt="">`
									}
									if(raundedRating > 4 && raundedRating < 5){
										html +=`<img src="{{asset('assets/img/half-yellowstar.svg')}}" alt="">`
									}
									if(raundedRating >= 5){
										html +=`<img src="{{asset('assets/img/full-yellowstar.svg')}}" alt="">`
									}

									
								html += `</h6>
								<p>${rating?.feedback || ''}</p>

								<div class="row mt-3 align-items-center">
									<div class="col-md-2 col-3">
										<div class="popup-ratinguser">
											<img src="${rating.user_data?.media[0]?.original_url}" onerror="this.src='/assets/img/user-default.jpg'" alt="">
										</div>
									</div>
									<div class="col-md-10 col-9">
										<h2>${rating.user_data.name}</h2>
										<h3>${rating.rated_by_user_type.toUpperCase()}</h3>
									</div>
								</div>
							</div>`;
				});
				$('#rating-details').html(html);
			}
		});	
    }

    </script>
@endsection