@extends('layouts.master')

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

        .box{
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border: 2px solid #ccc;
        border-radius: 8px;
       }
       .cnt{font-size:15px;color:#1b84ff;}
       h6{border-bottom: 1px solid #eee;
        padding-bottom: 5px;}
        .canvasjs-chart-credit
{
    display: none !important;
}
button.active {
    border: 2px solid #000 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
    background-color: #f8f9fa !important;
}
.table:not(.table-bordered) td, .table:not(.table-bordered) th, .table:not(.table-bordered) tr {
    font-size: 12px !important;
    font-weight: normal;
}

.nav-pills .nav-link {
    color: #6c757d;
}
.card .nav.flex-column>li {
    border-bottom: 1px solid #f4f4f4;
    margin: 0;
}
.btn-default {
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd;
    float:right;
}
.btn-block {
    display: block;
    width: 100%;
}
    </style>
@endsection()
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
@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="container">
                <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                        🔭
                    Explore TMS Cloud
                        </h3>
                
                <div class="card-tools">
                
                    <a href="https://efs2.tmscloud.com/appointment/?userid=6bb61e3b7bce0931da574d19d1d82c88&adminid=-1" class="btn btn-block btn-primary btn-sm">Request a FREE Demo</a>
                </div>
                    </div>
                    <div class="card-body pad table-responsive" style="background-color:#f8f9fa;">
                
                <div class="row">
                <div class="col-md-4">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item carousel-item-next carousel-item-left">
                            <img class="d-block w-100" src="http://efs2.tmscloud.com/fuelfinder.gif" alt="First slide">
                            </div>
                            <div class="carousel-item">
                            <iframe width="480" height="260" src="https://www.youtube.com/embed/w0bNI6yblis" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                            <div class="carousel-item active carousel-item-left">
                            <img class="d-block w-100" src="http://efs2.tmscloud.com/oil.png" alt="Third slide">
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                        </div>
                
                
                <center><b>Video of Features</b></center>
                    </div>
                    
                <div class="col-md-8">
                <div class="card">
                <div class="alert alert-message-data" style="display: block;color:green;margin-bottom: 20px;display: none;">
                    Data Inserted successfully.
                    </div>
                    <div class="clear"></div>
                    <div class="alert alert-message" style="display: block;color:green;margin-bottom: 20px;display: none;">
                    SMS Sent successfully.
                    </div>
                <ul class="nav nav-pills flex-column card-body">
            
                
                        <li class="nav-item active">
                        <a href="#" class="nav-link">
                            <i class="fa fa-inbox"></i>&nbsp;&nbsp;&nbsp;Update Carrier Profile
                            <span class="float-right"><button type="button" class="btn btn-default btn-sm">Quick Update</button></span>
                        </a>
                        </li>
                        
                                            
                    
                        <li class="nav-item">
                        <a target="_blank" href="{{route('assets.drivers.add')}}"  data-original-title="Quick Driver Add" class="nav-link">
                            <i class="fa fa-filter"></i>&nbsp;&nbsp;&nbsp;Add Driver
                            <span class="badge bg-warning float-right" style="float:right">{{$drivercount}}</span>
                        </a>
                        </li>
                    
                    <li class="nav-item">
                        <a  target="_blank" href="{{route('assets.trailers.add')}}"  data-original-title="Quick Trailer Add" class="nav-link">
                            <i class="fa fa-filter"></i>&nbsp;&nbsp;&nbsp;Add Trailer
                            <span class="badge bg-warning float-right" style="float:right">{{$trailercount}}</span>
                        </a>
                        </li>
                    
                        <li class="nav-item">
                        <a  target="_blank" href="{{route('assets.trucks.add')}}"  data-original-title="Quick Truck Add" class="nav-link">
                            <i class="fa fa-filter"></i>&nbsp;&nbsp;&nbsp;Add Truck 
                            <span class="badge bg-warning float-right" style="float:right">{{$truckcount}}</span>
                        </a>
                        </li>
                    <li class="nav-item">
                        
                        <a  target="_blank" id="yourBtn" href="{{route('assets.loads.add_load_carrier')}}" class="nav-link" style="cursor: pointer;">
                            <i class="fa fa-filter"></i>&nbsp;&nbsp;&nbsp;Create New Load
                        </a>
                        </li>
                <li class="nav-item">
                        
                        <a  href="#" class="nav-link" style="cursor: pointer;">
                            <i class="fa fa-filter"></i>&nbsp;&nbsp;&nbsp;Text Message Fuel App
                        </a>
                        </li>
                    <li class="nav-item">
                        
                        <a target="_blank" href="{{route('carrierPricing.newIndexbackup')}}" class="nav-link" style="cursor: pointer;">
                            <i class="fa fa-filter"></i>&nbsp;&nbsp;&nbsp;Fuel Map
                        </a>
                        </li>
                    
                    <li class="nav-item">
                        <a  target="_blank" href="{{route('fuelCards.newIndex')}}" class="nav-link">
                            <i class="fa fa-filter"></i>&nbsp;&nbsp;&nbsp;Order Cards
                            <span class="badge bg-danger float-right" style="float:right">Beta Testing</span>
                        </a>
                        </li>
                    
                    </ul>
                    
                </div>
                
                
                <button type="button" id="myBtn2" class="btn btn-block btn-outline-primary btn-lg">Download App</button>
                
                    </div>
                    
                
                    
                </div>
                
                </div>
                </div>
                </div>
            </div>
        </div>
     
<div class="container">


    <div class="row">  
        <div class="col-md-6">
            <div class="card-body pt-5">
                <div class="card card-flush h-xl-100 theme-dark-bg-body box">
                    <div class="card-header" style="min-height: 25px; margin-top: 18px;">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-800">Open Issues</span>
                        </h3>
                        <a href="{{route('assets.repair.index')}}">View All</a>

                    </div>
                    <div style="margin: 0px 10px;">
                         {!! $dataTable->table() !!}
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card-body pt-5">
                <div class="card card-flush h-xl-100 theme-dark-bg-body box">
                    <div class="card-header" style="background-color: #388dc6; padding: 8px; min-height: 44px;">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold" style="color:#fff">Truck Repairs by Unit</span>
                        </h3>
                    </div>
                    <div class="chart">
                        <canvas id="TruckRepairsbyUnit" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br><br>
    <div class="row">
    <div class="col-md-6">
    <div class="row">
        <!-- Issue by Category Card -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header" style="background-color: #388dc6; color: white; padding: 8px; min-height: 44px;">
                  Truck Issue
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            Open <span class="float-right badge bg-primary">{{$Open}}</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            Closed <span class="float-right badge bg-info">{{$closed}}</span>
                        </a>
                    </li>                    
                </ul>
            </div>
        </div>

        <!-- Reminders Card -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header" style="background-color: #388dc6; color: white; padding: 8px; min-height: 44px;">
                    <b>Reminders</b>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            Unit #: 37 - Brakes <span class="float-right badge bg-primary">31 Days</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            Closed <span class="float-right badge bg-info">5</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            Estimates <span class="float-right badge bg-success">12</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
	
	<div class="row">
        <!-- Issue by Category Card -->
        <div class="col-md-6 mt-10">
            <div class="card">
                <div class="card-header" style="background-color: #388dc6; color: white; padding: 8px; min-height: 44px;">
                  Pie Chart Summary
                </div>
                <div class="chart">
                  <canvas id="piechartsummary" width="400" height="200"></canvas>
                </div>
            </div>
        </div>

        <!-- Reminders Card -->
        <div class="col-md-6 mt-10">
            <div class="card">
                <div class="card-header" style="background-color: #388dc6; color: white; padding: 8px; min-height: 44px;">
                    <b>Reminders</b>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            Unit #: 37 - Brakes <span class="float-right badge bg-primary">31 Days</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            Closed <span class="float-right badge bg-info">5</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            Estimates <span class="float-right badge bg-success">12</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

            <div class="col-md-6">
            <div class="card-body pt-5">
                    <div class="card card-flush h-xl-100 theme-dark-bg-body box" >
                        <div class="card-header " style="background-color: #388dc6; padding: 8px; min-height: 44px;">
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold " style="color:#fff">Truck Repairs by Month</span>
                            </h3>
                        </div>
                        <div id="LoadBarChart" style="height: 370px; width: 100%;"></div>
                    </div>
                </div>
            </div>
      <div class="col-md-6"></div>
      
      <div class="col-md-6">
            <div class="card-body pt-10">
                    <div class="card card-flush h-xl-100 theme-dark-bg-body box">
                        <div class="card-header "style="background-color: #388dc6; padding: 8px; min-height: 44px;">
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold"  style=" color: #fff;">Calendar</span>
                            </h3>
                        </div>
                        <div>
                        <div id="calendar1" style="padding:10px"></div>
                        </div>
                        
                    </div>
                </div>
            </div>        
    </div>
    </div>
</div>
</div>

@endsection()
@section('script')
{!! $dataTable->scripts() !!}
<!-- <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 src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

<!-- Moment.js (required by FullCalendar v3) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<!-- FullCalendar v3 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>

<script>

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



var myChart = new Chart(TruckRepairsbyUnit, {

    type: 'bar',

    data: {

        labels: ["1306","1307","1302","1324"],

        datasets: [{

            label: 'Truck Repairs by Month',

            data: ["3485.45","1599","1500","500"],

            backgroundColor: '#34455D',

            borderWidth: 1

        }]

    },

    options: {

        scales: {

            yAxes: [{

                ticks: {

                    beginAtZero: true

                }

            }]

        },

        legend: {

            display: false

        },

    }

});    


  $(document).ready(function(){

$('#calendar1').fullCalendar({
theme: true,
header: {
  left: 'prev,next,today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay'
  }
});

});
var piechartsummary = document.getElementById('piechartsummary').getContext('2d');
var myChart = new Chart(piechartsummary, {
    type: 'pie',
    data: {
        labels: [
            'Open',
            'Closed'           
            ],
        datasets: [{
            label: 'Pie Chart Summary',
            data: [
                    {{ $Open }},
                    {{ $closed }}                 
                ],
            //backgroundColor: '#34455D',
            backgroundColor: [
                '#0073b7',
                '#17a2b8',                
                ],
            borderWidth: 1
        }]

    },

    options: {
     
        legend: {

            display: false

        },

    }

});



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).map(function(value) {
                    return parseFloat(value.toFixed(2));
                }),
                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,
                    ticks: {
                        callback: function(value) {
                            // Format as currency with thousands separator and two decimal places
                            return '$' + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
                        }
                    }
                }
            }
        }
    });
});



        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() {

                this.classList.add('active');
                document.getElementById('delivery_location').classList.remove('active');

                toggleAddress(data, true);

            });

            document.getElementById('delivery_location').addEventListener('click', function() {

                this.classList.add('active');
                document.getElementById('current_location').classList.remove('active');

                toggleAddress(data, false);
            });

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

        function toggleAddress(data, showCurrentAddress) {
        markers.forEach(marker => marker.setMap(null));
        markers = [];
        if(data) {
            data.forEach(item => {
                const address = showCurrentAddress ? item.current_address : item.dispatch_address;
                const title = showCurrentAddress ? 'Current Location: ' + item.current_address : 'Delivery Location: ' + item.dispatch_address;

                if (address) {

                    const truckEditUrl = "{{ route('assets.trucksBoard.edit', ['id' => '']) }}/" + item.TRUCK_ID;

                    const infoContent = `
                        <div>
                            <div style="margin-bottom:10px;">UNIT ID:<strong><a  href="${truckEditUrl}"> ${item.UNIT_ID}</a></strong></div>
                            ${showCurrentAddress ? 'Current Location: <strong>' + item.current_address : 'Delivery Address: <strong>' + item.dispatch_address + '</strong>'}
                        </div>
                    `;
                    geocodeAddress(address, title, infoContent);
                }
            });
        }
    }

    function geocodeAddress(address, title, infoContent, item) {
        geocoder.geocode({ 'address': address }, function(results, status) {
            if (status === 'OK') {
                const position = results[0].geometry.location;

                const truckIcon = {
                    url: "{{ asset('assets/media/gif/truck.png') }}",
                    scaledSize: new google.maps.Size(50, 50)
                };

                const marker = new google.maps.Marker({
                    map: map,
                    position: position,
                    title: title,
                    icon: truckIcon
                });

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

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

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



const table = $('#Openrepairs-table');
        var statusFromRequest = "{{ request('status') }}";
        table.on('preXhr.dt', function(e, setting, data) {
            data.search = $('#search').val();
            data.start_date = $('#start_date').val();
            data.end_date = $('#end_date').val();
            data.reptype = $('#reptype').val();

            if (statusFromRequest === "Closed") {
                data.status = 'Closed';
            } else {
                data.status = $('#STATUS').val();
            }

            // data.status = $('#STATUS').prop('checked') ? 'Open' : 'Closed'
        });

        const table1 = $('#allOpenLoadList');
        table1.on('preXhr.dt', function(e, setting, data) {
    data.truckid = '{{request()->route('truckId')}}';
    data.status = '{{request()->route('status')}}';

});


$('#allOpenLoadList').DataTable({
    dom: 'Bfrtip',
    buttons: [
        'csv', 'excel', 'print', 'reset', 'reload'
    ],
    processing: true,
    serverSide: true,
    searching: false,
    ajax: '{!! route('assets.assetsDashboard.allOpenLoadDatatable') !!}',
    data: {
        formName: 'afscpMcn',
        action: 'search',
    },
    pageLength: 6,
    order: [
        [0, 'desc']
    ],
    columns: [{
            data: 'customer_name',
            name: 'customer_name'
        },
        {
            data: 'loadid',
            name: 'Ref #'
        },
        {
            data: 'pickupaddress',
            name: 'PICUP'
        },
        {
            data: 'deliveraddress',
            name: 'DELIVERY'
        },
        {
            data: 'truckid',
            name: 'Truck #'
        },

    ],
    initComplete: function(settings, json) {
        $(".dt-buttons").addClass("d-none");
    }

});




$('#addIssueForm').submit(function(e) {
            e.preventDefault();
            var form = document.getElementById('addIssueForm');
            var formData = new FormData(form);

            $.ajax({
                url: "{{ route('assets.repair.update') }}",
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success == true) {
                        toastr.success(response.message);
                        $("#repairLogModal").modal("hide");
                        table.DataTable().ajax.reload();
                    } else if (response.success == false) {
                        toastr.error(response.message);
                    } else {
                        toastr.error('OOPS! Something Went Wrong.');
                    }
                },
                error: function(error) {
                    $('#SUMMARYError').text(error.responseJSON.errors.SUMMARY);
                    $('#REPAIRDateError').text(error.responseJSON.errors.COMPLETE_DATE);
                    $('#REPAIRTypeError').text(error.responseJSON.errors.Type);
                }
            });
        });

        $('#addRepairTypebtn').click(function() {
        $('#addRepairTypeModal').modal('show');


            });

            $('#addRepairTypeModal').on('show.bs.modal', function() {

                    $('#repairLogModal').modal('hide');
                });
            $('#addRepairTypeModal').on('hidden.bs.modal', function() {

                    $('#repairLogModal').modal('show');

            });

        $('#vendorsadd').click(function() {
            $('#vendorAddModal').modal('show');
        });
        $('#vendorAddModal').on('show.bs.modal', function() {
            $('#repairLogModal').modal('hide');
        });
        $('#vendorAddModal').on('hidden.bs.modal', function() {
            $('#repairLogModal').modal('show');
        });
        $('.closed').click(function() {
            $('#vendorAddModal').modal('hide');
        });

        $('#vandolListbtn').click(function() {
            $('.vendorlistTable').DataTable().destroy();
            $('#vendorList').val('vendorList');
                if($('#vendorList').val() == 'vendorList'){
                    $('#vendorListModal').modal('show');
                    vendorList();
                }
        });
    $('#vendorListModal').on('show.bs.modal', function () {
        if($('#vendorList').val() == 'vendorList'){
            $('#repairLogModal').modal('hide');
        }
    });
    $('#vendorListModal').on('hidden.bs.modal', function () {
        if($('#vendorList').val() == 'vendorList'){
            $('#repairLogModal').modal('show');
        }
    });
    $('.closed').click(function() {
        $('#vendorListModal').modal('hide');
    });

    function addvendors() {
            var NAME = $("#NAME").val();
            var vendorAddModule = $("#module").val();
            var vendorAddId = $("#vendoraddid").val();
            var vendorAddTab = $("#vendoraddtab").val();
            var vendorAddType = $("#vendoraddtype").val();
            var vendoraddissueid = '';

            if (vendorAddType == 'edit') {
                vendoraddissueid = $("#vendoraddissueid").val();
            }

            $.ajax({
                url: "{{ route('assets.vendors.addvenors') }}",
                method: 'get',
                data: {
                    NAME,
                    vendorAddModule,
                    vendorAddId,
                    vendorAddTab,
                    vendorAddType,
                    vendoraddissueid,
                },
                success: function(response) {
                    $("#NAME").val('');
                    $('#vendorAddModal').modal('hide');
                    var vendorSelect = $('#VENDOR_ID');
                    vendorSelect.empty();
                    vendorSelect.append(new Option('Please select', ''));
                    $('#VENDOR_ID').val('');
                    $.each(response.vendorslist, function(index, vendor) {
                        vendorSelect.append(new Option(vendor.NAME, vendor.VENDOR_ID));
                    });
                    vendorSelect.val(response.vendor_id);
                    vendorSelect.trigger('change');
                },
                error: function(error) {
                    $("#VendorNAMEError").html(error.responseJSON.errors.NAME[0]);
                }
            });
        }
        function formatToTwoDecimals(value) {
         return Math.round(value * 100) / 100;
    }

function calculateTotal() {
    var parts = parseFloat($('#PARTS').val()) || 0;
    var labor = parseFloat($('#LABOR').val()) || 0;
    var total = (parts + labor).toFixed(2);

    $('#amount').val(total);
}

window.onload = function() {

var dataPoints = [];

var chart = new CanvasJS.Chart("LoadBarChart", {
    animationEnabled: true,
    theme: "light2",
    axisY: {
        title: "Load Rate",
        titleFontSize: 24,
        includeZero: true,
        labelFormatter: function(e) {
            return "$" + CanvasJS.formatNumber(e.value); // Prepend $ to each y-axis label
        }
    },
    data: [{
        type: "column",
        yValueFormatString: "#,###",
        dataPoints: dataPoints
    }]
});

addData(null, null, null, null, null, chart, dataPoints);
};

function addData(search, startDate, endDate, reptype, status, chart, dataPoints) {
    // Start by clearing any previous appended text
    $('#chartLable').text('Expense by Category');
    var slash = "";
    var slash1 = "";
    if(search && startDate && reptype){
        slash = "/";
        slash1 = "/";
    }else if(search && startDate){
        slash = "/";
    }else if(search && reptype){
        slash1 = "/";
    }else if(startDate && reptype){
        slash1 = "/";
    }

    // Initialize an empty array to hold label parts
    let labelParts = [];
    if (search) {
        labelParts.push(`  ${search}`);
    }
    if (startDate && endDate) {
        labelParts.push(`${slash} ${startDate} - ${endDate}`);
    }


    // Clear the previous dataPoints
    dataPoints.length = 0;

    $.ajax({
        url: '{{ route('assets.assetsDashboard.chart_data') }}',
        type: 'GET',
        data: {
            search: search,
            start_date: startDate,
            end_date: endDate,
            exptype: reptype,
            status: status // Ensure this variable is defined
        },
        success: function(response) {
            // Check if response is an array
            if (Array.isArray(response)) {
                for (var i = 0; i < response.length; i++) {

                    dataPoints.push({
                        label: `${response[i].name}`,  // Use Type as the label
                        y:  (parseFloat(response[i].amount))  // Convert amount to a number
                    });

                    if (reptype) {
                        labelParts.push(`  ${slash1} ${response[i].name}`);
                    }
                }
                chart.render(); // Render the chart after updating dataPoints

                if (labelParts.length > 0) {
                    $('#chartLable').append(' (' + labelParts.join('  ')+ ' )');
                }

            } else {
                console.error("Unexpected response format:", response);
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX Error:", status, error);
        }
    });

}




$(document).ready(function () {
$('#PARTS, #LABOR').on('blur', function () {
    var value = parseFloat($(this).val()) || 0;
    $(this).val(value.toFixed(2));
    calculateTotal();
});

$('#PARTS, #LABOR').on('input', function () {
    calculateTotal();
});

        $('#addrepairtypeform').on('submit', function (e) {
                e.preventDefault();
                $.ajax({
                    url: '{{ route('repair_type.addRepairType') }}',
                    method: 'POST',
                    data: $(this).serialize(),
                    success: function (response) {

                        if (response.success) {
                            toastr.success(response.message);

                            $('#addrepairtypeform')[0].reset();
                            $('#Type').append(`<option value="${response.last_id}">${response.NAME}</option>`);
                            $('#addRepairTypeModal').modal('hide');
                        }
                    },
                    error: function (response) {
                        let errors = response.responseJSON.errors;


                        $('.text-danger').text('');

                        // Loop through errors and display them
                        $.each(errors, function (key, value) {
                            $('#' + key).siblings('.text-danger').text(value[0]);
                        });

                        // Display error toast notification
                        toastr.error('Please check the form for errors and try again.');
                    }
                });
            });
    });





$('#carouselExampleIndicators').carousel();

</script>

@endsection()