@extends('layouts.app')
@section('content')

@php
$user= auth()->user();
@endphp

<section class="content">
    <div class="container-fluid">

        <div class="px-sm-4">
            <!-- New html -->
            <div class="row mt-2 mt-sm-3 align-items-center">
                <div class="col-md-12">
                    <div class="d-sm-flex d-block align-items-center">
                        <div class="top-head mr-4">
                            <h1>Overview</h1>
                        </div>
                        <div class="top-menuhome">
                            <ul>
                                @php
                                $permission = App\Helpers\CommonHelper::checkPermission($user, 'Financials');
                                @endphp

                                @if($permission)
                                <li><a href="{{route('financial.home')}}">Financials</a></li>
                                @endif

                                @php
                                $permission = App\Helpers\CommonHelper::checkPermission($user, 'Credit Committee');
                                @endphp

                                @if($permission)
                                <li><a href="{{url('/credit-committee')}}">Credit Committee</a></li>
                                @endif

                                <li><a href="{{route('investor.dashboard')}}">Investors</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
			</div>
            <!-- New HTML-->
            <!-- <div class="row mt-2 mt-sm-3">
                <div class="col-md-12">
                    <div class="top-head">
                        <h1>Hello, {{ Ucwords(@$user->name) }}</h1>
                    </div>
                </div>
            </div>

            <div class="row mt-2 mt-sm-4">
                <div class="col-md-12">
                    <div class="inner-head">
                        <p>Dashboard</p>
                    </div>
                </div>
            </div> -->

            <!-- Old Html -->
            {{--<div class="row mt-2 mt-sm-4">
                <div class="col-md-8">

                    <div class="card">
                        <div class="row align-items-center">
                            <div class="col-md-8 col-8">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title float-none">Farmers ({{$totalFarmers}}) </h4>
                                </div>
                            </div>
                            @php
                            $permission = App\Helpers\CommonHelper::checkPermission($user, 'Farmers');
                            @endphp

                            @if($permission)
                            <div class="col-md-4 col-4 text-right">
                                <div class="card-header border-0 pb-0">
                                    <a href="{{url('/farmers')}}"> <img src="{{ asset('assets/img/more.svg') }}" class="three-dots" alt=""> </a>
                                </div>
                            </div>
                            @endif
                        </div>

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4 col-6 mb-sm-0 mb-3">
                                    <a @if($permission) href="{{ url('/farmers') }}?rag_rating=critical" @else href="" @endif>
                                        <div class="farmers-box">
                                            <div class="average-box">
                                                <img src="{{ asset('assets/img/box-rightimg.svg') }}" alt="">
                                            </div>
                                            <h5>{{$criticalFarmers}}</h5>
                                            <h6>Critical</h6>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-md-4 col-6 mb-sm-0 mb-3">
                                    <a @if($permission) href="{{url('/farmers')}}?rag_rating=average" @else href="" @endif>
                                        <div class="farmers-box farmers-box2">
                                            <div class="average-box average-box2">
                                                <img src="{{ asset('assets/img/cloud.svg') }}" alt="">
                                            </div>
                                            <h5>{{$averageFarmers}}</h5>
                                            <h6>Average</h6>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-md-4 col-6">
                                    <a @if($permission) href="{{url('/farmers')}}?rag_rating=satisfactory" @else href="" @endif>
                                        <div class="farmers-box farmers-box3">
                                            <div class="average-box average-box3">
                                                <img src="{{ asset('assets/img/check (2).svg') }}" alt="">
                                            </div>
                                            <h5>{{$satisfactoryFarmers}}</h5>
                                            <h6>Satisfactory</h6>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                @php
                $permission = App\Helpers\CommonHelper::checkPermission($user, 'Enquiries');
                @endphp
                <div class="col-md-4">
                    <div class="enquiries-box">
                        <div class="enquiries-innerbox">
                            <div class="row">
                                <div class="col-md-8 col-8">
                                    <div class="card-header border-0 pb-0">
                                        <h4 class="card-title float-none">Enquiries ({{$totalEnquiries}})</h4>
                                        <!-- <h5 class="card-middle"></h5> -->
                                    </div>
                                </div>
                                @if($permission)
                                <div class="col-md-4 col-4 text-right">
                                    <div class="card-header border-0 pb-0">
                                        <a href="{{url('/enquiries/enquiry-list')}}"><i class="fa fa-ellipsis-v more-icon" aria-hidden="true"></i></a>
                                    </div>
                                </div>
                                @endif
                            </div>
                            <div class="card-body">
                                <div class="row align-items-end">
                                    <div class="col-md-11 col-11">
                                        <a @if($permission) href="{{url('/enquiries/enquiry-list')}}?statusFilter=pending" @else href="" @endif>
                                            <span class="progress-text">Pending</span>
                                            <div class="progress new-progress">
                                                <div class="progress-bar" role="progressbar" style="width: {{$pendingEnquiries}}%" aria-valuenow="{{$pendingEnquiries}}" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-1 col-1">
                                        <p class="progress-value">{{$pendingEnquiries}}</p>
                                    </div>
                                </div>

                                <div class="row align-items-end mt-3 pb-3">
                                    <div class="col-md-11 col-11">
                                        <a @if($permission) href="{{url('/enquiries/enquiry-list')}}?statusFilter=closed" @else href="" @endif>
                                            <span class="progress-text">Closed</span>
                                            <div class="progress new-progress">
                                                <div class="progress-bar" role="progressbar" style="width: {{$closedEnquiries}}%" aria-valuenow="{{$closedEnquiries}}" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-1 col-1">
                                        <p class="progress-value">{{$closedEnquiries}}</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>--}}
            <!-- Old Html -->

            <!-- New Html -->
            <div class="row mt-2 mt-sm-4 align-items-start">
                <div class="col-md-4">
                    <div class="card new-card">
                        <div class="row align-items-center">
                            <div class="col-md-8 col-8">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title float-none">Farmers</h4>
                                    <h5 class="card-middle">{{$totalFarmers}}</h5>
                                </div>
                            </div>
                            @php
                            $permission = App\Helpers\CommonHelper::checkPermission($user, 'Farmers');
                            @endphp

                            @if($permission)
                            <div class="col-md-4 col-4 text-right">
                                <div class="card-header border-0 pb-0">
                                    <a href="{{url('/farmers')}}"> <img src="{{asset('assets/img/more.svg')}}" class="three-dots" alt=""> </a>
                                </div>
                            </div>
                            @endif
                        </div>

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4 col-6 mb-sm-0 mb-3">
                                    <a @if($permission) href="{{ url('/farmers') }}?rag_rating=critical" @else href="" @endif>
                                        <div class="farmers-box">
                                            <div class="average-box">
                                                <img src="{{asset('assets/img/box-rightimg.svg')}}" alt="">
                                            </div>
                                            <h5>{{$criticalFarmers}}</h5>
                                            <h6>Critical</h6>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-4 col-6 mb-sm-0 mb-3">
                                    <a @if($permission) href="{{ url('/farmers') }}?rag_rating=average" @else href="" @endif>
                                        <div class="farmers-box farmers-box2">
                                            <div class="average-box average-box2">
                                                <img src="{{asset('assets/img/cloud.svg')}}" alt="">
                                            </div>
                                            <h5>{{$averageFarmers}}</h5>
                                            <h6>Average</h6>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-4 col-6">
                                    <a @if($permission) href="{{ url('/farmers') }}?rag_rating=satisfactory" @else href="" @endif>
                                        <div class="farmers-box farmers-box3">
                                            <div class="average-box average-box3">
                                                <img src="{{asset('assets/img/check (2).svg')}}" alt="">
                                            </div>
                                            <h5>{{$satisfactoryFarmers}}</h5>
                                            <h6>Satisfactory</h6>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="row align-items-start">
                        <div class="col-md-4">
                            <div class="card new-card">
                                <div class="row align-items-center">
                                    <div class="col-md-9 col-9">
                                        <div class="card-header border-0 pb-0">
                                            <h4 class="card-title float-none"> Investments </h4>
                                            <h5 class="card-middle">UGX 0</h5>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-2 text-right">
                                        <div class="card-header border-0 pb-0">
                                            <a href="##"><img src="{{asset('assets/img/more.svg')}}" class="three-dots" alt=""></a>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div
                                                class="d-flex align-items-center justify-content-between loans-boxs">
                                                <p>Grants</p>
                                                <span class="font-weight-bold">0</span>
                                            </div>
                                            <div
                                                class="d-flex align-items-center justify-content-between loans-boxs loans-boxs2 ">
                                                <p>Banks</p>
                                                <span class="font-weight-bold">0</span>
                                            </div>
                                            <div
                                                class="d-flex align-items-center justify-content-between loans-boxs loans-boxs3">
                                                <p>Others</p>
                                                <span class="font-weight-bold">0</span>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card new-card">
                                <div class="row align-items-center">
                                    <div class="col-md-8 col-9">
                                        <div class="card-header border-0 pb-0">
                                            <h4 class="card-title float-none"> Loans </h4>
                                            <h5 class="card-middle">{{$activeLoans + $bookedLoans + $openLoans}}</h5>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-3 text-right">
                                        <div class="card-header border-0 pb-0">
                                            <a href="##"> <img src="{{asset('assets/img/more.svg')}}" class="three-dots" alt=""> </a>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="suppliers-box">
                                            
                                                <span class="badge d-flex justify-content-between align-items-center target-achieved btn-block">Active
                                                    <span class="badge badge-pill">{{$activeLoans}}</span> 
                                                </span>
                                                <span class="badge d-flex justify-content-between align-items-center target-achieved target-missed btn-block">
                                                    Booked <span class="badge badge-pill">{{$bookedLoans}}</span>
                                                </span>
                                                    <span class="badge d-flex justify-content-between align-items-center target-achieved target-missed btn-block">
                                                        Open <span class="badge badge-pill">{{$openLoans}}</span>
                                                    </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="enquiries-box">
                                <div class="enquiries-innerbox new-card">
                                    <div class="row align-items-center">
                                        <div class="col-md-9 col-8">
                                            <div class="card-header border-0 pb-0">
                                                <h4 class="card-title float-none">Enquiries</h4>
                                                <h5 class="card-middle">{{$totalEnquiries}}</h5>
                                            </div>
                                        </div>
                                        @php
                                        $permission = App\Helpers\CommonHelper::checkPermission($user, 'Enquiries');
                                        @endphp

                                        @if($permission)
                                        <div class="col-md-3 col-4 text-right">
                                            <div class="card-header border-0 pb-0">
                                                <a href="{{url('/enquiries/enquiry-list')}}"><i class="fa fa-ellipsis-v more-icon"
                                                        aria-hidden="true"></i></a>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    <div class="card-body">
                                        <div class="row mt-4 align-items-end">
                                           
                                                <div class="col-md-11 col-11">
                                                    <span class="progress-text">Pending {{$pendingEnquiries}}</span>
                                                    <a @if($permission) href="{{url('/enquiries/enquiry-list')}}?statusFilter=pending" @else href="" @endif>
                                                        <div class="progress new-progress">
                                                            <div class="progress-bar" role="progressbar" style="width: 25%"
                                                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            <div class="col-md-1 col-1">
                                                <!-- <p class="progress-value">08</p> -->
                                            </div>
                                        </div>

                                        <div class="row align-items-end mt-4 pb-4">
                                            <div class="col-md-11 col-11">
                                                <span class="progress-text">Closed {{$closedEnquiries}}</span>
                                                    <a @if($permission) href="{{url('/enquiries/enquiry-list')}}?statusFilter=closed" @else href="" @endif>
                                                        <div class="progress new-progress">
                                                            <div class="progress-bar" role="progressbar" style="width: 45%"
                                                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            <div class="col-md-1 col-1">
                                                <!-- <p class="progress-value">12</p> -->
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--  -->
                @php
                $permission = App\Helpers\CommonHelper::checkPermission($user, 'MCC');
                @endphp
                <div class="col-md-3">
                    <div class="card new-card">
                        <div class="row align-items-start">
                            <div class="col-md-9 col-9">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title float-none"> MCC({{ $milkCollectionCenters }}) </h4>
                                    <p class="card-titleinner">Cooperatives</p>
                                </div>
                            </div>
                            @if($permission)
                            <div class="col-md-3 col-3 text-right">
                                <div class="card-header border-0 pb-0">
                                    <a href="{{url('/milk-centers')}}"><img src="{{ asset('assets/img/more.svg') }}" class="three-dots" alt=""> </a>
                                </div>
                            </div>
                            @endif
                        </div>

                        <div class="card-body pt-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="suppliers-box">
                                        <h6><span class="active-box"></span>Active: <b>{{ $milkCollectionCentersCoActive
                                                }}</b></h6>
                                        <h6><span class="active-box inactive-box"></span>Inactive: <b>{{
                                                $milkCollectionCentersCoInactive }}</b>
                                        </h6>

                                        <p class="card-titleinner mt-3">Milk Collection Center</p>
                                        <h6><span class="active-box"></span>Active: <b>{{ $milkCollectionCentersMcActive
                                                }}</b></h6>
                                        <h6><span class="active-box inactive-box"></span>Inactive: <b>{{
                                                $milkCollectionCentersMcInactive }}</b>
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @php
                $permission = App\Helpers\CommonHelper::checkPermission($user, 'DDE');
                @endphp
                <div class="col-md-3">
                    <div class="card new-card">
                        <div class="row align-items-start">
                            <div class="col-md-9 col-9">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title float-none"> DDE({{$totalDDE}}) </h4>
                                </div>
                            </div>
                            @if($permission)
                            <div class="col-md-3 col-3 text-right">
                                <div class="card-header border-0 pb-0">
                                    <a href="{{url('/dairy-executives')}}"> <img src="{{ asset('assets/img/more.svg') }}" class="three-dots" alt=""> </a>
                                </div>
                            </div>
                            @endif
                        </div>

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="suppliers-box">
                                        <a @if($permission) href="{{url('/dairy-executives')}}?status=active" @else href="" @endif>
                                            <h6><span class="active-box"></span>Active: <b>{{$activeDDE}}</b></h6>
                                        </a>
                                        <a @if($permission) href="{{url('/dairy-executives')}}?status=inactive" @else href="" @endif>
                                            <h6><span class="active-box inactive-box"></span>Inactive:
                                                <b>{{$inactiveDDE}}</b>
                                            </h6>
                                        </a>
                                        <a @if($permission) href="{{url('/dairy-executives')}}?target=Achieved" @else href="" @endif>
                                            <span class="badge target-achieved btn-block mt-4">Target Achieved:
                                                <span>{{$targetAchievedCount}}</span>
                                            </span>
                                        </a>
                                        <a @if($permission) href="{{url('/dairy-executives')}}?target=Not Achieved" @else href="" @endif>
                                            <span class="badge target-achieved target-missed btn-block">Target
                                                Missed: <span>{{$targetNotAchievedCount}}</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- New Html -->
                <div class="col-md-3">
                    <div class="card new-card">
                        <div class="row align-items-start">
                            <div class="col-md-9 col-9">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title float-none"> Investors(0) </h4>
                                    <p class="card-titleinner">Grants</p>
                                </div>
                            </div>
                           
                            <div class="col-md-3 col-3 text-right">
                                <div class="card-header border-0 pb-0">
                                    <a href=""><img src="{{ asset('assets/img/more.svg') }}" class="three-dots" alt=""> </a>
                                </div>
                            </div>
                           
                        </div>

                        <div class="card-body pt-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="suppliers-box">
                                        <h6><span class="active-box"></span>Active: <b>0</b></h6>
                                        <h6><span class="active-box inactive-box"></span>Inactive: <b>0</b></h6>
                                        <p class="card-titleinner mt-3">Others</p>
                                        <h6><span class="active-box"></span>Active: <b>0</b></h6>
                                        <h6><span class="active-box inactive-box"></span>Inactive: <b>0</b></h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- New Html -->
                @php
                $permission = App\Helpers\CommonHelper::checkPermission($user, 'Supplier');
                @endphp
                <div class="col-md-3">
                    <div class="card new-card">
                        <div class="row align-items-start">
                            <div class="col-md-9 col-9">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title float-none"> Suppliers({{$totalSupplier}}) </h4>
                                </div>
                            </div>
                            @if($permission)
                            <div class="col-md-3 col-3 text-right">
                                <div class="card-header border-0 pb-0">
                                    <a href="{{url('/suppliers')}}"> <img src="{{ asset('assets/img/more.svg') }}" class="three-dots" alt=""> </a>
                                </div>
                            </div>
                            @endif
                        </div>

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="suppliers-box">
                                        <a @if($permission) href="{{url('/suppliers')}}?status=active" @else href="" @endif>
                                            <h6><span class="active-box"></span>Active: <b>{{$activeSupplier}}</b></h6>
                                        </a>
                                        <a @if($permission) href="{{url('/suppliers')}}?status=inactive" @else href="" @endif>
                                            <h6><span class="active-box inactive-box"></span>Inactive:
                                                <b>{{$inactiveSupplier}}</b>
                                            </h6>
                                        </a>
                                        <a @if($permission) href="{{url('/suppliers')}}?kyc=pending" @else href="" @endif>
                                            <button type="button" class="btn kyc-btn btn-block mt-2 mt-sm-4">KYC
                                                Pending: <span>{{$pendingSupplierKYC}}</span>
                                            </button>
                                        </a>
                                        <a @if($permission) href="{{url('/suppliers')}}?kyc=expired" @else href="" @endif>
                                            <button type="button" class="btn kyc-btn btn-block mt-1 mt-sm-2">KYC
                                                Expired: <span>{{$expiredSupplierKYC}}</span>
                                            </button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--  -->
                </div>

            </div>

            <div class="row mt-3 ">
                
                {{--<div class="col-md-3">
                    <div class="card new-card">
                        <div class="row">
                            <div class="col-md-9 col-9">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title float-none">Loans({{$activeLoans + $bookedLoans + $openLoans}})</h4>
                                </div>
                            </div>
                            <div class="col-md-3 col-3 text-right">
                                <div class="card-header border-0 pb-0">
                                    <a href="##"> <img src="{{ asset('assets/img/more.svg') }}" class="three-dots" alt=""> </a>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="d-flex align-items-center justify-content-between loans-boxs">
                                        <p>Total loans</p>
                                        <span class="badge badge-pill">{{$activeLoans + $bookedLoans + $openLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs2 ">
                                        <p>Active(Under Process)</p>
                                        <span class="badge badge-pill">{{$activeLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs3">
                                        <p>Booked</p>
                                        <span class="badge badge-pill">{{$bookedLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs4">
                                        <p>Open(Interested)</p>
                                        <span class="badge badge-pill">{{$openLoans}}</span>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>--}}
            </div>

            <div class="row">
                <div class="col-sm">
                    <div class="card extra-cards ">
                        <div class="card-body">
                            <div class="row h-100 align-items-center">
                                <div class="col-md-12">
                                    <h4 class="card-title p-0 float-none">Water Management({{$wtActiveLoans + $wtBookedLoans + $wtOpenLoans}})</h4>
                                </div>
                                <div class="col-md-12 mt-auto">
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs2 ">
                                        <p>Active <br> <span>(Under Process)</span> </p>
                                        <span class="badge badge-pill">{{$wtActiveLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs3">
                                        <p>Booked</p>
                                        <span class="badge badge-pill">{{$wtBookedLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs4">
                                        <p>Open <br> <span>(Interested)</span> </p>
                                        <span class="badge badge-pill">{{$wtOpenLoans}}</span>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="card extra-cards ">
                        <div class="card-body">
                            <div class="row h-100  align-items-center">
                                <div class="col-md-12">
                                    <h4 class="card-title p-0 float-none">Pasture & Fodder({{$pfActiveLoans + $pfBookedLoans + $pfOpenLoans}})</h4>
                                </div>

                                <div class="col-md-12 mt-auto">
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs2 ">
                                        <p>Active <br> <span>(Under Process)</span> </p>
                                        <span class="badge badge-pill">{{$pfActiveLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs3">
                                        <p>Booked</p>
                                        <span class="badge badge-pill">{{$pfBookedLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs4">
                                        <p>Open <br> <span>(Interested)</span> </p>
                                        <span class="badge badge-pill">{{$pfOpenLoans}}</span>
                                    </div>

                                </div>
                            </div>

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

                <div class="col-sm">
                    <div class="card extra-cards ">
                        <div class="card-body">
                            <div class="row h-100  align-items-center">
                                <div class="col-md-12">
                                    <h4 class="card-title p-0 float-none">Machinery({{$machineryActiveLoans + $machineryBookedLoans + $machineryOpenLoans}})</h4>
                                </div>
                                <div class="col-md-12 mt-auto">
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs2 ">
                                        <p>Active <br> <span>(Under Process)</span> </p>
                                        <span class="badge badge-pill">{{$machineryActiveLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs3">
                                        <p>Booked</p>
                                        <span class="badge badge-pill">{{$machineryBookedLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs4">
                                        <p>Open <br> <span>(Interested)</span> </p>
                                        <span class="badge badge-pill">{{$machineryOpenLoans}}</span>
                                    </div>

                                </div>
                            </div>

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

                <div class="col-sm">
                    <div class="card extra-cards ">
                        <div class="card-body">
                            <div class="row h-100  align-items-center">
                                <div class="col-md-12">
                                    <h4 class="card-title p-0 float-none">Infrastructure({{$infraActiveLoans + $infraBookedLoans + $infraOpenLoans}})</h4>
                                </div>

                                <div class="col-md-12 mt-auto">
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs2 ">
                                        <p>Active <br> <span>(Under Process)</span> </p>
                                        <span class="badge badge-pill">{{$infraActiveLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs3">
                                        <p>Booked</p>
                                        <span class="badge badge-pill">{{$infraBookedLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs4">
                                        <p>Open <br> <span>(Interested)</span> </p>
                                        <span class="badge badge-pill">{{$infraOpenLoans}}</span>
                                    </div>

                                </div>
                            </div>

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

                <div class="col-sm">
                    <div class="card extra-cards ">
                        <div class="card-body">
                            <div class="row h-100 align-items-center">
                                <div class="col-md-12">
                                    <h4 class="card-title p-0 float-none">Medicine & Vaccination({{$medActiveLoans + $medBookedLoans + $medOpenLoans}})</h4>
                                </div>
                                <div class="col-md-12 mt-auto">
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs2 ">
                                        <p>Active <br> <span>(Under Process)</span> </p>
                                        <span class="badge badge-pill">{{$medActiveLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs3">
                                        <p>Booked</p>
                                        <span class="badge badge-pill">{{$medBookedLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs4">
                                        <p>Open <br> <span>(Interested)</span> </p>
                                        <span class="badge badge-pill">{{$medOpenLoans}}</span>
                                    </div>

                                </div>
                            </div>

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

                <div class="col-sm">
                    <div class="card extra-cards ">
                        <div class="card-body">
                            <div class="row h-100  align-items-center">
                                <div class="col-md-12">
                                    <h4 class="card-title p-0 float-none">Herd Increment({{$livestockActiveLoans + $livestockBookedLoans + $livestockOpenLoans}})</h4>
                                </div>
                                <div class="col-md-12 mt-auto">
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs2 ">
                                        <p>Active <br> <span>(Under Process)</span> </p>
                                        <span class="badge badge-pill">{{$livestockActiveLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs3">
                                        <p>Booked</p>
                                        <span class="badge badge-pill">{{$livestockBookedLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs4">
                                        <p>Open <br> <span>(Interested)</span> </p>
                                        <span class="badge badge-pill">{{$livestockOpenLoans}}</span>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="card extra-cards ">
                        <div class="card-body">
                            <div class="row h-100  align-items-center">
                                <div class="col-md-12">
                                    <h4 class="card-title p-0 float-none">Custom Loan({{$customLoanActiveLoans + $customLoanBookedLoans + $customLoanOpenLoans}})</h4>
                                </div>
                                <div class="col-md-12 mt-auto">
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs2 ">
                                        <p>Active <br> <span>(Under Process)</span> </p>
                                        <span class="badge badge-pill">{{$customLoanActiveLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs3">
                                        <p>Booked</p>
                                        <span class="badge badge-pill">{{$customLoanBookedLoans}}</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between loans-boxs loans-boxs4">
                                        <p>Open <br> <span>(Interested)</span> </p>
                                        <span class="badge badge-pill">{{$customLoanOpenLoans}}</span>
                                    </div>

                                </div>
                            </div>

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

            </div>

            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="row align-items-start">
                            <div class="col-md-12">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title float-none">Ongoing Projects ({{$totalOngoingProject}}) </h4>
                                    <!-- <p class="card-titleinner">  </p> -->
                                </div>
                            </div>
                            <!-- <div class="col-md-4 col-3 text-right"> 
                                <div class="card-header border-0 pb-0">
                                    <img src="{{ asset('assets/img/more.svg') }}" class="three-dots" alt="">
                                </div>
                            </div> -->
                        </div>

                        <div class="card-body">
                            <div class="row justify-content-between mt-sm-2">
                                <div class="col-md-4">
                                    <div class="suppliers-box mt-2">
                                        <span class="badge target-achieved target-achieved2  d-flex align-items-center">
                                            <span class="active-box active-boxcompleted"></span> Completed:
                                            <span> {{$completedProject}}</span>
                                        </span>
                                        <span class="badge target-achieved target-achieved3  d-flex align-items-center">
                                            <span class="active-box active-boxcompleted2"></span> Active:
                                            <span> {{$activeProject}}</span>
                                        </span>
                                        <span class="badge target-achieved target-achieved4  d-flex align-items-center">
                                            <span class="active-box active-boxcompleted3"></span> Hold:
                                            <span> {{$holdProject}}</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <canvas id="zoneChart" width="100%" height="150px"></canvas>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="row align-items-start">
                            <div class="col-md-8 col-9">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title float-none">Upcoming Projects ({{$appliedProjects +
                                        $surveyRequestedProjects + $surveyAcceptedProjects + $surveyedProjects + $verifiedProjects + $approvedProjects}})</h4>
                                </div>
                            </div>
                            <!-- <div class="col-md-4 col-3 text-right">
                                <div class="card-header border-0 pb-0">
                                    <img src="{{ asset('assets/img/more.svg') }}" class="three-dots" alt="">
                                </div>
                            </div> -->
                        </div>

                        <div class="card-body">
                            <div class="row mt-sm-2">
                                <div class="col-md-7">
                                    <div class="row mt-2">
                                        <div class="col-md-7 col-6">
                                            <span class="badge target-achieved  background-none  d-flex align-items-center">
                                                <span class="active-box active-boxcompleted"></span>
                                                Applied: <span> {{$appliedProjects}}</span>
                                            </span>
                                            <span class="badge target-achieved  background-none  d-flex align-items-center">
                                                <span class="active-box active-pink"></span>
                                                Survey Requested : <span> {{$surveyRequestedProjects}}</span>
                                            </span>
                                            <span class="badge target-achieved  background-none  d-flex align-items-center">
                                                <span class="active-box active-boxcompleted2"></span>
                                                Survey Accepted : <span> {{$surveyAcceptedProjects}}</span>
                                            </span>
                                            <span class="badge target-achieved  background-none  d-flex align-items-center">
                                                <span class="active-box active-boxcompleted3"></span>
                                                Survey Completed : <span> {{$surveyedProjects}}</span>
                                            </span>
                                            <span class="badge target-achieved  background-none  d-flex align-items-center">
                                                <span class="active-box active-pinklight"></span>
                                                Approved: <span> {{$approvedProjects}}</span>
                                            </span>
                                        </div>
                                        <div class="col-md-5 pr-sm-0 col-6">
                                            {{--<span
                                                class="badge target-achieved  background-none  d-flex align-items-center">
                                                <span class="active-box"></span>Pre-approved:
                                                <span>{{$preApprovedProjects}}</span>
                                            </span>--}}
                                            <span class="badge target-achieved  background-none  d-flex align-items-center">
                                                <span class="active-box inactive-box"></span>Verified:
                                                <span>{{$verifiedProjects}}</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <canvas id="deliveryChart" width="100%" height="200px"></canvas>
                                </div>
                            </div>

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

            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card p-2">
                        <div class="row align-items-center">
                            <div class="col-md-8 col-8">
                                <div class="card-header border-0 pb-0" style="padding: 0px 0px;">
                                    <h4 class="card-title float-none">Financials </h4>
                                </div>
                            </div>
                            <div class="col-md-4 col-4">
                                <div class="card-header border-0 pb-0 mt-2" style="padding: 0px 18px;">
                                    <label class="switch float-right">
                                        <input type="checkbox">
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="card-body" id="financialSection">
                            <div class="row mt-0 mt-sm-3">
                                <div class="col-md-4 mb-3 mb-sm-0">
                                    <div class="farmers-box farmers-new1 text-center">
                                        <h5>Total Loans</h5>
                                        <h6>Deployed till date</h6>

                                        <div class="total-amount">
                                            <h4>{{$totalDeployedLoansCount}}</h4>
                                            <p>UGX
                                                {{App\Helpers\CommonHelper::amountConversion($totalDeployedLoansAmount)}}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4 mb-3 mb-sm-0">
                                    <div class="farmers-box farmers-new2 text-center">
                                        <h5>Active Loans</h5>
                                        <h6>Deployed till date</h6>
                                        <div class="total-amount">
                                            <h4>{{$activeDeployedLoansCount}}</h4>
                                            <p>UGX
                                                {{App\Helpers\CommonHelper::amountConversion($activeDeployedLoansAmount)}}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="farmers-box farmers-new3  text-center">
                                        <h5>YTD Loans</h5>
                                        <h6>Deployed till date</h6>
                                        <div class="total-amount">
                                            <h4>{{$ytdFinancialLoanCount}}</h4>
                                            <p>UGX {{App\Helpers\CommonHelper::amountConversion($ytdFinancialLoanAmount)}}</p>
                                        </div>
                                    </div>
                                </div>

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

        </div>


    </div>
</section>

<!-- <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                    <button onclick="startFCM()"
                        class="btn btn-danger btn-flat">Allow notification
                    </button>
                <div class="card mt-3">
                    <div class="card-body">
                        @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                        @endif
                        <form action="{{ route('send.web-notification') }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label>Message Title</label>
                                <input type="text" class="form-control" name="title">
                            </div>
                            <div class="form-group">
                                <label>Message Body</label>
                                <textarea class="form-control" name="body"></textarea>
                            </div>
                            <button type="submit" class="btn btn-success btn-block">Send Notification</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
<!-- my-model -->
<div class="modal fade mobile-header filter-popup modal-dialog-slideout" id="delete-menu" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header mobile-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">
                        <!-- &times; -->
                        <img src="{{ asset('assets/img/dash-cross.svg') }}') }}" class="cross-dash" alt="">
                    </span>
                </button>
            </div>
            <div class="modal-body pt-0">

                <div class="row">
                    <div class="col-md-11 col-12">
                        <div class="pop-head">
                            <h2>Your Appointments</h2>
                        </div>

                        <div class="calendar-box">
                            <div id="calendar"></div>
                        </div>



                        <div class="row mt-4">
                            <div class="col-md-6 col-6">
                                <div class="dash-modelcontent">
                                    <h1>Appointments</h1>
                                </div>
                            </div>
                            <div class="col-md-6 col-6 text-right">
                                <div class="dash-modelcontent">
                                    <p>03 Meetings</p>
                                </div>
                            </div>
                        </div>

                        <div class="card callrequbox mt-3">
                            <div class="card-body p-0">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="calimagestudent"><img src="{{ asset('assets/img/2.jpg') }}" />
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <h4>UI design course for beginners...</h4>
                                        <div class="d-flex align-items-center teacherdetail">
                                            <div><img src="{{ asset('assets/img/1.jpg') }}" /></div>
                                            <h3>Vishkarma Sanju</h3>
                                        </div>
                                        <p class="instructor-text"> <span>Instructor: </span>Dale Steve</p>
                                    </div>
                                </div>
                                <div class="border-top mt-3 mb-2"></div>
                                <div class="d-flex align-items-center justify-content-between mt-2">
                                    <div class="student-timer"><img src="{{ asset('assets/img/timeiocn.png') }}" />
                                        <span>08:00PM</span> <i class="fa fa-circle"></i> 23 June, 2023
                                    </div>
                                    <a href="#" class="btn btn-info inner-btn">Join</a>
                                </div>

                            </div>
                        </div>

                        <div class="card callrequbox">
                            <div class="card-body p-0">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="calimagestudent"><img src="{{ asset('assets/img/2.jpg') }}" />
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <h4>UI design course for beginners...</h4>
                                        <div class="d-flex align-items-center teacherdetail">
                                            <div><img src="{{ asset('assets/img/1.jpg') }}" /></div>
                                            <h3>Vishkarma Sanju</h3>
                                        </div>
                                        <p class="instructor-text"> <span>Instructor: </span>Dale Steve</p>
                                    </div>
                                </div>
                                <div class="border-top mt-3 mb-2"></div>
                                <div class="d-flex align-items-center justify-content-between mt-2">
                                    <div class="student-timer"><img src="{{ asset('assets/img/timeiocn.png') }}" />
                                        <span>08:00PM</span> <i class="fa fa-circle"></i> 23 June, 2023
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="row justify-content-center mt-3">
                            <div class="col-md-8">
                                <a href="#" class="btn btn-primary inner-btn btn-block">Manage your
                                    Availability</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
@include('partials.calendar')
@include('partials.chart')

<script>
    $(document).ready(function() {
        var finSection = document.querySelector('#financialSection');
        finSection.style.display = 'none';
        // Attach a click event handler to the checkbox
        $('.switch input[type="checkbox"]').change(function() {
            // Toggle the visibility of the financial section based on the checkbox state
            $('#financialSection').toggle();
        });
    });

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    // Function to request notification permission
    function requestNotificationPermission() {
        Notification.requestPermission().then((permission) => {
            if (permission === 'granted') {

                return firebase.messaging().getToken();
            } else {
                console.error('Notification permission denied.');
                throw new Error('Permission denied');
            }
        }).then((token) => {

            // Store the token in your database associated with the user's account using AJAX
            storeToken(token);
        }).catch((err) => {
            console.error('Unable to get permission to notify.', err);
        });
    }

    function storeToken(token) {
        // Make an AJAX request to store the token in your database
        $.ajax({
            url: "{{ url('/store-token-device ') }}",
            method: 'POST',
            data: {
                token: token
            },
            success: function(response) {
                console.log('Token stored successfully:', response);
            },
            error: function(xhr, status, error) {
                console.error('Error storing token:', error);
            }
        });
    }

    // Add event listener to the button
    document.addEventListener("DOMContentLoaded", function() {
        // Call notification permission function after login success
        const loginSuccess = {{session()->has('status') ? 'true' : 'false'}};
        if (loginSuccess) {
            requestNotificationPermission();
        }
    });
</script>
@endsection