@extends('layouts.app')

@section('content')
<div class="dashboard-content">
    <div class="main-dashboard-layout">
        <div class="main-card">
            <div class="main-heading">
                <h4>Dashboard</h4>
                
            </div>
            
        </div>
        <div class="view-cards-layout d-flex justify-content-between w-100">
            <div class="order-card">
                <div class="order-content">
                    <div class="img-div">

                        <img src="{{ asset('admin-assets/images/order-history 2.svg') }}" alt="order" class="order-img">
                    </div>
                    <div class="card-titles d-flex align-items-baseline ">
                        <h5>Orders</h5><span>+8.4</span>
                    </div>
                    <div class="subtitle">
                        <h4>8</h4>
                    </div>
                    <div class="order-numbers">
                    <p class="fw-light">Last Month <span>(2)</span></p>
                    </div>

                </div>
            </div>
            <div class="order-card">
                <div class="order-content">
                    <div class="img-div">
                        <img src="{{ asset('admin-assets/images/store 1.svg') }}" alt="store" class="store-img">

                    </div>
                    <div class="card-titles d-flex align-items-baseline">
                        <h5>Stores</h5><span>+8.4%</span>

                    </div>
                    <div class="subtitle">
                        <h4>2</h4>
                    </div>
                    <div class="order-numbers">
                        <p class="fw-light">Last Month <span>(1)</span></p>
                    </div>

                </div>
            </div>
            <div class="order-card">
                <div class="order-content">
                    <div class="img-div">
                        <img src="{{ asset('admin-assets/images/user-protection 1.svg') }}" alt="user" class="user-protection-img">
                    </div>
                    <div class="card-titles d-flex align-items-baseline">
                        <h5>Customers</h5><span>+8.4%</span>

                    </div>
                    <div class="subtitle">
                        <h4>8</h4>
                    </div>

                    <div class="order-numbers">
                    <p class="fw-light">Last Month <span>(4)</span></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- cards end  -->

        <div class="search-div">
            <div class="row">
                <div class="col-md-4">
                    <div class="search-input">
                        <label>Choose Store</label>
                        <select class="form-select" aria-label="Default select example">
                            <option selected>Store 1</option>
                            <option value="1">Store 2</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="search-input">
                        <label for="date">From</label><br>
                        <input class="order-inputdata" type="date" id="date" name="date" placeholder="DD/MM/YY">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="search-input">
                        <label for="date">To</label><br>
                        <input class="order-inputdata" type="date" id="date" name="date" placeholder="DD/MM/YY">


                    </div>
                </div>
            </div>
        </div>
        <!-- search div end  -->
     
        <!-- table div end  -->

        <div class="graphs-div">
            <div class="row">
                <div class="col-xxl-6 col-xl-6 col-lg-12 dash-table-col">
                    <div class="income-layout">
                        <div class="graph-heading">
                            <h4>Income</h4>
                        </div>
                        <div class="income-table d-flex justify-content-between align-items-center">
                            <div class="fields">
                                <h6>Today Income</h6>
                                <p><span>+20%</span>/ last month</p>
                            </div>
                            <div class="custom-image">
                                <img src="{{ asset('admin-assets/images/up-graph.png') }}" alt="graph" class="graph-img">
                            </div>
                            <div class="price d-flex align-items-center gap-1">
                                <p>0.450 $</p>
                                <img src="{{ asset('admin-assets/images/Line 7.png') }}" alt="graph-arrow" class="graph-arrow">
                            </div>
                        </div>
                        <div class="income-table d-flex justify-content-between align-items-center">
                            <div class="fields">
                                <h6>This Month</h6>
                                <p><span>+20%</span>/ last month</p>
                            </div>
                            <div class="custom-image">
                                <img src="{{ asset('admin-assets/images/up-graph.png') }}" alt="graph" class="graph-img">
                            </div>
                            <div class="price d-flex align-items-center gap-1">
                                <p>0.450 $</p>
                                <img src="{{ asset('admin-assets/images/Line 7.png') }}" alt="graph-arrow" class="graph-arrow">
                            </div>
                        </div>
                        <div class="income-table d-flex justify-content-between align-items-center">
                            <div class="fields-down">
                                <h6>This Year</h6>
                                <p><span>-50%</span>/ last month</p>
                            </div>
                            <div class="custom-image">
                                <img src="{{ asset('admin-assets/images/down-graph.png') }}" alt="graph" class="graph-img">
                            </div>
                            <div class="price-down d-flex align-items-center gap-1">
                                <p>1.450 $</p>
                                <img src="{{ asset('admin-assets/images/down-arrow.png') }}" alt="graph-arrow" class="graph-arrow">
                            </div>
                        </div>
                        <div class="income-table d-flex justify-content-between align-items-center">
                            <div class="fields">
                                <h6>All Time</h6>
                                <p><span>+20%</span>/ last month</p>
                            </div>
                            <div class="custom-image">
                                <img src="{{ asset('admin-assets/images/up-graph.png') }}" alt="graph" class="graph-img">
                            </div>
                            <div class="price d-flex align-items-center gap-1">
                                <p>0.450 $</p>
                                <img src="{{ asset('admin-assets/images/Line 7.png') }}" alt="graph-arrow" class="graph-arrow">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-6 col-xl-6 col-lg-12 ">
                    <div class="table-layout">
                        <div class="graph-heading">
                            <h4>Waiting</h4>
                        </div>
                        <table class="table-success w-100">
                            <thead>
                                <tr>
                                    <th>Order Status</th>
                                    <th>Expected Delivery</th>
                                    <th>Delivery Time</th>

                                </tr>

                            </thead>
                            <tbody>
                                <tr>
                                    <td class="data-success">Confirmed</td>
                                    <td>20-04-2024</td>
                                    <td>10:00AM</td>
                                </tr>
                                <tr>
                                    <td>Out for Delivery</td>
                                    <td>Expected Delivery</td>
                                    <td>10:00AM</td>
                                </tr>
                                <tr>
                                    <td class="data-pending">Order Cancelled</td>
                                    <td class="data-pending">Expected Delivery</td>
                                    <td class="data-pending">11:00AM</td>
                                </tr>
                                <tr>
                                    <td>Order Cancelled</td>
                                    <td>Expected Delivery</td>
                                    <td>11:00AM</td>
                                </tr>
                                <tr>
                                    <td>Order Cancelled</td>
                                    <td>Expected Delivery</td>
                                    <td>11:00AM</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>


@endsection