@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>{{$totalOrders ?? 00}}</h4>
                    </div>
                    <div class="order-numbers">
                    <p class="fw-light">Last Month <span>({{$lastMonthOrders}})</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>{{$totalStores ?? 00}}</h4>
                    </div>
                    <div class="order-numbers">
                        <p class="fw-light">Last Month <span>({{$lastMonthStores}})</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>{{$totalCustomers ?? 00}}</h4>
                    </div>

                    <div class="order-numbers">
                    <p class="fw-light">Last Month <span>({{$lastMonthCustomers}})</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  -->
        <div class="table-div">
            <div class="table-heading">
                <h4>Order</h4>
                <div class="position-relative">
                    <!-- <input
                        class="nav-search-input search-input-col"
                        type="search"
                        placeholder="Search"
                        aria-label="Search" />
                    <img src="{{ asset('admin-assets/images/search.svg') }}" alt="order" class="search-img"> -->
                </div>


            </div>

            <table id="orderTable"
                class="table table-borderless"
                data-toggle="table"
                data-search="true"
                data-pagination="true"
                data-sortable="true"
                data-page-size="8"
                data-click-to-select="false">
                <thead>
                <tr>
                <th>Order ID</th>
                <th>Name</th>
                <th>Address</th>
                <th>Date</th>
                <th>Status</th>
            </tr>
                </thead>
                <tbody>
            @forelse($paginatedOrders as $order)
                <tr>
                    <td>#{{ $order['id'] }}</td>
                    <td>{{ $order['customer']['first_name'] ?? 'N/A' }} {{ $order['customer']['last_name'] ?? '' }}</td>
                    <td>{{ $order['shipping_address']['address1'] ?? 'N/A' }}, {{ $order['shipping_address']['country'] ?? 'N/A' }}</td>
                    <td>{{ \Carbon\Carbon::parse($order['created_at'])->format('d/m/Y') }}</td>
                    <td>
                            @if (!empty($order['cancel_reason']))
                            <span class="badge bg-danger">Canceled</span>
                            @elseif ($order['fulfillment_status'] === 'fulfilled')
                            <span class="badge badge-success ">Completed</span>
                            @elseif (empty($order['processed_at']) && !empty($order['checkout_id']))
                            <span class="badge bg-warning">Abandoned</span>
                            @else
                            <span class="badge bg-pending">Pending</span>
                            @endif
                        </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="text-center">No Orders Found</td>
                </tr>
            @endforelse
        </tbody>
            </table>
        </div>
        <!-- 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