@extends('layouts.master')

@section('style')
    <style>
        .table-responsive{
            max-height: 500px;
        }
  
    </style>
@endsection()

@section('content')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div id="kt_content_container" class="container-xxl">
        <div class="row g-5 g-xl-10">
            <div class="col-xl-3">
                <span  class="card card-xl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #F7D9E3">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                            <h3 class="text-gray-900 fw-bold fs-3">
                            <i class="fa-solid fa-user" style="font-size: 20px; !important"></i> Driver <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.drivers.index')}}?status=All">{{$driverCount}}</a></span>
                            </h3>
                        </div>

                        <div class="mb-4">
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-5">Active Driver: <a href="{{route('assets.drivers.index')}}">({{$activeDriver}})</a></h6>
                        </div>
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0">Inactive Driver:  <a href="{{route('assets.drivers.index')}}?status=INACTIVE">({{$inActiveDriver}})</a></h6>
                    </div>
                </span>
            </div>

            <div class="col-xl-3">
                <span  class="card card-xl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #CBF0F4">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3">
                        <i class="fa-solid fa-truck" style="font-size: 20px; !important"></i> Truck <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.trucks.index')}}?status=All">{{$truckCount}}</a></span> 
                            </h3>
                        </div>

                        <div class="mb-4">
                            <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-5">Active Truck: <a href="{{route('assets.trucks.index')}}">({{$activeTruck}})</a> </h6>
                        </div>
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0">Inactive Truck: <a href="{{route('assets.trucks.index')}}?status=INACTIVE">({{$inActiveTruck}})</a></h6>

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

            <div class="col-xl-3">
                <span  class="card card-xl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #CBD4F4">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3">
                        <i class="fa-solid fa-trailer" style="font-size: 20px; !important"></i> Trailers <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.trailers.index')}}?status=All">{{$trailerCount}}</a></span>
                            </h3>
                        </div>

                        <div class="mb-4">
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-5">Active Trailers:<a href="{{route('assets.trailers.index')}}">({{$activeTrailer}})</a> </h6>
                        </div>
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0">Inactive Trailers: <a href="{{route('assets.trailers.index')}}?status=INACTIVE">({{$inActiveTrailer}})</a></h6>
                    </div>
                </span>
            </div>

            <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body" style="background-color: #cef4cb">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3">
                        <i class="fa-solid fa-industry" style="font-size: 20px; !important"></i> Vendor <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.vendors.index')}}?status=All">{{$vendorCount}}</a></span>
                            </h3>
                        </div>

                        <div class="mb-4">
                            <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-5">Active Vendor: <a href="{{route('assets.vendors.index')}}">({{$activeVendor}})</a></h6>
                        </div>
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0">Inactive Vendor: <a href="{{route('assets.vendors.index')}}?status=True">({{$inActiveVendor}})</a></h6>
                    </div>
                </span>
            </div>
            </div>
            <div class="row">
            <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body" style="background-color: #cef4cb">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3">
                        <i class="fa-solid fa-magnifying-glass-dollar" style="font-size: 20px; !important"></i> Expense <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.expense.index')}}?status=All">{{$expenseCount}}</a></span>
                            </h3>
                        </div>

                        <div class="mb-5">
                            <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-7">Expense Amount: $ {{number_format($expensesTotal,2)}}</a></h6>
                        </div>
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0">
                             <div class="mb-4">
                                <h6 class="text-gray-900 fw-bold fs-1x lh-0">Grand Total Profit/Loss: <a href="{{ route('assets.trucks.allPandLReport') }}" style="color: {{ $gtotal > 0 ? 'green' : ($gtotal < 0 ? 'red' : 'black') }}; margin: 0;"> $({{ number_format($gtotal,2) }}) </a></h6>
                            </div>
                        </h6>
                    </div>
                </span>
            </div>

            <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body" style="background-color: #F7D9E3">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                            <h3 class="text-gray-900 fw-bold fs-3">
                            <i class="fa-solid fa-screwdriver-wrench" style="font-size: 20px; !important"></i> Amount 
                                <span>${{ number_format($issuesSum, 2) }}</span>
                            </h3>
                        </div>

                        <div class="mb-5">
                            <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-5">
                            Repair: <a href="{{route('assets.repair.index')}}?status=All">({{$issuesCount}})</a>
                             
                            </h6>
                        </div>

                          <div class="mb-4">
                                <h6 class="text-gray-900 fw-bold fs-1x lh-0">Open: <a href="{{route('assets.repair.index')}}?status=Open">({{$openIssuesCount}})</a> Amount: ${{ number_format($openIssuesSum, 2) }} </h6>
                            </div>
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0">Closed: <a href="{{route('assets.repair.index')}}?status=Closed">({{$closedIssuesCount}})</a>  Amount: ${{ number_format($closedIssuesSum, 2) }}</h6>
                    </div>
                </span>
            </div>

            <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body" style="background-color: #CBD4F4">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3 ">
                        <i class="fa-solid fa-truck" style="font-size: 20px; !important"></i> Dispatch Truck<i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.trucksBoard.index')}}?DISPATCH_STATUS=All">{{$totalDISPATCHT}}</a></span>
                            </h3>
                        </div>
                        <div class="mb-5">
                            <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-5">Booked Truck: <a href="{{route('assets.trucksBoard.index')}}?DISPATCH_STATUS=Booked">({{$totalBookedTrucks }})</a></h6>
                        </div>
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0">Available Truck: <a href="{{route('assets.trucksBoard.index')}}?DISPATCH_STATUS=Dispatch">({{$totalDispatchTrucks }})</a></h6>
                        
                    </div>
                </span>
            </div>

            <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body" style="background-color: #cef4cb">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3">
                        <i class="fa-solid fa-user" style="font-size: 20px; !important"></i> Customer <i class="fa fa-arrow-circle-right"></i>
                         <span><a href="{{route('assets.customers.index')}}?status=All">{{$customerCount}}</a></span>
                            </h3>
                        </div>

                        <div class="mb-4">
                            <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-5"></h6>
                        </div>
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0"></h6>
                    </div>
                </span>
            </div>
           

            <!-- <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body" style="background-color: #cef4cb">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3 mb-4">
                                Total Reminders <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.vendors.index')}}?status=All">{{$vendorCount}}</a></span>
                            </h3>
                        </div>

                        <div class="pt-5 mb-5">
                            <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-7">Active Vendor: <a href="{{route('assets.vendors.index')}}">({{$activeVendor}})</a></h6>
                        </div>
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-7">Inactive Vendor: <a href="{{route('assets.vendors.index')}}?status=True">({{$inActiveVendor}})</a></h6>
                    </div>
                </span>
            </div> -->
        </div>
    </div>
<div class="container">
   
<button type="button" id="current_location" class="btn btn-success mt-5">Current Location</button>
<button type="button" id="delivery_location" class="btn btn-danger mt-5">Delivery Location</button>
<div id="map" style="width: 100%; height: 400px;" class="mt-2"></div>

 <div class="row">
        <div class="col-md-6">
        <div class="card-body pt-5">
                        <div class="card card-flush h-xl-100">
                            <div class="card-header mb-10">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-800">6 Month Gallons Report</span>
                                </h3>
                            </div>
                            <div class="chart">
                                <canvas id="gallons" width="400" height="200"></canvas>
                            </div>
                        </div>
             </div>

        </div>
        <div class="col-md-6">
        <div class="card-body pt-5">
                        <div class="card card-flush h-xl-100">
                            <div class="card-header mb-10">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-800">MTD Gallons by State</span>
                                </h3>
                            </div>
                            <div class="chart">
                                <canvas id="gallonsByState" width="400" height="200"></canvas>
                            </div>
                        </div>
                    </div>
        </div>

        <div class="col-md-6">
            <div class="card-body pt-5">
                <div class="card card-flush h-xl-100">
                    <div class="card-header mb-10">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-800">Current Month Expense Type</span>
                        </h3>
                    </div>
                    <div class="chart">
                        <canvas id="dashboardexpenseBarChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>


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

@endsection()
@section('script')
<!-- <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.min.js"></script> -->
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5BQa0hFcyKzBa_dA2cbKt3QvdiWhxOvY&callback=initMap"  defer></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script>
<script>

        document.addEventListener('DOMContentLoaded', function () {
        var ctx = document.getElementById('dashboardexpenseBarChart').getContext('2d');
        var dashboardexpenseBarChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: @json($matchedLabels), 
                datasets: [{
                    label: 'Expenses (in USD)',
                    data: @json($amounts), 
                    backgroundColor: [
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(75, 192, 192, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });


    displaymap();
    let map;
        let markers = [];
        let geocoder;

        function displaymap() {
           // $("#displaymapModal").modal("show");
            fetchMapData();
        }


        function fetchMapData() {
            fetch("{{ route('truckBoard.showMap') }}")
                .then(response => response.json())
                .then(data => {
                    initMap(data);
                })
                .catch(error => console.error('Error fetching map data:', error));
        }

        function initMap(data) {
            const defaultCenter = { lat: 37.0902, lng: -95.7129 };

            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4, 
                center: defaultCenter
            });

            geocoder = new google.maps.Geocoder();

            // Button click events for toggling
            document.getElementById('current_location').addEventListener('click', function() {
                toggleAddress(data, true);
            });

            document.getElementById('delivery_location').addEventListener('click', function() {
                toggleAddress(data, false);
            });

            // Initially show the current location
            toggleAddress(data, true);
        }

        function toggleAddress(data, showCurrentAddress) {
            markers.forEach(marker => marker.setMap(null));
            markers = [];

            data.forEach(item => {
                const address = showCurrentAddress ? item.current_address : item.dispatch_address;
                const title = showCurrentAddress ? 'Current Location: ' + item.current_address : 'Dispatch Location: ' + item.dispatch_address;

                if (address) {
                    geocodeAddress(address, title);
                }
            });
        }

        function geocodeAddress(address, title) {
            geocoder.geocode({ 'address': address }, function(results, status) {
                if (status === 'OK') {
                    const marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        title: title
                    });
                    markers.push(marker);
                } else {
                    console.error('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        function addMarker(lat, lng, title) {
            const marker = new google.maps.Marker({
                position: { lat, lng },
                map: map,
                title: title
            });

            const infoWindow = new google.maps.InfoWindow({
                content: title
            });

            marker.addListener('mouseover', function() {
                infoWindow.open(map, marker);
            });

            marker.addListener('mouseout', function() {
                infoWindow.close();
            });

            markers.push(marker);
        }

        var gallons = document.getElementById('gallons').getContext('2d');

var myChart = new Chart(gallons, {
    type: 'bar',
    data: {
        labels: [
            @php
                $labels = [];
                $data = [];
                for ($i = 5; $i >= 0; $i--) {
                    $month = date("F", mktime(0, 0, 0, $currentMonth - $i));
                    $labels[] = "'$month'";
                    
                    $monthData = null;
                    if ($i == 5) {
                        $monthData = $rowPrevious5thMonth->Total ?? 0;
                    } elseif ($i == 4) {
                        $monthData = $rowPrevious4thMonth->Total ?? 0;
                    } elseif ($i == 3) {
                        $monthData = $rowPrevious3rdMonth->Total ?? 0;
                    } elseif ($i == 2) {
                        $monthData = $rowPrevious2ndMonth->Total ?? 0;
                    } elseif ($i == 1) {
                        $monthData = $rowPreviousMonth->Total ?? 0;
                    } else {
                        $monthData = $rowCurrentMonth->Total ?? 0;
                    }
                    $data[] = $monthData;
                }
                echo implode(', ', $labels);
            @endphp
        ],
        datasets: [{
            label: 'Gallons (Diesel Only)',
            data: [
                @php
                    echo implode(', ', $data);
                @endphp
            ],
            backgroundColor: '#0073b7',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

var gallonsByState = document.getElementById('gallonsByState').getContext('2d');
    var myChart = new Chart(gallonsByState, {
        type: 'bar',
        data: {
            labels: null,
        datasets: [{
            label: 'Gallons by State',
            data: null,
            backgroundColor: 'rgb(27, 132, 255)',
            borderWidth: 1
                }]
            },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        legend: {
            display: false
        },
    }
});
</script>

@endsection()