@extends('admin.layouts.home.main')
@section('title')
    HomePage
@endsection
@section('main')
    <!-- ! Content -->
    <div class="container-fluid homePage content mt-2">
        <div class="row px-1 px-sm-5 px-lg-1 g-3">
            <!-- ! Left Side -->
            <div class="col-12 col-md-7 col-lg-8 left-side">
                <div class="row g-3 mb-3">
                    <!-- ! Recent Order -->
                    <div class="col-12 col-lg-6">
                        <div class="recent-order mb-2 pb-4 rounded-4">
                            <!-- ! Header -->
                            <div class="recent-order-header mb-3 For-Headers">
                                <h3 class="m-0">Recent Orders</h3>
                                <select class="rounded-2" id="month" name="month">
                                    <option value="January">January</option>
                                    <option value="February">February</option>
                                    <option value="March">March</option>
                                    <option value="April">April</option>
                                    <option value="May">May</option>
                                    <option value="June">June</option>
                                    <option value="July">July</option>
                                    <option value="August">August</option>
                                    <option value="September">September</option>
                                    <option value="October">October</option>
                                    <option value="November">November</option>
                                    <option value="December">December</option>
                                </select>
                            </div>
                            <!-- ! Body -->
                            <div class="recent-order-body h-100 d-flex justify-content-between gap-2 px-3">
                                <div class="details">
                                    <div class="data">
                                        <div class="d-flex mb-2">
                                            <img src="{{ asset('images/FileDoneOutlined.svg') }}" alt="" />
                                            <div class="ms-2">
                                                <p class="m-0">Active Order</p>
                                                <span>720</span>
                                            </div>
                                        </div>
                                        <div class="d-flex mb-2">
                                            <img src="{{ asset('images/FileDoneOutlined.svg') }}" alt="" />
                                            <div class="ms-2">
                                                <p class="m-0">Active Order</p>
                                                <span>720</span>
                                            </div>
                                        </div>
                                        <div class="d-flex mb-2">
                                            <img src="{{ asset('images/FileDoneOutlined.svg') }}" alt="" />
                                            <div class="ms-2">
                                                <p class="m-0">Active Order</p>
                                                <span>720</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="percent">
                                        <p class="mb-2">In comparison to last month</p>
                                        <span><img src="{{ asset('images/ArrowUpOutlined.svg') }}"
                                                alt="" />40%</span>
                                    </div>
                                </div>
                                <div class="chart-position w-100">
                                    <canvas id="my-chart1" style="width: 100%; height: 100%"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ! Loading Tracks -->
                    <div class="col-12 col-lg-6">
                        <div class="loading-tracks rounded-4 mb-2">
                            <!-- ! Header -->
                            <div class="loading-tracks-header mb-3 For-Headers">
                                <h3 class="m-0">Loading Tracks</h3>
                                <a href="#" class="text-decoration-none fw-medium" role="button">View All</a>
                            </div>
                            <!-- ! Body -->
                            <div class="loading-tracks-body p-2">
                                <div class="container-total-details d-flex mb-3">
                                    <div class="total-tracks me-5 ps-2">
                                        <div class="the-total">150 <span class="d-block">Total Trucks</span></div>
                                        <canvas id="my-chart"></canvas>
                                    </div>
                                    <div class="details gap-2 d-flex justify-content-between flex-wrap">
                                        <div class="Active">
                                            <p>Active</p>
                                            <span>40</span>
                                        </div>
                                        <div class="canceled">
                                            <p>Canceled</p>
                                            <span>3</span>
                                        </div>
                                        <div class="unloading-delayed">
                                            <p>Unloading Delayed</p>
                                            <span>12</span>
                                        </div>
                                        <div class="loading-delayed">
                                            <p>Loading Delayed</p>
                                            <span>23</span>
                                        </div>
                                        <div class="readyToUnLoad">
                                            <p>Ready To Un Load</p>
                                            <span>3</span>
                                        </div>
                                        <div class="readyToLoad">
                                            <p>Ready To Load</p>
                                            <span>12</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <!-- ! Latest Shaping -->
                        <div class="latest-shipping rounded-4 py-2">
                            <!-- ! header -->
                            <div class="latest-shipping-header For-Headers">
                                <h3>Latest Shipping</h3>
                                <a href="#" class="text-decoration-none fw-medium" role="button">View All</a>
                            </div>
                            <!-- ! body -->
                            <div class="latest-shipping-body mb-2">
                                <!-- ! column name -->
                                <div
                                    class="column-name d-flex justify-content-between align-items-center p-2 d-none d-lg-flex mx-3">
                                    <p class="fw-bold m-0">ORDER ID</p>
                                    <p class="fw-bold m-0 text-center">STATUS</p>
                                    <p class="fw-bold m-0 text-center">CUSTOMER</p>
                                    <p class="fw-bold m-0 text-center">DEPARTURE</p>
                                    <p class="fw-bold m-0 text-center">WEIGHT</p>
                                    <p class="fw-bold m-0 text-center">ARRIVAL</p>
                                    <p class="fw-bold m-0 text-end">ARRIVAL DATE</p>
                                </div>
                                <!-- ! column value -->
                                <div class="column-value">
                                    <div
                                        class="the-row p-2 d-flex justify-content-between align-items-center flex-wrap flex-lg-nowrap overflow-y-hidden pt-0 pt-lg-2 mx-3">
                                        <p class="m-0 order-id d-flex justify-content-between">
                                            <span><span class="ORDERID d-lg-none me-1">ORDER ID</span>ORDERED01</span><span
                                                class="d-inline-block d-lg-none toHide"><img
                                                    src="{{ asset('images/arrow-up-simple.svg') }}" alt="" /></span>
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Status</span><span
                                                class="delivered-status">Delivered</span>
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Customer</span>Lorem ipsum
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Departure</span>lorem
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Weight</span>250kg
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Arrival</span>lorem
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Arrival Date</span>17 july 2024
                                        </p>
                                    </div>
                                    <div
                                        class="the-row p-2 d-flex justify-content-between align-items-center flex-wrap flex-lg-nowrap overflow-y-hidden pt-0 pt-lg-2 mx-3">
                                        <p class="m-0 order-id d-flex justify-content-between">
                                            <span><span class="ORDERID d-lg-none me-1">ORDER ID</span>ORDERED01</span><span
                                                class="d-inline-block d-lg-none toHide"><img
                                                    src="{{ asset('images/arrow-up-simple.svg') }}"
                                                    alt="" /></span>
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Status</span><span
                                                class="canceled-status">Canceled</span>
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Customer</span>Lorem ipsum
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Departure</span>lorem
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Weight</span>250kg
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Arrival</span>lorem
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Arrival Date</span>17 july 2024
                                        </p>
                                    </div>
                                    <div
                                        class="the-row p-2 d-flex justify-content-between align-items-center flex-wrap flex-lg-nowrap overflow-y-hidden pt-0 pt-lg-2 mx-3">
                                        <p class="m-0 order-id d-flex justify-content-between">
                                            <span><span class="ORDERID d-lg-none me-1">ORDER ID</span>ORDERED01</span><span
                                                class="d-inline-block d-lg-none toHide"><img
                                                    src="{{ asset('images/arrow-up-simple.svg') }}"
                                                    alt="" /></span>
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Status</span><span
                                                class="active-status">Active</span>
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Customer</span>Lorem ipsum
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Departure</span>lorem
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Weight</span>250kg
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Arrival</span>lorem
                                        </p>
                                        <p class="mt-1 m-lg-0 text-start text-lg-center">
                                            <span class="d-inline-block d-lg-none me-2">Arrival Date</span>17 july 2024
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3 g-3">
                    <div class="col-12 col-xl-7">
                        <!-- ! Unloading Cargo -->
                        <div class="unloading-cargo mb-2 rounded-4">
                            <!-- ! header -->
                            <div class="unloading-cargo-header For-Headers">
                                <h4 class="mb-0">Unloading Cargo</h4>
                                <a href="#" class="text-decoration-none fw-medium" role="button">View All</a>
                            </div>
                            <!-- ! body -->
                            <div class="unloading-cargo-body p-2">
                                <table class="h-auto">
                                    <tr>
                                        <td>SHIPID03</td>
                                        <td>
                                            lorem <img class="icons-circle" src="{{ asset('images/Group 20.svg') }}"
                                                alt="" />
                                            lorem
                                        </td>
                                        <td><span class="Delivered-table">Delivered</span></td>
                                        <td>17 july 2024</td>
                                        <td>
                                            <img src="{{ asset('images/DownloadOutlined.svg') }}" alt="" /><img
                                                src="{{ asset('images/PrinterOutlined.svg') }}" alt="" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>SHIPID03</td>
                                        <td>
                                            lorem <img class="icons-circle"
                                                src="{{ asset('images/Group 20.svg') }}"alt="" />lorem
                                        </td>
                                        <td><span class="Delivered-table">Delivered</span></td>
                                        <td>17 july 2024</td>
                                        <td>
                                            <img src="{{ asset('images/DownloadOutlined.svg') }}" alt="" /><img
                                                src="{{ asset('images/PrinterOutlined.svg') }}" alt="" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>SHIPID03</td>
                                        <td>
                                            lorem <img class="icons-circle" src="{{ asset('images/cancel-group.svg') }}"
                                                alt="" />lorem
                                        </td>
                                        <td><span class="canceled-table">Canceled</span></td>
                                        <td>17 july 2024</td>
                                        <td>
                                            <img src="{{ asset('images/DownloadOutlined.svg') }}" alt="" /><img
                                                src="{{ asset('images/PrinterOutlined.svg') }}" alt="" />
                                        </td>
                                    </tr>
                                    <tr></tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-xl-5">
                        <!-- ! Available Cargo-->
                        <div class="available-cargo rounded-4">
                            <!-- ! header -->
                            <div class="available-cargo-header For-Headers">
                                <h4 class="mb-0">Available Cargo</h4>
                                <a href="#" class="text-decoration-none fw-medium" role="button">View All</a>
                            </div>
                            <!-- ! body -->
                            <div class="available-cargo-body">
                                <table class="h-auto">
                                    <tr>
                                        <td>SHIPID03</td>
                                        <td>
                                            <p><span></span></p>
                                            <span>40%</span>
                                        </td>
                                        <td>
                                            lorem <img class="icons-circle" src="{{ asset('images/Vector 4.svg') }}"
                                                alt="" />
                                            lorem
                                        </td>
                                        <td><img src="{{ asset('images/ExportOutlined.svg') }}" alt="" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>SHIPID03</td>
                                        <td>
                                            <p><span></span></p>
                                            <span>40%</span>
                                        </td>
                                        <td>
                                            lorem <img class="icons-circle" src="{{ asset('images/Vector 4.svg') }}"
                                                alt="" />
                                            lorem
                                        </td>
                                        <td><img src="{{ asset('images/ExportOutlined.svg') }}" alt="" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>SHIPID03</td>
                                        <td>
                                            <p><span></span></p>
                                            <span>40%</span>
                                        </td>
                                        <td>
                                            lorem <img src="{{ asset('images/Vector 4.svg') }}" alt="" />
                                            lorem
                                        </td>
                                        <td><img src="{{ asset('images/ExportOutlined.svg') }}" alt="" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <!-- ! Totals -->
                    <div class="container-totals d-flex">
                        <div class="row">
                            <div class="col-12 col-md-6 col-sm-6 col-lg-4">
                                <div class="totals m-2">
                                    <div class="d-flex justify-content-between mb-5 align-items-center">
                                        <p class="m-0 total-title">Total Revenue</p>
                                        <span>
                                            <img class="custom-hover-show"
                                                src="{{ asset('images/arrow-up-right-w.svg') }}"alt="" />
                                            <img class="custom-hover-hidden"
                                                src="{{ asset('images/arrow-up-right.svg') }}"alt="" />
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-start justify-content-between flex-column flex-lg-row">
                                        <div class="price d-block d-lg-inline-block">$81.000</div>
                                        <div class="d-block d-lg-inline-block text-end">
                                            <span class="d-inline-block d-lg-block good-percent"><img
                                                    src="{{ asset('images/akar-icons_statistic-up.svg') }}"
                                                    alt="" />3.6%</span>
                                            <p class="d-inline-block d-lg-block m-0 text-last">
                                                From last week
                                            </p>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-sm-6 col-lg-4">
                                <div class="totals m-2">
                                    <div class="d-flex justify-content-between mb-5 align-items-center">
                                        <p class="m-0 total-title">Total Customer</p>
                                        <span>
                                            <img class="custom-hover-show"
                                                src="{{ asset('images/arrow-up-right-w.svg') }}"alt="" />
                                            <img class="custom-hover-hidden"
                                                src="{{ asset('images/arrow-up-right.svg') }}"alt="" />
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-start justify-content-between flex-column flex-lg-row">
                                        <div class="price d-block d-lg-inline-block">$81.000</div>
                                        <div class="d-block d-lg-inline-block text-end">
                                            <span class="d-inline-block d-lg-block good-percent"><img
                                                    src="{{ asset('images/akar-icons_statistic-up.svg') }}"
                                                    alt="" />3.6%</span>
                                            <p class="d-inline-block d-lg-block m-0 text-last">
                                                From last week
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-sm-6 col-lg-4">
                                <div class="totals m-2">
                                    <div class="d-flex justify-content-between mb-5 align-items-center">
                                        <p class="m-0 total-title">Total Customer</p>
                                        <span>
                                            <img class="custom-hover-show"
                                                src="{{ asset('images/arrow-up-right-w.svg') }}"alt="" />
                                            <img class="custom-hover-hidden"
                                                src="{{ asset('images/arrow-up-right.svg') }}"alt="" />
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-start justify-content-between flex-column flex-lg-row">
                                        <div class="price d-block d-lg-inline-block">$81.000</div>
                                        <div class="d-block d-lg-inline-block text-end">
                                            <span class="d-inline-block d-lg-block good-percent"><img
                                                    src="{{ asset('images/akar-icons_statistic-up.svg') }}"
                                                    alt="" />3.6%</span>
                                            <p class="d-inline-block d-lg-block m-0 text-last">
                                                From last week
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-sm-6 col-lg-4">
                                <div class="totals m-2">
                                    <div class="d-flex justify-content-between mb-5 align-items-center">
                                        <p class="m-0 total-title">Total Transactions</p>
                                        <span>
                                            <img class="custom-hover-show"
                                                src="{{ asset('images/arrow-up-right-w.svg') }}"alt="" />
                                            <img class="custom-hover-hidden"
                                                src="{{ asset('images/arrow-up-right.svg') }}"alt="" />
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-start justify-content-between flex-column flex-lg-row">
                                        <div class="price d-block d-lg-inline-block">$81.000</div>
                                        <div class="d-block d-lg-inline-block text-end">
                                            <span class="d-inline-block d-lg-block good-percent"><img
                                                    src="{{ asset('images/akar-icons_statistic-up.svg') }}"
                                                    alt="" />3.6%</span>
                                            <p class="d-inline-block d-lg-block m-0 text-last">
                                                From last week
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-sm-6 col-lg-4">
                                <div class="totals m-2">
                                    <div class="d-flex justify-content-between mb-5 align-items-center">
                                        <p class="m-0 total-title">Total Product</p>
                                        <span>
                                            <img class="custom-hover-show"
                                                src="{{ asset('images/arrow-up-right-w.svg') }}"alt="" />
                                            <img class="custom-hover-hidden"
                                                src="{{ asset('images/arrow-up-right.svg') }}"alt="" />
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-start justify-content-between flex-column flex-lg-row">
                                        <div class="price d-block d-lg-inline-block">$81.000</div>
                                        <div class="d-block d-lg-inline-block text-end">
                                            <span class="d-inline-block d-lg-block bad-percent"><img
                                                    src="{{ asset('images/akar-icons_statistic-down.svg') }}"
                                                    alt="" />3.6%</span>
                                            <p class="d-inline-block d-lg-block m-0 text-last">
                                                From last week
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-sm-6 col-lg-4">
                                <div class="totals m-2">
                                    <div class="d-flex justify-content-between mb-5 align-items-center">
                                        <p class="m-0 total-title">Total Transactions</p>
                                        <span>
                                            <img class="custom-hover-show"
                                                src="{{ asset('images/arrow-up-right-w.svg') }}"alt="" />
                                            <img class="custom-hover-hidden"
                                                src="{{ asset('images/arrow-up-right.svg') }}"alt="" />
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-start justify-content-between flex-column flex-lg-row">
                                        <div class="price d-block d-lg-inline-block">$81.000</div>
                                        <div class="d-block d-lg-inline-block text-end">
                                            <span class="d-inline-block d-lg-block good-percent"><img
                                                    src="{{ asset('images/akar-icons_statistic-up.svg') }}"
                                                    alt="" />3.6%</span>
                                            <p class="d-inline-block d-lg-block m-0 text-last">
                                                From last week
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <!-- ! cards -->
                    <div class="col-12 col-lg-6">
                        <div class="card m-2">
                            <h3>Increase your sales</h3>
                            <p>
                                Discover the Proven Methods to Skyrocket Your Sales! Unleash
                                the Potential of Your Business and Achieve Remarkable Growth.
                                Whether you're a seasoned entrepreneur or just starting out
                            </p>
                            <button type="button" class="btn">Learn More</button>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="card m-2">
                            <h3>Increase your sales</h3>
                            <p>
                                Discover the Proven Methods to Skyrocket Your Sales! Unleash
                                the Potential of Your Business and Achieve Remarkable Growth.
                                Whether you're a seasoned entrepreneur or just starting out
                            </p>
                            <button type="button" class="btn">Learn More</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ! Right Side -->
            <div class="col-12 col-md-5 col-lg-4 right-side">
                <!-- ! Order Request -->
                <div class="order-request">
                    <h3>Order Requests</h3>
                    <!-- ! Recent -->
                    <div class="recent-order-req">
                        <div class="recent d-flex justify-content-between">
                            <p>Recent Order Request</p>
                            <p>
                                <img src="{{ asset('images/FileSync.svg') }}" alt="" />
                                <img src="{{ asset('images/History.svg') }}" alt="" />
                            </p>
                        </div>
                        <!-- ! the orders -->
                        <div class="the-order mb-2">
                            <!-- ! header -->
                            <div class="header-order d-flex justify-content-between align-items-center">
                                <p class="fw-bold m-0 d-flex align-items-center">
                                    <img src="{{ asset('images/CodeSandboxOutlined.svg') }}" alt="" />
                                    ORDERED01
                                </p>
                                <span>17 July 2024 18:00</span>
                            </div>
                            <!-- ! body -->
                            <div class="body-order d-flex justify-content-between">
                                <div class="details d-flex gap-2 w-100">
                                    <div class="location-img pt-1">
                                        <img class="w-100" src="{{ asset('images/Group 12.svg') }}" alt="" />
                                    </div>
                                    <div class="data">
                                        <div class="mb-4">
                                            <h6 class="m-0">Pickup Location</h6>
                                            <p class="m-0">Lorem ipsum dolor</p>
                                        </div>
                                        <div>
                                            <h6 class="m-0">Destination</h6>
                                            <p class="m-0">Lorem ipsum dolor</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="map rounded-4 overflow-hidden">
                                    <iframe
                                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d385399.352037335!2d29.34182728216881!3d41.00485194785754!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caa7040068086b%3A0xe1ccfe98bc01b0d0!2z2KXYs9i32YbYqNmI2YTYjCDYqtix2YPZitin!5e0!3m2!1sar!2snl!4v1742653555826!5m2!1sar!2snl"
                                        width="600" height="450" style="border: 0" allowfullscreen=""
                                        loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                </div>
                            </div>
                            <!-- ! footer -->
                            <div class="footer-order d-flex justify-content-between align-items-center">
                                <p class="m-0 fw-bold">
                                    <img src="{{ asset('images/RI.svg') }}" alt="" />
                                    Raj Industries
                                </p>

                                <a href="#" class="text-decoration-none fw-medium" role="button" type="button"
                                    data-bs-toggle="modal" data-bs-target="#exampleModalView1">
                                    View Details
                                </a>

                                <div class="modal fade" id="exampleModalView1" tabindex="-1"
                                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header d-flex justify-content-between">
                                                <h1 class="modal-title fs-5" id="exampleModalLabel">
                                                    Order Request Details
                                                </h1>
                                                <button type="button" class="btn fw-bold" data-bs-dismiss="modal"
                                                    aria-label="Close">
                                                    Back
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="modal-budy-header">
                                                    <h5>Order Details</h5>
                                                    <div
                                                        class="order-details-header d-flex justify-content-between align-items-center">
                                                        <div class="d-flex header-name">
                                                            <div class="me-2 w-50">
                                                                <img class="w-100" src="{{ asset('images/RI.svg') }}"
                                                                    alt="" />
                                                            </div>
                                                            <div>
                                                                <h2>Raj Industries</h2>
                                                                <p class="m-0">
                                                                    Manufacturing . Ludhiana, Punjab
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <div class="header-button">
                                                            <div>
                                                                <button type="button" class="btn accept m-1">
                                                                    Accept
                                                                </button>
                                                                <button type="button" class="btn btn-outline-secondary m-1">
                                                                    Reject
                                                                </button>
                                                            </div>
                                                            <p class="m-0 text-end">17 July 2024, 18:00</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-body-body">
                                                    <div class="order-id">
                                                        <h5>Order ID</h5>
                                                        <p>
                                                            <img src="{{ asset('images/CodeSandboxOutlined-g.svg') }}"
                                                                alt="" />
                                                            ORDERRED01
                                                        </p>
                                                    </div>
                                                    <div class="order-placed">
                                                        <h5>Order PLaced On</h5>
                                                        <p>17 July 2024, 18:00</p>
                                                    </div>
                                                    <div class="description">
                                                        <h5>Description</h5>
                                                        <p>
                                                            Lorem ipsum dolor sit amet consectetur,
                                                            adipisicing elit. Necessitatibus eligendi
                                                            blanditiis cupiditate consequatur quae similique
                                                            architecto repellat error deserunt, cum eos
                                                            obcaecati porro, earum, numquam culpa fugiat
                                                            quidem minus quam?
                                                        </p>
                                                    </div>
                                                    <div class="pickup-address">
                                                        <h5>Pickup Address</h5>
                                                        <p>
                                                            Lorem ipsum, dolor sit amet consectetur
                                                            adipisicing elit. Nisi veritatis quis unde!
                                                        </p>
                                                    </div>
                                                    <div class="delivery-address">
                                                        <h5>Delivery Address</h5>
                                                        <p>
                                                            Lorem ipsum dolor sit amet consectetur
                                                            adipisicing elit. Magni ratione ab quisquam.
                                                        </p>
                                                    </div>
                                                    <div class="order-item-summery">
                                                        <h5>Order Item Summery</h5>
                                                        <p>
                                                            Lorem ipsum dolor sit amet consectetur,
                                                            adipisicing elit. Magni molestiae eligendi
                                                            adipisci cupiditate architecto explicabo veniam
                                                            consectetur officiis reiciendis earum,
                                                            voluptatibus rerum tempora saepe vero tempore
                                                            soluta dignissimos aperiam sequi!
                                                        </p>
                                                    </div>
                                                    <div class="route">
                                                        <h5>Route</h5>
                                                        <p>
                                                            <span>Mumbai</span>
                                                            <img src="{{ asset('images/Vector 4.svg') }}"
                                                                alt="" />
                                                            <span>Delhi</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="modal-body-footer">
                                                    <p>
                                                        <span>Note:</span> Lorem ipsum dolor sit amet
                                                        consectetur adipisicing elit. In itaque inventore
                                                        enim ipsum natus ut. Ad a, laboriosam aut, neque
                                                        ea deleniti fugiat ducimus molestiae voluptates
                                                        corporis doloribus, delectus sunt.
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="the-order mb-2">
                            <!-- ! header -->
                            <div class="header-order d-flex justify-content-between align-items-center">
                                <p class="fw-bold m-0 d-flex align-items-center">
                                    <img src="{{ asset('images/CodeSandboxOutlined.svg') }}" alt="" />
                                    ORDERED01
                                </p>
                                <span>17 July 2024 18:00</span>
                            </div>
                            <!-- ! body -->
                            <div class="body-order d-flex justify-content-between">
                                <div class="details d-flex gap-2 w-100">
                                    <div class="location-img pt-1">
                                        <img class="w-100" src="{{ asset('images/Group 12.svg') }}" alt="" />
                                    </div>
                                    <div class="data">
                                        <div class="mb-4">
                                            <h6 class="m-0">Pickup Location</h6>
                                            <p class="m-0">Lorem ipsum dolor</p>
                                        </div>
                                        <div>
                                            <h6 class="m-0">Destination</h6>
                                            <p class="m-0">Lorem ipsum dolor</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="map rounded-4 overflow-hidden">
                                    <iframe
                                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d385399.352037335!2d29.34182728216881!3d41.00485194785754!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caa7040068086b%3A0xe1ccfe98bc01b0d0!2z2KXYs9i32YbYqNmI2YTYjCDYqtix2YPZitin!5e0!3m2!1sar!2snl!4v1742653555826!5m2!1sar!2snl"
                                        width="600" height="450" style="border: 0" allowfullscreen=""
                                        loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                </div>
                            </div>
                            <!-- ! footer -->
                            <div class="footer-order d-flex justify-content-between align-items-center">
                                <p class="m-0 fw-bold">
                                    <img src="{{ asset('images/RI.svg') }}" alt="" />
                                    Raj Industries
                                </p>

                                <a href="#" class="text-decoration-none fw-medium" role="button" type="button"
                                    data-bs-toggle="modal" data-bs-target="#exampleModalView">
                                    View Details
                                </a>

                                <div class="modal fade" id="exampleModalView" tabindex="-1"
                                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header d-flex justify-content-between">
                                                <h1 class="modal-title fs-5" id="exampleModalLabel">
                                                    Order Request Details
                                                </h1>
                                                <button type="button" class="btn" data-bs-dismiss="modal"
                                                    aria-label="Close">
                                                    Back
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="modal-budy-header">
                                                    <h5>Order Details</h5>
                                                    <div
                                                        class="order-details-header d-flex justify-content-between align-items-center">
                                                        <div class="d-flex header-name">
                                                            <div class="me-2 w-50">
                                                                <img class="w-100" src="{{ asset('images/RI.svg') }}"
                                                                    alt="" />
                                                            </div>
                                                            <div>
                                                                <h2>Raj Industries</h2>
                                                                <p class="m-0">
                                                                    Manufacturing . Ludhiana, Punjab
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <div class="header-button">
                                                            <div>
                                                                <button type="button" class="btn btn-primary m-1">
                                                                    Primary
                                                                </button>
                                                                <button type="button" class="btn btn-outline-secondary m-1">
                                                                    Reject
                                                                </button>
                                                            </div>
                                                            <p class="m-0 text-end">17 July 2024, 18:00</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-body-body">
                                                    <div class="order-id">
                                                        <h5>Order ID</h5>
                                                        <p>
                                                            <img src="{{ asset('images/CodeSandbox.svg') }}"
                                                                alt="" />
                                                            ORDERRED01
                                                        </p>
                                                    </div>
                                                    <div class="order-placed">
                                                        <h5>Order PLaced On</h5>
                                                        <p>17 July 2024, 18:00</p>
                                                    </div>
                                                    <div class="description">
                                                        <h5>Description</h5>
                                                        <p>
                                                            Lorem ipsum dolor sit amet consectetur,
                                                            adipisicing elit. Necessitatibus eligendi
                                                            blanditiis cupiditate consequatur quae similique
                                                            architecto repellat error deserunt, cum eos
                                                            obcaecati porro, earum, numquam culpa fugiat
                                                            quidem minus quam?
                                                        </p>
                                                    </div>
                                                    <div class="pickup-address">
                                                        <h5>Pickup Address</h5>
                                                        <p>
                                                            Lorem ipsum, dolor sit amet consectetur
                                                            adipisicing elit. Nisi veritatis quis unde!
                                                        </p>
                                                    </div>
                                                    <div class="delivery-address">
                                                        <h5>Delivery Address</h5>
                                                        <p>
                                                            Lorem ipsum dolor sit amet consectetur
                                                            adipisicing elit. Magni ratione ab quisquam.
                                                        </p>
                                                    </div>
                                                    <div class="order-item-summery">
                                                        <h5>Order Item Summery</h5>
                                                        <p>
                                                            Lorem ipsum dolor sit amet consectetur,
                                                            adipisicing elit. Magni molestiae eligendi
                                                            adipisci cupiditate architecto explicabo veniam
                                                            consectetur officiis reiciendis earum,
                                                            voluptatibus rerum tempora saepe vero tempore
                                                            soluta dignissimos aperiam sequi!
                                                        </p>
                                                    </div>
                                                    <div class="route">
                                                        <h5>Route</h5>
                                                        <p>
                                                            <span>Mumbai</span>
                                                            <img src="{{ asset('images/Vector 4.svg') }}"
                                                                alt="" />
                                                            <span>Delhi</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="modal-body-footer">
                                                    <p>
                                                        <span>Note:</span> Lorem ipsum dolor sit amet
                                                        consectetur adipisicing elit. In itaque inventore
                                                        enim ipsum natus ut. Ad a, laboriosam aut, neque
                                                        ea deleniti fugiat ducimus molestiae voluptates
                                                        corporis doloribus, delectus sunt.
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ! Customer Growth -->
                <div class="Customer-Growth mt-2">
                    <!-- ! header -->
                    <div class="Customer-Growth-header mb-2 d-flex For-Headers border-0 p-0">
                        <h5>Customer Growth 3 Province</h5>
                        <span>View All</span>
                    </div>
                    <!-- ! body -->
                    <div class="Customer-Growth-body">
                        <div>
                            <p class="east-java d-inline-block">
                                East Java<span>(50%)</span>
                            </p>
                            <p class="kalimantan d-inline-block">
                                Kalimantan<span>(50%)</span>
                            </p>
                            <p class="bail d-inline-block">Bail<span>(50%)</span></p>
                        </div>
                        <div class="rounded-3 overflow-hidden">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d385399.352037335!2d29.34182728216881!3d41.00485194785754!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caa7040068086b%3A0xe1ccfe98bc01b0d0!2z2KXYs9i32YbYqNmI2YTYjCDYqtix2YPZitin!5e0!3m2!1sar!2snl!4v1742653555826!5m2!1sar!2snl"
                                width="600" height="450" style="border: 0" allowfullscreen="" loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ! notification page -->
    <div class="container-fluid the-notification-page mt-2">
        <div class="notification-page">
            <!-- ! header -->
            <div class="notification-header For-Headers">
                <h4>Notification <span>(3 unread)</span></h4>
                <button type="button" class="btn btn-outline-secondary">
                    Mark All As Read
                </button>
            </div>
            <!-- ! body -->
            <div class="notification-body">
                <div class="date-notification">
                    <div class="date d-flex justify-content-between">
                        <p>Today</p>
                        <div>
                            <input type="checkbox" />
                            <label for="">Select All</label>
                        </div>
                    </div>
                    <div class="the-notifications">
                        <div class="the-notification mb-2 d-flex justify-content-between">
                            <div class="notification-of-user position-relative d-flex">
                                <div class="me-2">
                                    <img class="w-100" src="{{ asset('') }}images/user.png" alt="" />
                                </div>
                                <div>
                                    <p class="m-0">
                                        Your payment invoice request has been approved by admin
                                    </p>
                                    <span class="time">3 min</span>
                                </div>
                            </div>
                            <div class="options d-flex justify-content-center align-content-center position-relative">
                                <img class="w-100" src="{{ asset('images/Options.svg') }} " alt="" />
                                <div class="the-options">
                                    <p>Mark as read</p>
                                    <p>Sellect</p>
                                    <p>Delete</p>
                                </div>
                            </div>
                        </div>
                        <div class="the-notification mb-2 d-flex justify-content-between">
                            <div class="notification-of-user position-relative d-flex">
                                <div class="me-2">
                                    <img class="w-100" src="{{ asset('') }}images/user.png" alt="" />
                                </div>
                                <div>
                                    <p class="m-0">
                                        Your payment invoice request has been approved by admin
                                    </p>
                                    <span class="time">3 min</span>
                                </div>
                            </div>
                            <div class="options d-flex justify-content-center align-content-center position-relative">
                                <img class="w-100" src="{{ asset('images/Options.svg') }} " alt="" />
                                <div class="the-options">
                                    <p>Mark as read</p>
                                    <p>Sellect</p>
                                    <p>Delete</p>
                                </div>
                            </div>
                        </div>
                        <div class="the-notification mb-2 d-flex justify-content-between">
                            <div class="notification-of-user position-relative d-flex">
                                <div class="me-2">
                                    <img class="w-100" src="{{ asset('images/user.png') }}" alt="" />
                                </div>
                                <div>
                                    <p class="m-0">
                                        Your payment invoice request has been approved by admin
                                    </p>
                                    <span class="time">3 min</span>
                                </div>
                            </div>
                            <div class="options d-flex justify-content-center align-content-center position-relative">
                                <img class="w-100" src="{{ asset('images/Options.svg') }} " alt="" />
                                <div class="the-options">
                                    <p>Mark as read</p>
                                    <p>Sellect</p>
                                    <p>Delete</p>
                                </div>
                            </div>
                        </div>
                        <div class="the-notification read mb-2 d-flex justify-content-between">
                            <div class="notification-of-user position-relative d-flex">
                                <div class="me-2">
                                    <img class="w-100" src="{{ asset('images/user.png') }}" alt="" />
                                </div>
                                <div>
                                    <p class="m-0">
                                        Your payment invoice request has been approved by admin
                                    </p>
                                    <span class="time">3 min</span>
                                </div>
                            </div>
                            <div class="options d-flex justify-content-center align-content-center position-relative">
                                <img class="w-100" src="{{ asset('images/Options.svg') }} " alt="" />
                                <div class="the-options">
                                    <p>Mark as read</p>
                                    <p>Sellect</p>
                                    <p>Delete</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="date-notification">
                    <div class="date d-flex justify-content-between">
                        <p>Yasterday 18th November, 2022</p>
                        <div>
                            <input type="checkbox" />
                            <label for="">Select All</label>
                        </div>
                    </div>
                    <div class="the-notifications">
                        <div class="the-notification read mb-2 d-flex justify-content-between">
                            <div class="notification-of-user position-relative d-flex">
                                <div class="me-2">
                                    <img class="w-100" src="{{ asset('images/user.png') }}" alt="" />
                                </div>
                                <div>
                                    <p class="m-0">
                                        Your payment invoice request has been approved by admin
                                    </p>
                                    <span class="time">3 min</span>
                                </div>
                            </div>
                            <div class="options d-flex justify-content-center align-content-center position-relative">
                                <img class="w-100" src="{{ asset('images/Options.svg') }} " alt="" />
                                <div class="the-options">
                                    <p>Mark as read</p>
                                    <p>Sellect</p>
                                    <p>Delete</p>
                                </div>
                            </div>
                        </div>
                        <div class="the-notification read mb-2 d-flex justify-content-between">
                            <div class="notification-of-user position-relative d-flex">
                                <div class="me-2">
                                    <img class="w-100" src="{{ asset('images/user.png') }}" alt="" />
                                </div>
                                <div>
                                    <p class="m-0">
                                        Your payment invoice request has been approved by admin
                                    </p>
                                    <span class="time">3 min</span>
                                </div>
                            </div>
                            <div class="options d-flex justify-content-center align-content-center position-relative">
                                <img class="w-100" src="{{ asset('images/Options.svg') }} " alt="" />
                                <div class="the-options">
                                    <p>Mark as read</p>
                                    <p>Sellect</p>
                                    <p>Delete</p>
                                </div>
                            </div>
                        </div>
                        <div class="the-notification read mb-2 d-flex justify-content-between">
                            <div class="notification-of-user position-relative d-flex">
                                <div class="me-2">
                                    <img class="w-100" src="{{ asset('images/user.png') }}" alt="" />
                                </div>
                                <div>
                                    <p class="m-0">
                                        Your payment invoice request has been approved by admin
                                    </p>
                                    <span class="time">3 min</span>
                                </div>
                            </div>
                            <div class="options d-flex justify-content-center align-content-center position-relative">
                                <img class="w-100" src="{{ asset('images/Options.svg') }} " alt="" />
                                <div class="the-options">
                                    <p>Mark as read</p>
                                    <p>Sellect</p>
                                    <p>Delete</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    </script>
    @push('scripts')
        <script>
            let trackCounts = [
                @foreach ($loadingTrucks as $truck)
                    {{ $truck->count }},
                @endforeach
            ];

            let trackLabels = [
                @foreach ($loadingTrucks as $truck)
                    "{{ $truck->status }}",
                @endforeach
            ];

            // إذا كنت تحتاج لتحديد ألوان محددة لكل حالة، يمكنك ضبط مصفوفة الألوان وفقاً لترتيب trackLabels:
            let backgroundColors = [
                "rgb(255, 31, 31)",
                "rgb(146, 104, 16)",
                "rgb(239, 170, 23)",
                "rgb(255, 190, 54)",
                "rgb(225, 180, 34)",
                "rgb(255, 202, 89)",
            ];

            // إعداد بيانات المخطط
            let data = {
                datasets: [{
                    data: trackCounts,
                    label: "value",
                    backgroundColor: backgroundColors,
                }],
                // labels: trackLabels
            };

            // الحصول على عنصر canvas ورسم المخطط
            let ctx = document.getElementById("my-chart").getContext("2d");
            let myChart = new Chart(ctx, {
                type: "doughnut",
                data: data,
                options: {
                    responsive: true,
                    cutout: "70%",
                },
            });
            // رسم المخطط الشريطي
            let canvas = document.getElementById("my-chart1");
            let ctx1 = canvas.getContext("2d");

            let gradient = ctx1.createLinearGradient(0, 0, canvas.height, canvas.width);
            gradient.addColorStop(0.21, "#FFBE36");
            gradient.addColorStop(0.92, "rgba(255, 233, 185, 0)");

            new Chart(ctx1, {
                type: "line",
                data: {
                    labels: ["01", "05", "10","18","40","98","91","53","170" ,"15", "20", "25", "30"],
                    datasets: [{
                        data: [10, 40, 90, 80, 60, 70, 208, 110, 150, 130 , 98 , 170, 180, 190],
                        fill: true,
                        backgroundColor: gradient,
                        borderColor: "#FFBE36",
                        borderWidth: 1.5,
                        tension: 0.1,
                        pointRadius: 0
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        tooltip: {
                            enabled: true,
                            callbacks: {
                                label: function(context) {
                                    // نعرض قيمة X و Y
                                    return 'X: ' + context.label + ' | Y: ' + context.parsed.y;
                                },
                                title: function() {
                                    return ''; // نخفي العنوان
                                }
                            }
                        },
                        legend: {
                            display: false
                        },
                    },
                    scales: {
                        x: {
                            grid: {
                                color: "#eee"
                            },
                            ticks: {
                                color: "#bbb",
                                font: {
                                    size: 10
                                },
                                autoSkip: true,
                                maxTicksLimit: 4 // بيقلل عدد القيم المعروضة بمحور X
                            }
                        },
                        y: {
                            grid: {
                                color: "#eee"
                            },
                            ticks: {
                                color: "#bbb",
                                font: {
                                    size: 10
                                }
                            },
                            beginAtZero: true,
                            suggestedMax: 250
                        }
                    }
                }
            });
        </script>
    @endpush
@endsection