@extends('layouts.front-end.app')

@section('title', 'My Order List')

@section('content')
    <div class="container">
        <div class="cs_height_45 cs_height_lg_45"></div>
        <ol class="breadcrumb cs_fs_18 mb-0">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
            <li class="breadcrumb-item active">Orders</li>
        </ol>
        <div class="cs_height_30 cs_height_lg_30"></div>
    </div>
    <div class="container">
        <div class="cs_account_wrap">
            @include('web-views.partials._profile-aside')
            <div class="cs_account_content">
                <div class="cs_account_card cs_radius_10">
                    <div class="cs_account_card_head cs_type_1">
                        <h3 class="cs_fs_18 mb-0">Your Orders</h3>
                        <select>
                            <option value="1">All Order</option>
                            <option value="2">Pending</option>
                            <option value="3">Delivered</option>
                            <option value="3">Canceled</option>
                        </select>
                    </div>
                    <div class="cs_plr_25">
                        <div class="table-responsive">
                            <table class="cs_table_1 m-0">
                                <thead>
                                    <tr>
                                        <th>Order</th>
                                        <th>Placed On</th>
                                        <th>Status</th>
                                        <th>Total</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (count($orders) > 0)
                                        @foreach ($orders as $order)
                                            <tr>
                                                <td><a
                                                        href="{{ route('account-order-details', $order->id) }}">#{{ $order->id }}</a>
                                                </td>
                                                <td>{{ \Carbon\Carbon::parse($order->create_at)->format('Y-m-d') }}</td>
                                                @if ($order['order_status'] == 'failed' || $order->order_status == 'canceled')
                                                    <td>
                                                        <span class="btn btn-sm btn-danger text-white">
                                                            {{ $order['order_status'] }}
                                                        </span>
                                                    </td>
                                                @elseif(
                                                    $order['order_status'] == 'confirmed' ||
                                                        $order['order_status'] == 'processing' ||
                                                        $order['order_status'] == 'delivered')
                                                    <td>
                                                        <span class="btn btn-sm btn-success text-white">
                                                            {{ $order['order_status'] }}
                                                        </span>
                                                    </td>
                                                @else
                                                    <td>
                                                        <span class="btn btn-sm btn-info text-white">
                                                            {{ $order['order_status'] }}
                                                        </span>
                                                    </td>
                                                @endif
                                                <td>{{ \App\CPU\Helpers::currency_converter($order['order_amount']) }}</td>
                                                <td class="text-end">
                                                    @if ($order['order_status'] == 'delivered')
                                                    <a class="cs_text_btn"
                                                        href="{{ route('product.reviews',$order->id)}}">
                                                        <span>Write a Review</span>
                                                    </a>
                                                    @endif
                                                    <a class="cs_text_btn"
                                                        href="{{ route('account-order-details', $order->id) }}">
                                                        <span>View Details</span>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="5" class="text-center">Order are empty</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <div class="cs_table_1_footer">
                            <div class="cs_table_1_footer_left">
                                Page
                                <select>
                                    <option value="1">1</option>
                                    <option value="2">3</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                                Of 12
                            </div>
                            <div class="cs_table_1_footer_right">
                                <ul class="pagination justify-content-center justify-content-md-start mb-0">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#">
                                            <i class="fa-solid fa-angles-left"></i>
                                        </a>
                                    </li>
                                    <li class="page-item active">
                                        <a class="page-link" href="#">1</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">2</a>
                                    </li>
                                    <li class="page-item">
                                        <span class="page-link">
                                            <i class="fa-solid fa-ellipsis"></i>
                                        </span>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">6</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">7</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">
                                            <i class="fa-solid fa-angles-right"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection