@extends('layouts.master')

@section('content')
  <style>
    #chartdiv {
      width: 100%;
      height: 400px;
      margin-bottom: 30px;
    }
    .info-box {
    box-shadow: 0 0 1px rgba(0,0,0,0.125), 0 1px 3px rgba(0,0,0,0.2);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-height: 80px;
    background: #fff;
}
</style>
<script type='importmap'>
      {
        "imports": {
          "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/core@6.1.11",
          "@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/daygrid@6.1.11"
        }
      }
</script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>
 <script type='module'>
      import { Calendar } from '@fullcalendar/core'
      import dayGridPlugin from '@fullcalendar/daygrid'

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
          headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek' // Add the timeGridWeek button here
        },
        events: [
      {
        title: 'Event 1',
        start: '2024-02-24T10:00:00',
        end: '2024-02-24T12:00:00'
      },
      {
        title: 'Event 2',
        start: '2024-02-25T14:00:00',
        end: '2024-02-25T16:00:00'
      },
      // Add more event objects as needed
    ]
        });
        calendar.render();
      });
    </script>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
                        <script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
                        <script src="https://cdn.amcharts.com/lib/4/geodata/usaLow.js"></script>
                        <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
                        <script>
                       
                        am4core.ready(function() {
                        
                        // Themes begin
                        am4core.useTheme(am4themes_animated);
                        // Themes end
                        
                         // Create map instance
                        var chart = am4core.create("chartdiv", am4maps.MapChart);
                        
                        // Set map definition
                        chart.geodata = am4geodata_usaLow;
                        
                        // Set projection
                        chart.projection = new am4maps.projections.AlbersUsa();
                        
                        // Create map polygon series
                        var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
                        
                        //Set min/max fill color for each area
                        polygonSeries.heatRules.push({
                          property: "fill",
                          target: polygonSeries.mapPolygons.template,
                          min: chart.colors.getIndex(1).brighten(1),
                          max: chart.colors.getIndex(1).brighten(-0.3)
                        });
                        
                        // Make map load polygon data (state shapes and names) from GeoJSON
                        polygonSeries.useGeodata = true;
                        
                        // Set heatmap values for each state
                        polygonSeries.data = [
                                                  ];
                        
                        // Set up heat legend
                        let heatLegend = chart.createChild(am4maps.HeatLegend);
                        heatLegend.series = polygonSeries;
                        heatLegend.align = "right";
                        heatLegend.valign = "bottom";
                        heatLegend.width = am4core.percent(20);
                        heatLegend.marginRight = am4core.percent(4);
                        heatLegend.minValue = 0;
                        heatLegend.maxValue = 40000000;
                        
                        // Set up custom heat map legend labels using axis ranges
                        var minRange = heatLegend.valueAxis.axisRanges.create();
                        minRange.value = heatLegend.minValue;
                        minRange.label.text = "Little";
                        var maxRange = heatLegend.valueAxis.axisRanges.create();
                        maxRange.value = heatLegend.maxValue;
                        maxRange.label.text = "A lot!";
                        
                        // Blank out internal heat legend value axis labels
                        heatLegend.valueAxis.renderer.labels.template.adapter.add("text", function(labelText) {
                          return "";
                        });
                        
                        // Configure series tooltip
                        var polygonTemplate = polygonSeries.mapPolygons.template;
                        polygonTemplate.tooltipText = "{name}: {value}";
                        polygonTemplate.nonScalingStroke = true;
                        polygonTemplate.strokeWidth = 0.5;
                        
                        // Create hover state and set alternative fill color
                        var hs = polygonTemplate.states.create("hover");
                        hs.properties.fill = am4core.color("#3c5bdc");
                        
                        }); // end am4core.ready()
                        </script>


<div class="content d-flex flex-column flex-column-fluid">
    <div class="card card-flush h-xxl-100">
        <div class="col-lg-12 p-3">
            <div class="card-body pt-9 pb-0">
                <ul 
                    class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold">
                    <!--begin::Nav item-->
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5 active" id="kt_stats_widget_16_tab_link_1"
                            data-bs-toggle="pill" href="#kt_stats_widget_16_tab_1">⛽ Gallons by
                            Carrier</a>
                    </li>
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5" id="kt_stats_widget_16_tab_link_2"
                            data-bs-toggle="pill" href="#kt_stats_widget_16_tab_2">📈 Charts</a>
                    </li>
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5" id="kt_stats_widget_16_tab_link_3"
                            data-bs-toggle="pill" href="#kt_stats_widget_16_tab_3">📍 Gallons by State</a>
                    </li>
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5" id="kt_stats_widget_16_tab_link_4"
                            data-bs-toggle="pill" href="#kt_stats_widget_16_tab_4">🏬 Gallons by Chain</a>
                    </li>
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5" id="kt_stats_widget_16_tab_link_5"
                            data-bs-toggle="pill" href="#kt_stats_widget_16_tab_5">🚚 Gallons by Product</a>
                    </li>
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5" id="kt_stats_widget_16_tab_link_6"
                            data-bs-toggle="pill" href="#kt_stats_widget_16_tab_6">💸 PrePaid vs Credit 💲</a>
                    </li>
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5" id="kt_stats_widget_16_tab_link_7"
                            data-bs-toggle="pill" href="#kt_stats_widget_16_tab_7">💢 Todays Rejections</a>
                    </li>
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5" id="kt_stats_widget_16_tab_link_8"
                            data-bs-toggle="pill" href="#kt_stats_widget_16_tab_8">📅 Calendar</a>
                    </li>
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5" id="kt_stats_widget_16_tab_link_9"
                            data-bs-toggle="pill" href="#kt_stats_widget_16_tab_9">Open Report</a>
                    </li>
                    <!--end::Nav item-->
                </ul>
            </div>
           
            <div class="row g-12 g-xxl-12 tab-content">
                <div class="col-xl-12 tab-pane fade show active" id="kt_stats_widget_16_tab_1">
                    <div class="d-flex flex-column flex-root">
                        <div class="page  flex-row flex-column-fluid">
                            <div class="row">
                                <!--begin::Col-->
                                <div class="col-lg-3">
                                    <div class="card card-dashed flex-left min-w-175px my-3 p-6 bg-light-primary">
                                        <span class="fs-lg-2tx fw-bold d-flex justify-content-left">
                                                <span data-kt-countup="true"  class="counted"
                                                    data-kt-initialized="1">{{$totalCarriers}}</span>
                                        </span>
                                        <h6 class="fw-semibold text-info pb-1">Total Carriers</h6>
                                    </div>
                                </div> 
                                <div class="col-lg-3">
                                    <div class="card card-dashed flex-left min-w-175px my-3 p-6 bg-light-primary">
                                        <span class="fs-lg-2tx fw-bold d-flex justify-content-left">
                                                <span data-kt-countup="true" class="counted"
                                                    data-kt-initialized="1">{{$activeFule}}</span>
                                        </span>
                                        <h6 class="fw-semibold text-info pb-1">Active Fuel Cards</h6>
                                    </div>
                                </div>  
                                <div class="col-lg-3">
                                    <div class="card card-dashed flex-left min-w-175px my-3 p-6 bg-light-primary">
                                        <span class="fs-lg-2tx fw-bold d-flex justify-content-left">
                                                <span data-kt-countup="true"  class="counted"
                                                    data-kt-initialized="1">0</span>
                                        </span>
                                        <h6 class="fw-semibold text-info pb-1">MTD Total Diesel Gallons<br>
				                  Total All Gallons: 0.00</h6>
                                        
                                    </div>
                                </div>  
                                <div class="col-lg-3">
                                    <div class="card card-dashed flex-left min-w-175px my-3 p-6 bg-light-primary">
                                        <span class="fs-lg-2tx fw-bold d-flex justify-content-left">
                                                <span data-kt-countup="true"  class="counted"
                                                    data-kt-initialized="1">$ 0.00  </span>
                                        </span>
                                        <h6 class="fw-semibold text-info pb-1 ">Total Rebates</h6>
                                    </div>
                                </div>   
                            </div>
                            <div class="row">
                                <!--begin::Col-->
                                <div class="col-lg-3">
                                    <div class="card card-dashed flex-left min-w-175px my-3 p-6 bg-light-primary">
                                        <span class="fs-lg-2tx fw-bold d-flex justify-content-left">
                                                <span data-kt-countup="true"  class="counted"
                                                    data-kt-initialized="1" id="creditAvailable">$ 0.00</span>
                                        </span>
                                        <h6 class="fw-semibold text-info pb-1">Available Credit</h6>
                                    </div>
                                </div> 
                                <div class="col-lg-3">
                                    <div class="card card-dashed flex-left min-w-175px my-3 p-6 bg-light-primary">
                                        <span class="fs-lg-2tx fw-bold d-flex justify-content-left">
                                                <span data-kt-countup="true" class="counted"
                                                    data-kt-initialized="1" id="totalgallons">$ 100,000.00</span>
                                        </span>
                                        <h6 class="fw-semibold text-info pb-1">Todays Gallons: 0.00</h6>
                                    </div>
                                </div>  
                                <div class="col-lg-3">
                                    <div class="card card-dashed flex-left min-w-175px my-3 p-6 bg-light-primary">
                                        <span class="fs-lg-2tx fw-bold d-flex justify-content-left">
                                                <span data-kt-countup="true"  class="counted"
                                                    data-kt-initialized="1">$ 0.00</span>
                                        </span>
                                        <h6 class="fw-semibold text-info pb-1">Payments Processing</h6>
                                        
                                    </div>
                                </div>  
                                <div class="col-lg-3">
                                    <div class="card card-dashed flex-left min-w-175px my-3 p-6 bg-light-primary">
                                        <span class="fs-lg-2tx fw-bold d-flex justify-content-left">
                                                <span data-kt-countup="true"  class="counted"
                                                    data-kt-initialized="1">$ 0.00</span>
                                        </span>
                                        <h6 class="fw-semibold text-info pb-1 ">Total Open/Processing Invoices2</h6>
                                    </div>
                                </div>   
                            </div>
                        </div>
                    </div>
                                            
                    <div class="col-lg-12 p-2">
                        <div class="card card-flush">
                            <div class="row">
                            
                                <div class="col-lg-1 p-2">
                                    <select name="year" id="year"  class="form-select form-select-solid form-select-lg">
                                    <option value="2025" selected>2025</option>
                                    <option value="2024">2024</option>
                                    <option value="2023">2023</option>
                                    <option value="2022">2022</option>
                                    <option value="2021">2021</option>
                                    </select>
                                </div>
                                <div class="col-lg-1 p-2">
                                    <select name="month" id="month" class="form-select form-select-solid form-select-lg">
                                                                                <option 
                                             value="01">January</option>
                                                                                    <option 
                                             value="02">February</option>
                                                                                    <option 
                                             value="03">March</option>
                                                                                    <option 
                                             value="04">April</option>
                                                                                    <option 
                                             value="05">May</option>
                                                                                    <option 
                                             value="06">June</option>
                                                                                    <option 
                                             value="07">July</option>
                                                                                    <option 
                                             value="08">August</option>
                                                                                    <option 
                                             value="09">September</option>
                                                                                    <option 
                                             value="10">October</option>
                                                                                    <option 
                                             value="11">November</option>
                                                                                    <option 
                                            selected value="12">December</option>
                                                                            </select>
                                </div>
                                <div class="col-lg-1 p-2">
                                    <buttonon type="button" onClick="formSubmit()" class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                            <div class="row p-2">
                                <h2>   December, 2025 - Q4 of 2025</h2>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                                        <thead>
                                            <tr class="text-start text-primary-500 fw-bold fs-7 text-uppercase gs-0">
                                                <th class="min-w-125px">Rank</th>
                                                <th class="min-w-125px">Carrier</th>
                                                <th class="min-w-125px">Gallons (Diesel Only)</th>
                                                <th class="min-w-125px">Days</th>
                                                <th class="min-w-125px">Last Fueled</th>
                                                <th class="tmin-w-125px">Gallons per Day</th>
                                                <th class="tmin-w-125px">Rebate</th>
                                                <th class="tmin-w-125px">AVG</th>
                                                <th class="tmin-w-125px">Fees</th>
                                                <th class="tmin-w-125px">%IN</th>
                                            </tr>
                                        </thead>
                                        <tbody class="fw-semibold text-gray-600" >
                                            @foreach($data as $key=>$rows) 
                                            @php

                                                    $row = $rows['data'];                                        
                                       
                                            @endphp
                                                                                        <tr>
                                                <td>{{$rows['rank']}}</td>
                                                <td>
                                                <a href="http://efspro.tmscloud.com/CARRIER_PROFILEedit.php?showdetail=&ID= {{$row->ID}} "  target="_blank">{{$row->NAME}}</a>  &nbsp;&nbsp;  </td>
                                                <td><b>0.00</b></td>
                                                <td>{{$rows['day']}}</td>
                                                <td>01/01/1970</td>
                                                <td>{{$rows['Gallonsperdays']}}</td>
                                                <td><a href="http://efspro.tmscloud.com/RebateReportlist.php?cmd=search&t=RebateReport&z_TRANS_DATE=BETWEEN&x_TRANS_DATE=09%2F01%2F2020&y_TRANS_DATE=09%2F30%2F2020&z_SUBFLEET=%3D&x_SUBFLEET={{$row->ID}}&p_x_SUBFLEET=o%3Djbxho99-w2aix-7opOstIw..&z_PRODUCT_CODE=LIKE&x_PRODUCT_CODE%5B%5D=ULSD&psearch=&psearchtype=" target="_blank">$ 0.00</a></td>
                                                <td>