@include('includes.app')
@include('customerP.includes.sidebar')
@include('customerP.includes.header')
@include('includes.toster')
<style>
    .page-content {
        min-height: 100vh;
        padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
    }

    .dashboard-card {
        background: white;
        border-radius: 10px;
        box-shadow: 0 0 10px #eee;
        padding: 20px 10px;
        display: flex;
        flex-direction: column;
        /* Stack items vertically */
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 140px;
    }

    .icon-box {
        background: #05BCF6;
        color: white;
        padding: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .label-text small {
        font-size: 13px;
        color: #444;
        font-weight: 700;
    }

    .value-text h5 {
        font-size: 18px;
        font-weight: 700;
        color: #05BCF6;
        margin-top: 5px;
    }

    .card-label {
        font-weight: bold;
        color: #000;
    }

    .card-value {
        color: #05BCF6;
        font-weight: bold;
        font-size: 18px;
    }

    .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(5, 188, 246, 0.3);
    }

    @media (max-width: 768px) {
        .col-md-2 {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }

    @media (max-width: 576px) {
        .col-md-2 {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }

    @media (min-width: 992px) {
        .col-lg-2-4 {
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
</style>


<div class="page-content">
    <div class="container-fluid media-containerfluid" style="background-color: #F6F7F9; padding-left: 45px;">

        <div class="mb-4">
            <h4>Dashboard</h4>
        </div>


        <div class="row g-3 mb-3">

            <!-- Card 1 -->
            <div class="col-12 col-sm-6 col-lg-3 mb-4">

                <div class="dashboard-card">
                    <div class="icon-box">
                        <i class="bi bi-card-list"></i>
                    </div>
                    <div class="label-text">
                        <small>Quotations</small>
                    </div>
                    <div class="value-text">
                        <h5 class="mb-0">{{ $quotations->count() }}</h5>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="col-12 col-sm-6 col-lg-3 mb-4">
                <div class="dashboard-card">
                    <div class="icon-box">
                        <i class="ti ti-shopping-cart"></i>
                    </div>
                    <div class="label-text">
                        <small>Total Orders</small>
                    </div>
                    <div class="value-text">
                        <h5 class="mb-0">{{ $loadOrders->count() }}</h5>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="col-12 col-sm-6 col-lg-3 mb-4">
                <div class="dashboard-card">
                    <div class="icon-box">
                        <img src="{{ asset('assets/images/icons/Group 207215.png') }}" style="height: 22px;" />
                    </div>
                    <div class="label-text">
                        <small>Shipped Order</small>
                    </div>
                    <div class="value-text">
                        <h5 class="mb-0">{{ $shippedOrderCount }}</h5>
                    </div>
                </div>
            </div>

            <!-- Card 4 -->
            <div class="col-12 col-sm-6 col-lg-3 mb-4">
                <div class="dashboard-card">
                    <div class="icon-box">
                        <i class="bi bi-wallet-fill"></i>
                    </div>
                    <div class="label-text">
                        <small>Paid Order</small>
                    </div>
                    <div class="value-text">
                        <h5 class="mb-0">{{ $paidOrderCount }}</h5>
                    </div>
                </div>
            </div>



            <!-- Card 5 -->
            <!--<div class="col-12 col-sm-6 col-lg-2-4 mb-4">-->
            <!--  <div class="dashboard-card">-->
            <!--    <div class="icon-box">-->
            <!--      <i class="ti ti-briefcase"></i>-->
            <!--    </div>-->
            <!--    <div class="label-text">-->
            <!--      <small>Total Driver</small>-->
            <!--    </div>-->
            <!--    <div class="value-text">-->
            <!--      <h5 class="mb-0">12444</h5>-->
            <!--    </div>-->
            <!--  </div>-->
            <!--</div>-->

        </div>


        <div class="row mb-4">
            <!-- Chart Section - 40% -->
            <div class="col-md-5">
                <h5 class="fw-bold mb-3" style="color: black;">Performance Analysis</h5>
                <div class="card shadow-sm" style="border-radius: 10px;">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <!-- Chart with Center Label -->
                            <div style="width: 180px; height: 180px; position: relative;">
                                <canvas id="performanceChart" width="200" height="200"></canvas>
                                <div
                                    style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                                    <div style="font-weight: bold;">Accuracy</div>
                                    <div style="font-size: 20px; font-weight: bold;">99.99%</div>
                                </div>
                            </div>

                            <!-- Legend -->
                            <div style="margin-left: 80px; font-size: 14px;"> <!-- Reduced gap here -->
                                <p class="mb-3"><span class="badge " style="background-color:#0B0B45;">&nbsp;</span> On
                                    Quotations</p>
                                <p class="mb-3"><span class="badge " style="background-color:#1EC8FF;">&nbsp;</span>
                                    Orders </p>
                                <p class="mb-0"><span class="badge" style="background-color:#007BFF;">&nbsp;</span>
                                    Paid Orders</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Bids - 60% -->
            <div class="col-md-7">
                <h5 class="fw-bold mb-3" style="color: black;">Recent Quotation</h5>
                <div class="card shadow-sm" style="border-radius: 10px; overflow: hidden;">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table mb-0">
                                <thead style="background-color: #05BCF6; color: white;">
                                    <tr>
                                        <th>Load Req. ID</th>
                                        <th>Customer</th>
                                        <th>Pickup Location</th>
                                        <th>Drop Location</th>
                                        <th>Price</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($quotations as $quotation)
                                    @if ($loop->iteration < 6)
                                    <tr>                                                                                    
                                        <td>
                                            #{{ $quotation->quotation_id ?: $quotation->id }}
                                        </td>
                                        <td>{{ $quotation->customer ? $quotation->customer->company_name : 'N/A' }}</td>

                                        

                                        <td>
                                                @php
                                                    $pickup = $quotation->rows->flatMap->pickups->first();
                                                    $singlePickupAddress = ($pickup->cities ? $pickup->cities->name . ',' : "") .
                                                        ($pickup->cities ? $pickup->cities->state_code : "") .
                                                        ', ' . ($pickup?->countryyyy?->name ?? '');

                                                    $singlePickupTime = ($pickup->time ? \Carbon\Carbon::parse($pickup->time)->format('d M, Y h:iA') : "-");
                                                @endphp
                                                <span>{{ ($singlePickupAddress ?? '') . ' ' . ($singlePickupTime ?? '') }}</span>                                                                                        
                                        </td>

                                        <td>
                                                @php
                                                    $delivery = $quotation->rows->flatMap->deliveries->first();
                                                    $singleDeliveryAddress = ($delivery->cities ? $delivery->cities->name . ',' : "") .
                                                        ($delivery->cities ? $delivery->cities->state_code : "") .
                                                        ', ' . ($delivery?->countryyyy?->name ?? '');

                                                    $singleDeliveryTime = ($delivery->time ? \Carbon\Carbon::parse($delivery->time)->format('d M, Y h:iA') : "-");
                                                @endphp
                                                <span>{{ ($singleDeliveryAddress ?? '') . ' ' . ($singleDeliveryTime ?? '') }}</span>
                                            
                                        </td>
                                        <td>{{ $quotation->final_price ? $quotation->final_price : 'N/A' }}</td>

                                        <td>
                                            @if ($quotation->load_status == 'pending')
                                                <span class="badge bg-warning p-2 text-white text-uppercase"
                                                    data-bs-toggle="modal" data-bs-target="#CloseConfirmModal"
                                                    data-id="{{ $quotation->id }}">{{ $quotation->load_status ?? 'Pending' }}</span>
                                            @elseif($quotation->load_status == 'published')
                                                <span
                                                    class="badge bg-success p-2 text-white text-uppercase">{{ $quotation->load_status ?? '' }}</span>
                                            @endif
                                        </td>
                                        
                                    </tr>                                        
                                    @endif
                                    @empty
                                    <tr><td colspan="7">No Avaialble Quotations</td></tr>
                                    @endforelse                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <!-- Recent Load Orders Table -->
        <div class="row mb-4">
            <div class="col-md-12">
                <h5 class="fw-bold mb-3" style="color: black;">Recent Orders</h5>
                <div class="card shadow-sm" style="border-radius: 10px; overflow: hidden;">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table mb-0">
                                <thead style="background-color: #05BCF6; color: white;">
                                    <tr>
                                        <th>Order ID</th>
                                        <th>Customer</th>
                                        <th>Pickup Location</th>
                                        <th>Drop Location</th>
                                        <th>Price</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($loadOrders as $loadOrder)
                                    @if ($loop->iteration < 6)
                                    <tr>
                                        <td>
                                            {{ $loadOrder->order_id ?: $loadOrder->id }}
                                        </td>
                                        <td>{{ $loadOrder->customer->lead_name ?? 'N/A' }}</td>
                                        
                                        <td>
                                            @if ($loadOrder->rows->flatMap->pickups->isNotEmpty() && $loadOrder->rows->flatMap->pickups->count() == 1)
                                                @php
                                                    $pickup = $loadOrder->rows->flatMap->pickups->first();


                                                    $singlePickupAddress = ($pickup->city ? $pickup->city->name . ',' : "") . ($pickup->city ? $pickup->city->state_code : "") . ', ' . $pickup?->country?->name;

                                                    $singlePickupTime = ($pickup->time ? \Carbon\Carbon::parse($pickup->time)->format('d M, Y h:iA') : "-") ;
                                                @endphp
                                            @endif
                                            <span>
                                                {{ ($singlePickupAddress ?? ' ') . ' ' . ($singlePickupTime ?? '') }}
                                            </span>
                                        </td> 

                                        <td>
                                            @if ($loadOrder->rows->flatMap->deliveries->isNotEmpty() && $loadOrder->rows->flatMap->deliveries->count() == 1)
                                                @php
                                                    $delivery = $loadOrder->rows->flatMap->deliveries->first();

                                                    $singleDeliveryAddress = ($delivery->city ? $delivery->city->name . ',' : "") . ($delivery->city ? $delivery->city?->state_code : "") . ', ' . ($delivery->country ? $delivery?->country?->name : "");
                                                    $singleDeliveryTime = ($delivery->time ? \Carbon\Carbon::parse($delivery->time)->format('d M, Y h:iA') : "-") ;
                                                @endphp
                                            @endif
                                            <span>
                                                {{ ($singleDeliveryAddress ?? ' ')  . ' ' .($singleDeliveryTime ?? '')  }}
                                            </span>
                                        </td> 
                                        <td>
                                            {{ $loadOrder->final_price }}
                                        </td>
                                        <td> 
                                            @if ($loadOrder->order_status == 'pending')
                                                <span class="badge bg-danger text-light text-capitalize">{{ $loadOrder->order_status }}</span>                                                                                
                                            @endif
                                            @if ($loadOrder->order_status == 'dispatched')
                                                <span class="badge bg-warning text-dark text-capitalize">{{ $loadOrder->order_status }}</span>                                                                                
                                            @endif
                                            @if ($loadOrder->order_status == 'cancelled')
                                                <span class="badge bg-danger text-light text-capitalize">{{ $loadOrder->order_status }}</span>                                                                                
                                            @endif
                                            @if ($loadOrder->order_status == 'delivered')
                                                <span class="badge bg-success text-light text-capitalize">{{ $loadOrder->order_status }}</span>                                                                                
                                            @endif
                                            @if ($loadOrder->order_status == 'claim')
                                                <span class="badge bg-secondary text-light text-capitalize">In-claim/Dispute</span>                                                                                
                                            @endif
                                            @if ($loadOrder->order_status == \App\OrderStatus::INVOICE->value)
                                                <span class="badge bg-danger text-light text-capitalize">Invoice Not Sent</span>
                                            @endif
                                            @if ($loadOrder->order_status == \App\OrderStatus::PARTIALLY_PAID->value)
                                                <span class="badge bg-secondary text-light text-capitalize">Partially Paid</span>
                                            @endif

                                            @if ($loadOrder->order_status == \App\OrderStatus::INVOICED->value)
                                                <span class="badge bg-success text-light text-capitalize">Invoice Sent</span>
                                            @endif
                                            @if ($loadOrder->order_status == \App\OrderStatus::PAID->value)
                                                <span class="badge bg-success text-light text-capitalize">Paid</span>                                                                            
                                            @endif
                                        </td>
                                    </tr>                                        
                                    @endif
                                    @empty
                                        <tr><td colspan="6">No Recent Orders</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>




        <!--<div class="py-6 px-6 text-center">-->
        <!--  <p class="mb-0 fs-4">Design and Developed by <a href="https://adminmart.com/" target="_blank" class="pe-1 text-primary text-decoration-underline">AdminMart.com</a> Distributed by <a href="https://themewagon.com">ThemeWagon</a></p>-->
        <!--</div>-->
    </div>
</div>

@include('includes.footer')
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script>
    const ctx = document.getElementById('performanceChart').getContext('2d');

    const data = {
        labels: ['Quotations', 'Orders', 'Paid Orders'],
        datasets: [{
            data: [{{ $quotations->count() ?? 0 }}, {{ $loadOrders->count() ?? 0 }}, {{ $paidOrderCount ?? 0 }}],
            backgroundColor: ['#0B0B45', '#1EC8FF', '#007BFF'],
            borderWidth: 0
        }]
    };

    const config = {
        type: 'doughnut',
        data: data,
        options: {
            cutout: '70%',
            plugins: {
                legend: { display: false },
                datalabels: {
                    color: '#fff',
                    formatter: (value) => `${value}%`,
                    font: {
                        weight: 'bold',
                        size: 14
                    }
                }
            }
        },
        plugins: [ChartDataLabels]
    };

    new Chart(ctx, config);
</script>


<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../assets/js/sidebarmenu.js"></script>
<script src="../assets/js/app.min.js"></script>
<script src="../assets/libs/apexcharts/dist/apexcharts.min.js"></script>
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
<script src="../assets/js/dashboard.js"></script>
</body>

</html>