@extends('layouts.seller-template')
@section('page-content')
<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">Order Details</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Orders</a></li>
                                <li class="breadcrumb-item active">Order Details</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-xl-9">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex align-items-center">
                                <h5 class="card-title flex-grow-1 mb-0">Order #VL2667</h5>
                                <div class="flex-shrink-0">
                                    <a href="#" class="btn btn-success btn-sm"><i class="ri-download-2-fill align-middle me-1"></i> Invoice</a>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive table-card">
                                <table class="table table-nowrap align-middle table-borderless mb-0">
                                    <thead class="table-light text-muted">
                                        <tr>
                                            <th scope="col">Product Details</th>
                                            <th scope="col">Item Price</th>
                                            <th scope="col">Quantity</th>
                                            <th scope="col">Rating</th>
                                            <th scope="col" class="text-end">Total Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 avatar-md bg-light rounded p-1">
                                                        <img src="{{ asset('admin/images/products/img-1.png') }}" alt="" class="img-fluid d-block">
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <h5 class="fs-15"><a href="#" class="link-primary">Bamboo Latex Pillow</a></h5>
                                                        <p class="text-muted mb-0">Color: <span class="fw-medium">White</span></p>
                                                        <p class="text-muted mb-0">Quantity: <span class="fw-medium">4</span></p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td><i class="mdi mdi-currency-inr"></i>2,556.00</td>
                                            <td>02</td>
                                            <td>
                                                <div class="text-warning fs-15">
                                                    <i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-half-fill"></i>
                                                </div>
                                            </td>
                                            <td class="fw-medium text-end">
                                                <i class="mdi mdi-currency-inr"></i>10,224.00
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 avatar-md bg-light rounded p-1">
                                                        <img src="{{ asset('admin/images/products/img-2.png') }}" alt="" class="img-fluid d-block">
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <h5 class="fs-15"><a href="#" class="link-primary">'Latex Plus' - 100% Natural Latex Core</a></h5>
                                                        <p class="text-muted mb-0">Quantity: <span class="fw-medium">1</span></p>
                                                        <p class="text-muted mb-0">Size: <span class="fw-medium"> Double</span></p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td><i class="mdi mdi-currency-inr"></i>21,654.00</td>
                                            <td>01</td>
                                            <td>
                                                <div class="text-warning fs-15">
                                                    <i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-half-fill"></i>
                                                </div>
                                            </td>
                                            <td class="fw-medium text-end">
                                                <i class="mdi mdi-currency-inr"></i>21,654.00
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 avatar-md bg-light rounded p-1">
                                                        <img src="{{ asset('admin/images/products/img-3.png') }}" alt="" class="img-fluid d-block">
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <h5 class="fs-15"><a href="#" class="link-primary">Coir-on 'Coolmax'</a></h5>
                                                        <p class="text-muted mb-0">Quantity: <span class="fw-medium">1</span></p>
                                                        <p class="text-muted mb-0">Size: <span class="fw-medium">Double</span></p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td><i class="mdi mdi-currency-inr"></i>10,026</td>
                                            <td>01</td>
                                            <td>
                                                <div class="text-warning fs-15">
                                                    <i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-half-fill"></i><i class="ri-star-line"></i><i class="ri-star-line"></i>
                                                </div>
                                            </td>
                                            <td class="fw-medium text-end">
                                                <i class="mdi mdi-currency-inr"></i>10,026.00
                                            </td>
                                        </tr>
                                        <tr class="border-top border-top-dashed">
                                            <td colspan="3"></td>
                                            <td colspan="2" class="fw-medium p-0">
                                                <table class="table table-borderless mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td>Sub Total :</td>
                                                            <td class="text-end"><i class="mdi mdi-currency-inr"></i>41,904.00</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Discount <span class="text-muted"></span> : :</td>
                                                            <td class="text-end">-<i class="mdi mdi-currency-inr"></i>53.99</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Estimated Tax :</td>
                                                            <td class="text-end"><i class="mdi mdi-currency-inr"></i>44.99</td>
                                                        </tr>
                                                        <tr class="border-top border-top-dashed">
                                                            <th scope="row">Total (USD) :</th>
                                                            <th class="text-end"><i class="mdi mdi-currency-inr"></i>41,895.00</th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--end card-->

                </div>
                <!--end col-->
                <div class="col-xl-3">

                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex">
                                <h5 class="card-title flex-grow-1 mb-0">Customer Details</h5>
                                <div class="flex-shrink-0">
                                    <a href="javascript:void(0);" class="link-secondary">View Profile</a>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled mb-0 vstack gap-3">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <img src="{{ asset('admin/images/users/avatar-3.jpg') }}" alt="" class="avatar-sm rounded">
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="fs-14 mb-1">Joseph Parkers</h6>
                                            <p class="text-muted mb-0">Customer</p>
                                        </div>
                                    </div>
                                </li>
                                <li><i class="ri-mail-line me-2 align-middle text-muted fs-16"></i>josephparker@gmail.com</li>
                                <li><i class="ri-phone-line me-2 align-middle text-muted fs-16"></i>+(256) 245451 441</li>
                            </ul>
                        </div>
                    </div>
                    <!--end card-->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="ri-map-pin-line align-middle me-1 text-muted"></i> Billing Address</h5>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled vstack gap-2 fs-13 mb-0">
                                <li class="fw-medium fs-14">Joseph Parker</li>
                                <li>+(256) 245451 451</li>
                                <li>2186 Joyce Street Rocky Mount</li>
                                <li>New York - 25645</li>
                                <li>United States</li>
                            </ul>
                        </div>
                    </div>
                    <!--end card-->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="ri-map-pin-line align-middle me-1 text-muted"></i> Shipping Address</h5>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled vstack gap-2 fs-13 mb-0">
                                <li class="fw-medium fs-14">Joseph Parker</li>
                                <li>+(256) 245451 451</li>
                                <li>2186 Joyce Street Rocky Mount</li>
                                <li>California - 24567</li>
                                <li>United States</li>
                            </ul>
                        </div>
                    </div>
                    <!--end card-->

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="ri-secure-payment-line align-bottom me-1 text-muted"></i> Payment Details</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <div class="flex-shrink-0">
                                    <p class="text-muted mb-0">Transactions:</p>
                                </div>
                                <div class="flex-grow-1 ms-2">
                                    <h6 class="mb-0">#VLZ124561278124</h6>
                                </div>
                            </div>
                            <div class="d-flex align-items-center mb-2">
                                <div class="flex-shrink-0">
                                    <p class="text-muted mb-0">Payment Method:</p>
                                </div>
                                <div class="flex-grow-1 ms-2">
                                    <h6 class="mb-0">Debit Card</h6>
                                </div>
                            </div>
                            <div class="d-flex align-items-center mb-2">
                                <div class="flex-shrink-0">
                                    <p class="text-muted mb-0">Card Holder Name:</p>
                                </div>
                                <div class="flex-grow-1 ms-2">
                                    <h6 class="mb-0">Joseph Parker</h6>
                                </div>
                            </div>
                            <div class="d-flex align-items-center mb-2">
                                <div class="flex-shrink-0">
                                    <p class="text-muted mb-0">Card Number:</p>
                                </div>
                                <div class="flex-grow-1 ms-2">
                                    <h6 class="mb-0">xxxx xxxx xxxx 2456</h6>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <p class="text-muted mb-0">Total Amount:</p>
                                </div>
                                <div class="flex-grow-1 ms-2">
                                    <h6 class="mb-0"><i class="mdi mdi-currency-inr"></i>415.96</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end card-->
                </div>
                <!--end col-->
            </div>
            <!--end row-->

        </div><!-- container-fluid -->
    </div><!-- End Page-content -->

    @endsection