@extends('layouts.master')

@section('content')


<div class="toolbar py-2" id="kt_toolbar">
    <!--begin::Container-->
    <div id="kt_toolbar_container" class=" container-fluid  d-flex align-items-center"><div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3  mb-5 mb-lg-0 ">
    <!--begin::Title-->
    <h1 class="d-flex align-items-center text-gray-900 fw-bold my-1 fs-3">
        Mixed
            </h1>
    <!--end::Title-->

    </div>
                    <!--begin::Page title-->
            <div class="flex-grow-1 flex-shrink-0 me-5">
                
<!--begin::Page title-->

<!--end::Page title-->            </div>
            <!--end::Page title-->
        
        <!--begin::Action group-->
        		
        <div class="d-flex align-items-center flex-wrap">
        
            <!--begin::Wrapper-->
            
            <!--end::Wrapper-->            
           
            <!--begin::Wrapper-->
            <div class="d-flex align-items-center"> 
                <!--begin::Daterangepicker-->
          
                <a href="#" class="btn btn-sm btn-bg-light btn-color-gray-500 btn-active-color-primary me-2" id="reportrange" data-bs-toggle="tooltip" data-bs-dismiss="click" data-bs-trigger="hover" data-bs-original-title="Select dashboard daterange" data-kt-initialized="1">
                    <span class="fw-semibold me-1" id="kt_dashboard_daterangepicker_title">Today:</span>
                    <span class="fw-bold" id="kt_dashboard_daterangepicker_date">Feb 5</span>
                </a>
                <!--end::Daterangepicker-->

                <!--begin::Actions-->
                
                <!--end::Actions-->
            </div>  
            <!--end::Wrapper-->             
        </div>
        <!--end::Action group-->     	 
    </div>
    <!--end::Container-->
</div>


    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="flex-lg-row-fluid">
                <div class="d-flex flex-wrap flex-stack pb-7">
                    <div class="d-flex flex-wrap align-items-center my-1">
                        <h3 class="fw-bold me-5 my-1">Carrier Profile
                        </h3>
                    </div>
                </div>
    
<div class="row g-5 g-xl-8">
    <!--begin::Col-->
    <div class="col-xl-4">
        <!--begin::Mixed Widget 14-->
<div class="card card-xxl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #F7D9E3">
    <!--begin::Body-->
    <div class="card-body d-flex flex-column">
        <!--begin::Wrapper-->
        <div class="d-flex flex-column mb-7">
            <!--begin::Title-->                      
            <a href="#" class="text-gray-900 text-hover-primary fw-bold fs-3">Total In-Network Gallons</a>        
            <!--end::Title-->     
        </div>
        <!--end::Wrapper-->
      
        <!--begin::Row-->
        <div class="row g-0">
            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-42 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{number_format($In_Network_Gallons->Total) }}</div>
                        <div class="fs-7 text-gray-600 fw-bold">Total</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 ms-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-45 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{number_format($In_Network_Gallons->TotalGallons,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalGallons</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-21 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($In_Network_Gallons->TotalCharges,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalCharges</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($In_Network_Gallons->AvgPrice,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">AvgPrice</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->
                <!--begin::Col-->
                <div class="col-6">
                <div class="d-flex align-items-center ms-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($In_Network_Gallons->TotalRebate,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalRebate</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
    </div>
</div>
<!--end::Mixed Widget 14-->
    </div>
    <!--end::Col-->
    
    <!--begin::Col-->
    <div class="col-xl-4">
        <!--begin::Mixed Widget 14-->
<div class="card card-xxl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #CBF0F4">
    <!--begin::Body-->
    <div class="card-body d-flex flex-column">
        <!--begin::Wrapper-->
        <div class="d-flex flex-column mb-7">
            <!--begin::Title-->                      
            <a href="#" class="text-gray-900 text-hover-primary fw-bold fs-3">Total Out-Network Gallons</a>        
            <!--end::Title-->     
        </div>
        <!--end::Wrapper-->
        
        <!--begin::Row-->
        <div class="row g-0">
            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-42 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{$Out_Network_Gallons->Total}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">Total</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 ms-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-45 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{number_format($Out_Network_Gallons->TotalGallons,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalGallons</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-21 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($Out_Network_Gallons->TotalCharges,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalCharges</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($Out_Network_Gallons->TotalRebate,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalRebate</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

             <!--begin::Col-->
             <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($Out_Network_Gallons->AvgPrice,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">AvgPrice</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
    </div>
</div>
<!--end::Mixed Widget 14-->
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-xl-4">
        <!--begin::Mixed Widget 14-->
<div class="card card-xxl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #CBD4F4">
    <!--begin::Body-->
    <div class="card-body d-flex flex-column">
        <!--begin::Wrapper-->
        <div class="d-flex flex-column mb-7">
            <!--begin::Title-->                      
            <a href="#" class="text-gray-900 text-hover-primary fw-bold fs-3">Total Pilot Gallons</a>        
            <!--end::Title-->     
        </div>
        <!--end::Wrapper-->
        
        <!--begin::Row-->
        <div class="row g-0">
            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-42 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{$Pilot_Gallons->Total}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">Total</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 ms-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-45 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{number_format($Pilot_Gallons->TotalGallons,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalGallons</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-21 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($Pilot_Gallons->TotalCharges,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalCharges</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($Pilot_Gallons->AvgPrice,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">AvgPrice</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

             <!--begin::Col-->
             <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($Pilot_Gallons->TotalRebate,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalRebate</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
    </div>
</div>
<!--end::Mixed Widget 14-->
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->






  <!--begin::secondrow-->
<div class="row g-5 g-xl-8">
    <!--begin::Col-->
    <div class="col-xl-4">
        <!--begin::Mixed Widget 14-->
<div class="card card-xxl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #F7D9E3">
    <!--begin::Body-->
    <div class="card-body d-flex flex-column">
        <!--begin::Wrapper-->
        <div class="d-flex flex-column mb-7">
            <!--begin::Title-->                      
            <a href="#" class="text-gray-900 text-hover-primary fw-bold fs-3">Total TA Gallons</a>        
            <!--end::Title-->     
        </div>
        <!--end::Wrapper-->
        
        <!--begin::Row-->
        <div class="row g-0">
            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-42 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{$TA_Gallons->Total }}</div>
                        <div class="fs-7 text-gray-600 fw-bold">Total</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 ms-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-45 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{number_format($TA_Gallons->TotalGallons,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalGallons</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-21 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($TA_Gallons->TotalCharges,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalCharges</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($TA_Gallons->AvgPrice,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">AvgPrice</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->
                <!--begin::Col-->
                <div class="col-6">
                <div class="d-flex align-items-center ms-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($TA_Gallons->TotalRebate,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalRebate</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
    </div>
</div>
<!--end::Mixed Widget 14-->
    </div>
    <!--end::Col-->
    
    <!--begin::Col-->
    <div class="col-xl-4">
        <!--begin::Mixed Widget 14-->
<div class="card card-xxl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #CBF0F4">
    <!--begin::Body-->
    <div class="card-body d-flex flex-column">
        <!--begin::Wrapper-->
        <div class="d-flex flex-column mb-7">
            <!--begin::Title-->                      
            <a href="#" class="text-gray-900 text-hover-primary fw-bold fs-3">Total Loves Gallonss</a>        
            <!--end::Title-->     
        </div>
        <!--end::Wrapper-->
        
        <!--begin::Row-->
        <div class="row g-0">
            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-42 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{$Loves_Gallons->Total}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">Total</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 ms-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-45 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{number_format($Loves_Gallons->TotalGallons,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalGallons</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-21 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($Loves_Gallons->TotalCharges,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalCharges</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($Loves_Gallons->TotalRebate,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalRebate</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

             <!--begin::Col-->
             <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($Loves_Gallons->AvgPrice,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">AvgPrice</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
    </div>
</div>
<!--end::Mixed Widget 14-->
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-xl-4">
        <!--begin::Mixed Widget 14-->
<div class="card card-xxl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #CBD4F4">
    <!--begin::Body-->
    <div class="card-body d-flex flex-column">
        <!--begin::Wrapper-->
        <div class="d-flex flex-column mb-7">
            <!--begin::Title-->                      
            <a href="#" class="text-gray-900 text-hover-primary fw-bold fs-3">Pilot One9 and Express Gallons</a>        
            <!--end::Title-->     
        </div>
        <!--end::Wrapper-->
        
        <!--begin::Row-->
        <div class="row g-0">
            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-42 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{$One9_and_Express_Gallons->Total}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">Total</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 ms-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-45 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">{{number_format($One9_and_Express_Gallons->TotalGallons,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalGallons</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-21 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($One9_and_Express_Gallons->TotalCharges,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalCharges</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($One9_and_Express_Gallons->AvgPrice,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">AvgPrice</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->

             <!--begin::Col-->
             <div class="col-6">
                <div class="d-flex align-items-center mb-9 me-2">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-40px me-3">
                        <div class="symbol-label bg-light">
                            <i class="ki-outline ki-abstract-44 fs-1 text-gray-900"></i>                        </div>
                    </div>
                    <!--end::Symbol-->

                    <!--begin::Title-->
                    <div>
                        <div class="fs-5 text-gray-900 fw-bold lh-1">${{number_format($One9_and_Express_Gallons->TotalRebate,2)}}</div>
                        <div class="fs-7 text-gray-600 fw-bold">TotalRebate</div>
                    </div>
                    <!--end::Title-->
                </div>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
    </div>
</div>
<!--end::Mixed Widget 14-->
    </div>
    <!--end::Col-->
</div>
<!--end::secondRow-->

<form action="" method="GET">
                    <div class="card mb-7" data-select2-id="select2-data-144-uoh6">
                        <div class="card-body" data-select2-id="select2-data-143-nqr2">
                            <h3>Pilot One9 and Express Gallons Details</h3>
                            <div class="d-flex align-items-center">
                                <div class="position-relative w-md-400px me-md-2">
                                    <i
                                        class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                    <input type="text" class="form-control form-control-solid ps-10" name="search"
                                        value="" id="search" placeholder="Search">
                                </div>
                                <div class="d-flex align-items-center">
                                    <button type="button" id="submit" class="btn btn-primary me-5">Search</button>
                                    <button type="button" id="clear" class="btn btn-primary me-5">Clear</button>
                                    
                                </div>
                               
                            </div>
                            <div class="float-end">
                                <select name="downloadOptions"
                                    id="downloadOptions"class="form-select form-select-solid form-select-sm"
                                    data-control="select2" data-hide-search="true" data-placeholder="Downloads">
                                    <option value="">Downloads</option>
                                    <option value="excel">Excel</option>
                                    <option value="csv">CSV</option>
                                    <option value="print">Print</option>
                                    <option value="reset">Reset</option>
                                    <option value="reload">Reload</option>
                                </select>
                            </div>

                            <div class="collapse" id="kt_advanced_search_form"
                                data-select2-id="select2-data-kt_advanced_search_form" style="">
                                <div class="separator separator-dashed mt-9 mb-6">

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





                <div class="tab-content">
                    <div id="kt_project_users_table_pane" class="tab-pane fade show active">
                        <div class="card card-flush">
                            <div class="card-body pt-0">
                                <div class="table-responsive p-5">
                                {!! $dataTable->table() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



                <form action="" method="GET" class="mt-3">
                    <div class="card mb-7" data-select2-id="select2-data-144-uoh6">
                        <div class="card-body" data-select2-id="select2-data-143-nqr2">
                            <h3>Pilot/FJ Gallons by State</h3>
                            <div class="d-flex align-items-center">
                                <div class="position-relative w-md-400px me-md-2">
                                    <i
                                        class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                    <input type="text" class="form-control form-control-solid ps-10" name="piloatfjsearch"
                                        value="" id="piloatfjsearch" placeholder="Search">
                                </div>
                                <div class="d-flex align-items-center">
                                    <button type="button" id="piloatfjsubmit" class="btn btn-primary me-5">Search</button>
                                    <button type="button" id="piloatfjclear" class="btn btn-primary me-5">Clear</button>
                                    
                                        
                                </div>
                              
                            </div>
                            <div class="float-end">
                                <select name="PilotFJdownloadOptions"
                                    id="PilotFJdownloadOptions"class="form-select form-select-solid form-select-sm"
                                    data-control="select2" data-hide-search="true" data-placeholder="Downloads">
                                    <option value="">Downloads</option>
                                    <option value="excel">Excel</option>
                                    <option value="csv">CSV</option>
                                    <option value="print">Print</option>
                                    <option value="reset">Reset</option>
                                    <option value="reload">Reload</option>
                                </select>
                            </div>

                            <div class="collapse" id="kt_advanced_search_form"
                                data-select2-id="select2-data-kt_advanced_search_form" style="">
                                <div class="separator separator-dashed mt-9 mb-6">

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




                <div class="tab-content">
                    <div id="kt_project_users_table_pane" class="tab-pane fade show active">
                        <div class="card card-flush">
                            <div class="card-body pt-0">
                                <div class="table-responsive p-5" >
                                <table id="users-table" class="table">
                                        <thead>
                                           <tr>
                                                <th>State</th>
                                                <th>Total</th>
                                                <th>TotalGallons</th>
                                                <th>TotalCharges</th>
                                                <th>AvgPrice</th>
                                                <th>TotalRebate</th>
                                           </tr>
                                        </thead>
                                        <tfoot align="right">
                                            <tr><th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th></tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                

                <form action="" method="GET" class="mt-3">
                    <div class="card mb-7" data-select2-id="select2-data-144-uoh6">
                        <div class="card-body" data-select2-id="select2-data-143-nqr2">
                            <h3>TA/Petro Gallons by State</h3>
                            <div class="d-flex align-items-center">
                                <div class="position-relative w-md-400px me-md-2">
                                    <i
                                        class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                    <input type="text" class="form-control form-control-solid ps-10" name="taPetrosearch"
                                        value="" id="taPetrosearch" placeholder="Search">
                                </div>
                                <div class="d-flex align-items-center">
                                    <button type="button" id="taPetrosubmit" class="btn btn-primary me-5">Search</button>
                                    <button type="button" id="taPetroclear" class="btn btn-primary me-5">Clear</button>
                                    
                                        
                                </div>
                             
                            </div>
                            <div class="float-end">
                                <select name="tapetrodownloadOptions"
                                    id="tapetrodownloadOptions"class="form-select form-select-solid form-select-sm"
                                    data-control="select2" data-hide-search="true" data-placeholder="Downloads">
                                    <option value="">Downloads</option>
                                    <option value="excel">Excel</option>
                                    <option value="csv">CSV</option>
                                    <option value="print">Print</option>
                                    <option value="reset">Reset</option>
                                    <option value="reload">Reload</option>
                                </select>
                            </div>

                            <div class="collapse" id="kt_advanced_search_form"
                                data-select2-id="select2-data-kt_advanced_search_form" style="">
                                <div class="separator separator-dashed mt-9 mb-6">

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


                <div class="tab-content">
                    <div id="kt_project_users_table_pane" class="tab-pane fade show active">
                        <div class="card card-flush">
                            <div class="card-body pt-0">
                                <div class="table-responsive p-5" >
                                <table id="TAPetroGallons" class="table">
                                        <thead>
                                           <tr>
                                                <th>State</th>
                                                <th>Total</th>
                                                <th>TotalGallons</th>
                                                <th>TotalCharges</th>
                                                <th>AvgPrice</th>
                                                <th>TotalRebate</th>
                                           </tr>
                                        </thead>
                                        <tfoot align="right">
                                            <tr><th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th></tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



                <form action="" method="GET" class="mt-3">
                    <div class="card mb-7" data-select2-id="select2-data-144-uoh6">
                        <div class="card-body" data-select2-id="select2-data-143-nqr2">
                            <h3>Loves Gallons by State</h3>
                            <div class="d-flex align-items-center">
                                <div class="position-relative w-md-400px me-md-2">
                                    <i
                                        class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                    <input type="text" class="form-control form-control-solid ps-10" name="lovesSearch"
                                        value="" id="lovesSearch" placeholder="Search">
                                </div>
                                <div class="d-flex align-items-center">
                                    <button type="button" id="lovesubmit" class="btn btn-primary me-5">Search</button>
                                    <button type="button" id="loveclear" class="btn btn-primary me-5">Clear</button>
                                  
                                        
                                </div>
                               
                            </div>
                            <div class="float-end">
                                <select name="lovesdownloadOptions"
                                    id="lovesdownloadOptions"class="form-select form-select-solid form-select-sm"
                                    data-control="select2" data-hide-search="true" data-placeholder="Downloads">
                                    <option value="">Downloads</option>
                                    <option value="excel">Excel</option>
                                    <option value="csv">CSV</option>
                                    <option value="print">Print</option>
                                    <option value="reset">Reset</option>
                                    <option value="reload">Reload</option>
                                </select>
                            </div>

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


                <div class="tab-content">
                    <div id="kt_project_users_table_pane" class="tab-pane fade show active">
                        <div class="card card-flush">
                            <div class="card-body pt-0">
                                <div class="table-responsive p-5" >
                                <table id="LovesGallons" class="table">
                                        <thead>
                                           <tr>
                                                <th>State</th>
                                                <th>Total</th>
                                                <th>TotalGallons</th>
                                                <th>TotalCharges</th>
                                                <th>AvgPrice</th>
                                                <th>TotalRebate</th>
                                                
                                           </tr>
                                        </thead>
                                        <tfoot align="right">
                                            <tr><th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th></tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

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

   
@endsection()
@section('script')
{!! $dataTable->scripts() !!}

    <script>
        const table = $('#inNetworkGallons-table');
        const table1 = $('#users-table');
        const table2 = $('#TAPetroGallons');
        const table3 = $('#LovesGallons');
        

        table.on('preXhr.dt', function(e, setting, data) {    
            data.search = $('#search').val();
            data.card_status = $('#CARD_STATUS').val();
           
        });

        table1.on('preXhr.dt', function(e, setting, data) { 
            data.search = $('#piloatfjsearch').val();
            data.start_date = '2025-11-01';            
            data.end_date = '2025-11-30';

        });
        table2.on('preXhr.dt', function(e, setting, data) { 
            data.search = $('#taPetrosearch').val();
            data.start_date = '2025-11-01';            
            data.end_date = '2025-11-30';
        });
        table3.on('preXhr.dt', function(e, setting, data) { 
            data.search = $('#lovesSearch').val();
            data.start_date = '2025-11-01';            
            data.end_date = '2025-11-30';

        });

        $('#submit').on('click', function() {
            table.DataTable().ajax.reload();
            return false;
        });
        $('#downloadOptions').on('change', function() {
                var downloadOptions = this.value;
                $(".buttons-" + downloadOptions).click();
        });

        $('#PilotFJdownloadOptions').on('change', function() {
                var PilotFJdownloadOptions = this.value;
                $(".buttons-" + PilotFJdownloadOptions).click();
        });

        $('#tapetrodownloadOptions').on('change', function() {
                var tapetrodownloadOptions = this.value;
                $(".buttons-" + tapetrodownloadOptions).click();
        });
        $('#lovesdownloadOptions').on('change', function() {
                var lovesdownloadOptions = this.value;
                $(".buttons-" + lovesdownloadOptions).click();
        });

        
        $('#clear').on('click', function() {
            $('#search, #CARD_STATUS')
                .val('');
            table.DataTable().ajax.reload();
        });


        // start  table1 
        $('#piloatfjsubmit').on('click', function() {
            table1.DataTable().ajax.reload();
            return false;
        });

        $('#piloatfjclear').on('click', function() {
            $('#piloatfjsearch, #CARD_STATUS')
                .val('');
            table1.DataTable().ajax.reload();
        });
        // end  table1 

         // start  table2 
         $('#taPetrosubmit').on('click', function() {
            table2.DataTable().ajax.reload();
            return false;
        });

        $('#taPetroclear').on('click', function() {
            $('#taPetrosearch, #CARD_STATUS')
                .val('');
            table2.DataTable().ajax.reload();
        });
        // end  table2


          // start  table3 
          $('#lovesubmit').on('click', function() {
            table3.DataTable().ajax.reload();
            return false;
        });

        $('#lovesclear').on('click', function() {
            $('#lovesSearch, #CARD_STATUS')
                .val('');
            table3.DataTable().ajax.reload();
        });
        // end  table3



        var start = moment('2025-11-01');//.subtract(29, 'days');
        var end = moment('2025-11-30');
        
        function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        window.location.href="{{route('monthlyReports')}}?start_date="+start.format('YYYY-MM-DD')+"&end_date="+end.format('YYYY-MM-DD')
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));


    $(document).ready(function () {
       
        $('#users-table').DataTable({
    dom: 'Bfrtip',
    buttons: ['csv', 'excel', 'print', 'reset', 'reload'],
    processing: true,
    serverSide: true,
    ajax: '{!! route('petroGallonsGallons') !!}',
    data: {
        formName: 'afscpMcn',
        action: 'search',
    },
    paging: false, // Disable pagination
    order: [
        [0, 'desc'] // Order by the first column in descending order
    ],
    footerCallback: function (tfoot, data, start, end, display) {
        var api = this.api();
   
        var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

        var total = api.column(1).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);
        $(api.column(1).footer()).html(total);

        var totalgallons = api.column(2).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);

        $(api.column(2).footer()).html(totalgallons.toLocaleString("en-US"));

        var totalcharges = api.column(3).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);
        var totalcharges1 =0;
        var totalcharges1 = totalgallons / totalcharges;
        
        $(api.column(3).footer()).html("$" + totalcharges.toLocaleString("en-US"));

        var avgprice = api.column(4).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);

        $(api.column(4).footer()).html("$" + avgprice.toFixed(2));

        var totalrebate = api.column(5).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);
        var totalrebate2 = totalrebate.toFixed(2);
        $(api.column(5).footer()).html("$" + parseFloat(totalrebate2).toLocaleString("en-US"));
    },
    columns: [
        { data: 'Location State/Province', name: 'Location State/Province' },
        { data: 'Total', name: 'Total' },
        { data: 'TotalGallons', name: 'TotalGallons' },
        { data: 'TotalCharges', name: 'TotalCharges' },
        { data: 'AvgPrice', name: 'AvgPrice' },
        { data: 'TotalRebate', name: 'TotalRebate' },
    ],
});


        $('#TAPetroGallons').DataTable({          
           
          processing: true,
          serverSide: true,
          ajax: '{!! route('TAPetroGallonsGallons') !!}',
          data: {
                formName: 'afscpMcn',
                action: 'search',
         },
          paging: false, // Disable pagination
          order: [
                [0, 'desc'] // Order by the first column in descending order
            ],
    footerCallback: function (tfoot, data, start, end, display) {
        var api = this.api();
   
        var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

        var total = api.column(1).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);
        $(api.column(1).footer()).html(total);

        var totalgallons = api.column(2).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);

        $(api.column(2).footer()).html(totalgallons.toLocaleString("en-US"));

        var totalcharges = api.column(3).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);
        var totalcharges1 =0;
        var totalcharges1 = totalgallons / totalcharges;
        
        $(api.column(3).footer()).html("$" + totalcharges.toLocaleString("en-US"));

        var avgprice = api.column(4).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);

        $(api.column(4).footer()).html("$" + avgprice.toFixed(2));

        var totalrebate = api.column(5).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);
        
        $(api.column(5).footer()).html("$" + totalrebate.toLocaleString("en-US"));
    },
         
          columns: [
              {data: 'Location State/Province', name: 'Location State/Province'},
              {data: 'Total', name: 'Total'},
              {data: 'TotalGallons', name: 'TotalGallons'},
              {data: 'TotalCharges', name: 'TotalCharges'},
              {data: 'AvgPrice', name: 'AvgPrice'},
              {data: 'TotalRebate', name: 'TotalRebate'},
          ],
        
      });

        $('#LovesGallons').DataTable({
          
          processing: true,
          serverSide: true,
          ajax: '{!! route('lovesGallons') !!}',
          paging: false, // Disable pagination
          order: [
            [0, 'desc'] // Order by the first column in descending order
        ],
    footerCallback: function (tfoot, data, start, end, display) {
        var api = this.api();
     

        var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

        var total = api.column(1).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);
        $(api.column(1).footer()).html(total);

        var totalgallons = api.column(2).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);

        $(api.column(2).footer()).html(totalgallons.toLocaleString("en-US"));

        var totalcharges = api.column(3).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);
        var totalcharges1 =0;
        var totalcharges1 = totalgallons / totalcharges;
        
        $(api.column(3).footer()).html("$" + totalcharges.toLocaleString("en-US"));

        var avgprice = api.column(4).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);

        $(api.column(4).footer()).html("$" + avgprice.toFixed(2));

        var totalrebate = api.column(5).data().reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);
        
        $(api.column(5).footer()).html("$" + totalrebate.toLocaleString("en-US"));
    },
         
         
          columns: [
              {data: 'Location State/Province', name: 'Location State/Province'},
              {data: 'Total', name: 'Total'},
              {data: 'TotalGallons', name: 'TotalGallons'},
              {data: 'TotalCharges', name: 'TotalCharges'},
              {data: 'AvgPrice', name: 'AvgPrice'},
              {data: 'TotalRebate', name: 'TotalRebate'},
             
          ],
       
      });


     

    });
    </script>
@endsection()