@extends('frontend.app')
@section('content')
<main class="main-wrapper">
    <!-- Start Breadcrumb Area  -->
    <div class="axil-breadcrumb-area">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-8">
                    <div class="inner">
                        <ul class="axil-breadcrumb">
                            <li class="axil-breadcrumb-item"><a href="index.php">Home</a></li>
                            <li class="separator"></li>
                            <li class="axil-breadcrumb-item active" aria-current="page">My Account</li>
                        </ul>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    <!-- End Breadcrumb Area  -->

    <!-- Start My Account Area  -->
    <div class="axil-dashboard-area">
        <div class="container-fluid">
            <div class="axil-dashboard-warp p-5">
                <div class="axil-dashboard-author">
                    <div class="media">
                        
                        <div class="media-body">
                           <h5 class="title mb-0">Hello {{ auth()->user()->first_name.' '.auth()->user()->last_name}}</h5>
                            <span class="joining-date"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-3 col-md-4">
                        <aside class="axil-dashboard-aside">
                            <nav class="axil-dashboard-nav">
                                <div class="nav nav-tabs" role="tablist">
                                    <a class="nav-item nav-link" href="{{ route('front.dashboard.index')}}"><i class="fas fa-th-large"></i>Dashboard</a>
                                    <a class="nav-item nav-link active" href="{{ route('front.orders.index')}}" ><i class="fas fa-shopping-basket"></i>Orders</a>
                                    <a class="nav-item nav-link" href="{{ route('front.account_details.index')}}"><i class="fas fa-home"></i>Account Details</a>
                                    <a class="nav-item nav-link" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();"><i class="fa-solid fa-right-from-bracket"></i>Logout</a>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </nav>
                        </aside>
                    </div>
                    <div class="col-xl-9 col-md-8">
                        <div class="tab-content">
                            <div class="axil-dashboard-order">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col">Order</th>
                                                <th scope="col">Date</th>
                                                <th scope="col">Status</th>
                                                <th scope="col">Total</th>
                                                <th scope="col">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($items as $item)

          @php
$statusStyles = [
    'pending' => 'background:#ffd633;color:#000000;',
    'processing' => 'background:#E6F0FF;color:#1D4ED8;',
    'courier' => 'background:#EEF2FF;color:#3730A3;',
    'courier_complete' => 'background:#E6FAF3;color:#047857;',
    'complete' => 'background:#DCFCE7;color:#166534;',
    'on_hold' => 'background:#F1F5F9;color:#475569;',
    'cancell' => 'background:#FEE2E2;color:#991B1B;',
    'return' => 'background:#F8FAFC;color:#0F172A;border:1px solid #E2E8F0;',
    'incomplete' => 'background:#FAFAFA;color:#525252;border:1px dashed #D4D4D4;',
];
@endphp



                                            <tr>
                                                <th scope="row">#{{ $item->invoice_no}}</th>
                                                <td> {{ dateFormate($item->date)}}</td>
                                                <td>
                                                    <span style="
                                                        {{ $statusStyles[$item->status] ?? 'background:#f1f5f9;color:#334155;' }}
                                                        padding:6px 14px;
                                                        font-size:13px;
                                                        font-weight:500;
                                                        border-radius:999px;
                                                        display:inline-block;
                                                        letter-spacing:.3px;
                                                        white-space:nowrap;
                                                    ">
                                                        {{ ucfirst(str_replace('_',' ', $item->status)) }}
                                                    </span>
                                                </td>
                                                <td>{{ priceFormate($item->final_amount)}} for {{ $item->details->count()}} items</td>
                                                <td><a href="{{ route('front.orders.show', [$item->id])}}" class="axil-btn view-btn text-center">View</a></td>
                                            </tr>
                                            @endforeach
                                            
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End My Account Area  -->
</main>



@endsection