@extends('restaurant.layout.index')
@section('title','Muftaax | Order Tracking')
@section('custom-style')
    <style>
        .nav-tabs{
            --bs-nav-link-padding-x: 3rem;
        }
        .tab-style-3 .nav-item .nav-link::after {
            inset-inline-start: 39%;
        }
        .nav-link:hover {
            color: #000000;
        }
        .nav-link:focus{
            color: #000000;
        }
    </style>
@endsection
@section('content')

    <!-- Start::app-content -->
    <div class="main-content app-content">
        <div class="container-fluid">

            <!-- Page Header -->
            <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title fw-medium fs-18 mb-2">Order Tracking</h1>
                    <div class="">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Tracking Order</li>
                            </ol>
                        </nav>
                    </div>
                </div>

            </div>
            <!-- Page Header Close -->

            <div class="row">
                <div class="col-xxl-12 col-xl-6">
                    <div class="card custom-card">
                        <div class="card-header">
                            <div class="card-title">
                                Order Tracking
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="text-center py-5">
                                <h4 class="fw-semibold">Order Id: #00901</h4>
                            </div>
                            <ul class="nav nav-tabs justify-content-center mb-5 tab-style-3" id="myTab2"
                                role="tablist">
                                <li class="nav-item me-0">
                                    <button class="nav-link active home py-1">Created</button>
                                </li>
                                <li class="nav-item me-0">
                                    <button class="nav-link about py-1">Assigned</button>
                                </li>
                                <li class="nav-item me-0">
                                    <button class="nav-link services py-1">Started</button>
                                </li>
                                <li class="nav-item me-0">
                                    <button class="nav-link blog py-1">Arrived</button>
                                </li>
                                <li class="nav-item me-0">
                                    <button class="nav-link portfolio py-1">Completed</button>
                                </li>
                            </ul>
                        </div>
                        <div class="text-center py-5">
                            <h5 class="fs-16 fw-semibold mb-3">
                                22 Aug,2024  10:34pm
                            </h5>
                            <h5 class="fs-16 fw-normal">
                                <b>Delivery Location:</b> <i class="ri ri-map-pin-2-fill fs-16"></i>6391 Elgin St. Celina, Delaware 10299
                            </h5>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card">
                        <div class="card-header d-md-flex d-block">
                            <div class="h5 mb-0 d-sm-flex d-bllock align-items-center">
                                <div class="ms-0 mt-sm-0 mt-2">
                                    <div class="h6 fw-medium mb-0"><b>McDonalds</b>
                                        Order INVOICE : <span class="text-primary">#00901</span></div>
                                </div>
                            </div>
                            <div class="ms-auto mt-md-0 mt-2">
                                <button class="btn btn-sm btn-secondary me-1" onclick="javascript:window.print();">Print<i class="ri-printer-line ms-1 align-middle d-inline-block"></i></button>
                                <button class="btn btn-sm btn-primary">Save As PDF<i class="ri-file-pdf-line ms-1 align-middle d-inline-block"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row gy-3">
                                <div class="col-xl-12">
                                    <div class="row">
                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6">
                                            <p class="text-muted mb-2">
                                                Billing From :
                                            </p>
                                            <p class="fw-bold mb-1">
                                                Muftaax
                                            </p>
                                            <p class="mb-1 text-muted">
                                                muftaax.admin@gmail.com
                                            </p>
                                            <p class="mb-1 text-muted">
                                                (555) 555-1234
                                            </p>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 ms-auto mt-sm-0 mt-3">
                                            <p class="text-muted mb-2">
                                                Billing To :
                                            </p>
                                            <p class="fw-bold mb-1">
                                                Cameron Williamson
                                            </p>
                                            <p class="text-muted mb-1">
                                                6391 Elgin St
                                            </p>
                                            <p class="text-muted mb-1">
                                                6391 Elgin St. Celina, Delaware 10...
                                            </p>
                                            <p class="text-muted mb-1">
                                                willie.jennings@example.com
                                            </p>
                                            <p class="text-muted">
                                                (307) 555-0133
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3">
                                    <p class="fw-medium text-muted mb-1">Invoice ID :</p>
                                    <p class="fs-15 mb-1">#SPK120219890</p>
                                </div>
                                <div class="col-xl-3">
                                    <p class="fw-medium text-muted mb-1">Date Issued :</p>
                                    <p class="fs-15 mb-1">22 Aug,2024 - <span class="text-muted fs-12">9:34pm</span></p>
                                </div>
                                <div class="col-xl-3">
                                    <p class="fw-medium text-muted mb-1">Delivered Date :</p>
                                    <p class="fs-15 mb-1">22 Aug,2024 - <span class="text-muted fs-12">10:34pm</span></p>
                                </div>
                                <div class="col-xl-3">
                                    <p class="fw-medium text-muted mb-1">Total Amount :</p>
                                    <p class="fs-16 mb-1 fw-medium">$2,570.42</p>
                                </div>
                                <div class="col-xl-12">
                                    <div class="table-responsive">
                                        <table class="table nowrap text-nowrap border mt-4">
                                            <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>DETAIL</th>
                                                <th>OTHERS</th>
                                                <th>PRICE PER UNIT</th>
                                                <th>TOTAL</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <div class="fw-medium">
                                                        Cameron Williamson
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="text-muted">
                                                        2 Zinger Burgers<br>
                                                        1 Chicken Bucket
                                                    </div>
                                                </td>
                                                <td class="product-quantity-container">
                                                    Add some crisp
                                                </td>
                                                <td>
                                                    $60
                                                </td>
                                                <td>
                                                    $120
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                </td>
                                                <td>
                                                    <div class="text-muted">
                                                        2 Zinger Burgers<br>
                                                        1 Chicken Bucket
                                                    </div>
                                                </td>
                                                <td class="product-quantity-container">
                                                    Add some crisp
                                                </td>
                                                <td>
                                                    $60
                                                </td>
                                                <td>
                                                    $120
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                </td>
                                                <td>
                                                    <div class="text-muted">
                                                        2 Zinger Burgers<br>
                                                        1 Chicken Bucket
                                                    </div>
                                                </td>
                                                <td class="product-quantity-container">
                                                    Add some crisp
                                                </td>
                                                <td>
                                                    $60
                                                </td>
                                                <td>
                                                    $120
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="3"></td>
                                                <td colspan="2">
                                                    <table class="table table-sm text-nowrap mb-0 table-borderless">
                                                        <tbody>
                                                        <tr>
                                                            <th scope="row">
                                                                <p class="mb-0">Sub Total :</p>
                                                            </th>
                                                            <td>
                                                                <p class="mb-0 fw-medium fs-15">$2,364</p>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row">
                                                                <p class="mb-0">Due Till Date :</p>
                                                            </th>
                                                            <td>
                                                                <p class="mb-0 fw-medium fs-15">$0</p>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row">
                                                                <p class="mb-0 fs-14">Total :</p>
                                                            </th>
                                                            <td>
                                                                <p class="mb-0 fw-medium fs-16 text-success">$2,570.42</p>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-xl-12">
                                    <div>
                                        <label for="invoice-note" class="form-label">Note:</label>
                                        <textarea class="form-control form-control-light" id="invoice-note" rows="3">Once the invoice has been verified by the accounts payable team and recorded, the only task left is to send it for approval before releasing the payment</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button class="btn btn-success">Download <i class="ri-download-2-line ms-1 align-middle"></i></button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection
@section('custom-script')

@endsection