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

    .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>

        @if(auth()->user()->usertype == 'admin')
        <div class="row g-3 mb-3">

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

            <!-- Card 2 -->
            <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-shopping-cart"></i>
                    </div>
                    <div class="label-text">
                        <small>Total Order</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-2-4 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-2-4 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="bi bi-person-square"></i>
                    </div>
                    <div class="label-text">
                        <small>Total Customer</small>
                    </div>
                    <div class="value-text">
                        <h5 class="mb-0">{{ $totalCustomerCount ?? 0 }}</h5>
                    </div>
                </div>
            </div>

        </div>

        <!-- Headings above the row -->
        <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
                                    Paid Orders</p>
                                <p class="mb-3"><span class="badge " style="background-color:#1EC8FF;">&nbsp;</span>
                                    In Transit Orders</p>
                                <p class="mb-0"><span class="badge" style="background-color:#007BFF;">&nbsp;</span>
                                    Total 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 Bids</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>Bid ID</th>
                                        <th>Request ID</th>
                                        <th>Bid Amount</th>
                                        <th>Pickup Date</th>
                                        <th>Delivery Date</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($bids as $bid)
                                    @if ($loop->iteration < 6)
                                    <tr>
                                        <td>
                                            #{{ $bid->id ?? 'N/A' }}
                                        </td>
                                         <td>#{{ $bid->quotation_id ?? 'N/A' }}</td>
                                        <td>{{ $bid->bid_amount }}</td>
                                       <td>{{ $bid->pickup_date ? \Carbon\Carbon::parse($bid->pickup_date)->format('M d, Y') : 'N/A' }}</td>
                                        <td>{{ $bid->delivery_date ? \Carbon\Carbon::parse($bid->delivery_date)->format('M d, Y') : 'N/A' }}</td>
                                        <td>
                                            <button class="btn btn-sm text-uppercase text-white
                                                {{ $bid->status == 'pending' ? 'btn-warning' : ($bid->status == 'active' ? 'btn-success' : 'btn-danger') }}">
                                                {{ ucfirst($bid->status == 'active' ? 'approved' : $bid->status) ?? 'N/A' }}
                                            </button>
                                        </td>
                                    </tr>                                        
                                    @endif
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center">No bids found.</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>
        @else
        <div class="fw-bold card fs-5 text-center p-10" style="color: #05BCF6; padding:25px;">
            Welcome {{ auth()->user()?->name ?? '' }}
        </div>
        @endif
        


        <!--<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: ['Paid Orders', 'In Transit Orders', 'Total Orders'],
        datasets: [{
            data: [{{ $paidOrderCount ?? 0 }}, {{ $shippedOrderCount ?? 0 }}, {{ count($loadOrders ?? []) }}],
            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>