@extends('backend.master')
@section('title')
    {{ ___('common.Order Details') }}
@endsection
@section('content')
    <div class="page-content">

        {{-- bradecrumb Area S t a r t --}}
        <div class="page-header">
            <div class="row">
                <div class="col-sm-6">
                    <h4 class="bradecrumb-title mb-1">{{ ___('common.orders_table') }}</h1>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ ___('common.home') }}</a></li>
                            <li class="breadcrumb-item">{{ ___('common.orders') }}</li>
                        </ol>
                </div>
            </div>
        </div>
        {{-- bradecrumb Area E n d --}}

        <!--  table content start -->
        <div class="table-content table-basic ecommerce-components product-list order-details">
            <div class="card">
                <div class="card-header">
                    <!--  toolbar table start  -->
                    <div
                        class="table-toolbar d-flex flex-wrap gap-2 flex-column flex-xl-row justify-content-center justify-content-xxl-between align-content-center">
                        <div class="align-self-center">
                            <div class="d-flex flex-wrap gap-2 flex-column justify-content-center align-content-center">
                                <h3 class="mb-1">Tue, Apr 15, 2020, 8:44PM</h3>
                                <h6>{{ ___('common.order_id') }} : <span>#8965327</span></h6>
                            </div>
                        </div>

                        <div class="align-self-center d-flex gap-2">
                            <!-- search -->
                            <!-- Status -->
                            <div class="align-self-center">
                                <div class="dropdown dropdown-designation" data-bs-toggle="tooltip"
                                    data-bs-placement="right" data-bs-title="Status">
                                    <button type="button" class="btn-designation" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        <span>{{ ___('common.pending') }}</span>
                                    </button>

                                    <div class="dropdown-menu">
                                        <ul class="list">
                                            <li class="list-item">
                                                <a class="dropdown-item" href="#">{{ ___('common.pending') }}</a>
                                            </li>

                                            <li class="list-item">
                                                <a class="dropdown-item" href="#">{{ ___('common.delivered') }}</a>
                                            </li>

                                            <li class="list-item">
                                                <a class="dropdown-item" href="#">{{ ___('common.cancelled') }}</a>
                                            </li>

                                            <li class="list-item">
                                                <a class="dropdown-item" href="#">{{ ___('common.rejected') }}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!-- add btn -->
                            <div class="align-self-center">
                                <a href="#" role="button" class="btn-add" data-bs-toggle="tooltip"
                                    data-bs-placement="right" data-bs-title="Save">
                                    <span><i class="fa-solid fa-save"></i> </span>
                                    <span class="d-none d-xl-inline">{{ ___('common.save') }}</span>
                                </a>
                            </div>
                            <!-- add btn -->
                            <div class="align-self-center">
                                <a href="#" role="button" class="btn-add" data-bs-toggle="tooltip"
                                    data-bs-placement="right" data-bs-title="Print">
                                    <span><i class="fa-solid fa-print"></i> </span>
                                    <span class="d-none d-xl-inline">{{ ___('common.print') }}</span>
                                </a>
                            </div>

                        </div>
                    </div>
                    <!--toolbar table end -->
                </div>
                <div class="card-body">
                    <div class="row row-cols-1 row-cols-xl-2 row-cols-xxl-3">
                        <div class="col mb-20">
                            <div class="border ot-card shadow-none radius-10">
                                <div>
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="icon-box customer border-0">
                                            <i class="las la-user text-primary
                                    "></i>
                                        </div>
                                        <div class="info text-break">
                                            <h3 class="mb-3">{{ ___('common.customer') }}</h3>
                                            <p class="mb-1">Jhon Michle</p>
                                            <p class="mb-1">jhon@_78@example.com</p>
                                            <p class="mb-1">+91-9910XXXXXX</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-20">
                            <div class="border ot-card shadow-none radius-10">
                                <div>
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="icon-box order-info border-0">
                                            <i class="las la-truck text-success"></i>
                                        </div>
                                        <div class="info">
                                            <h3 class="mb-3">{{ ___('common.order_info') }}</h3>
                                            <p class="mb-1"><strong>{{ ___('common.shipping') }}</strong> : Red
                                                Express</p>
                                            <p class="mb-1"><strong>{{ ___('common.pay_method') }}</strong> : Master
                                                Card</p>
                                            <p class="mb-1"><strong>{{ ___('common.status') }}</strong> : New</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col mb-20">
                            <div class="border ot-card shadow-none radius-10">
                                <div>
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="icon-box deliver-to border-0">
                                            <i class="las la-map-marker text-danger"></i>
                                        </div>
                                        <div class="info">
                                            <h3 class="mb-3">{{ ___('common.deliver_to') }}</h3>
                                            <p class="mb-1"><strong>{{ ___('common.city') }}</strong> : Sydney,
                                                Australia</p>
                                            <p class="mb-1"><strong>{{ ___('common.address') }}</strong> : 47-A,
                                                Street Name, <br>Sydney
                                                Australia</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12  col-xl-8 mb-20">
                            <!--  table start -->
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead class="thead">
                                        <tr>
                                            <th class="sorting_desc">{{ ___('common.product') }}</th>
                                            <th class="sorting_desc">{{ ___('common.unit_price') }}</th>
                                            <th class="sorting_desc">{{ ___('common.address') }}</th>
                                            <th class="sorting_desc">{{ ___('common.total') }}</th>
                                        </tr>
                                    </thead>

                                    <tbody class="tbody">
                                        <tr>
                                            <td>
                                                <a href="#" class="d-flex align-items-center">
                                                    <div class="product-image">
                                                        <img src="{{ asset('backend/assets/images/demo-product.png') }}"
                                                            alt="demo-product.png">
                                                    </div>
                                                    <div class="product-name ml-10">
                                                        White t-shirt (Round Shape)
                                                    </div>
                                                </a>
                                            </td>
                                            <td>250.00BDT</td>
                                            <td>3</td>
                                            <td>750.00BDT</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a href="#" class="d-flex align-items-center">
                                                    <div class="product-image">
                                                        <img src="{{ asset('backend/assets/images/demo-product.png') }}"
                                                            alt="demo-product.png">
                                                    </div>
                                                    <div class="product-name ml-10">
                                                        White t-shirt (Round Shape)
                                                    </div>
                                                </a>
                                            </td>
                                            <td>250.00BDT</td>
                                            <td>3</td>
                                            <td>750.00BDT</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a href="#" class="d-flex align-items-center">
                                                    <div class="product-image">
                                                        <img src="{{ asset('backend/assets/images/demo-product.png') }}"
                                                            alt="demo-product.png">
                                                    </div>
                                                    <div class="product-name ml-10">
                                                        White t-shirt (Round Shape)
                                                    </div>
                                                </a>
                                            </td>
                                            <td>250.00BDT</td>
                                            <td>3</td>
                                            <td>750.00BDT</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a href="#" class="d-flex align-items-center">
                                                    <div class="product-image">
                                                        <img src="{{ asset('backend/assets/images/demo-product.png') }}"
                                                            alt="demo-product.png">
                                                    </div>
                                                    <div class="product-name ml-10">
                                                        White t-shirt (Round Shape)
                                                    </div>
                                                </a>
                                            </td>
                                            <td>250.00BDT</td>
                                            <td>3</td>
                                            <td>750.00BDT</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a href="#" class="d-flex align-items-center">
                                                    <div class="product-image">
                                                        <img src="{{ asset('backend/assets/images/demo-product.png') }}"
                                                            alt="demo-product.png">
                                                    </div>
                                                    <div class="product-name ml-10">
                                                        White t-shirt (Round Shape)
                                                    </div>
                                                </a>
                                            </td>
                                            <td>250.00BDT</td>
                                            <td>3</td>
                                            <td>750.00BDT</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a href="#" class="d-flex align-items-center">
                                                    <div class="product-image">
                                                        <img src="{{ asset('backend/assets/images/demo-product.png') }}"
                                                            alt="demo-product.png">
                                                    </div>
                                                    <div class="product-name ml-10">
                                                        White t-shirt (Round Shape)
                                                    </div>
                                                </a>
                                            </td>
                                            <td>250.00BDT</td>
                                            <td>3</td>
                                            <td>750.00BDT</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!--  table end -->
                        </div>
                        <div class="col-12 col-xl-4 mb-20">
                            <div class="border ot-card shadow-none radius-10">
                                <div>
                                    <div class="d-flex justify-content-between align-items-center mb-4">
                                        <div>
                                            <h5 class="mb-0">{{ ___('common.order_summary') }}</h5>
                                        </div>
                                        <div>
                                            <button type="button"
                                                class="btn alert-success radius-30 px-2 px-sm-4 ot-btn-info">{{ ___('common.confirmed') }}</button>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center mb-3">
                                        <div>
                                            <p class="mb-0">{{ ___('common.subtotal') }}</p>
                                        </div>
                                        <div class="ms-auto">
                                            <h5 class="mb-0">$198.00</h5>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center mb-3">
                                        <div>
                                            <p class="mb-0">{{ ___('common.shipping_price') }}</p>
                                        </div>
                                        <div class="ms-auto">
                                            <h5 class="mb-0">$0.00</h5>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center mb-3">
                                        <div>
                                            <p class="mb-0">{{ ___('common.taxes') }}</p>
                                        </div>
                                        <div class="ms-auto">
                                            <h5 class="mb-0">$24.00</h5>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center mb-3">
                                        <div>
                                            <p class="mb-0">{{ ___('common.payment_fee') }}</p>
                                        </div>
                                        <div class="ms-auto">
                                            <h5 class="mb-0">$14.00</h5>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center mb-3">
                                        <div>
                                            <p class="mb-0">{{ ___('common.discount') }}</p>
                                        </div>
                                        <div class="ms-auto">
                                            <h5 class="mb-0 text-danger">-$36.00</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  table content end -->
    </div>
@endsection