<?php include 'header.php'; ?>
<?php include '_top-header.php'; ?>

<div class="page">

    <div class="container p-0">

        <div class="profile-layout">

            <div class="start">
                <?php include '_profile-layout-side-menu.php' ?>
            </div><!-- start -->

            <div class="end">

                <div class="card">

                    <div class="flex-between flex-lg-row flex-column mb-3">

                        <p class="lead font-medium m-0 mb-3 mb-lg-0"> All orders </p>

                        <div class="row">

                            <div class="col-6">
                                <div class="form-group m-0 input-with-start-icon">
                                    <div class="relative">
                                        <input type="text" class="form-control" placeholder="Search here">
                                        <i class="icon icon-search start-icon icon-lg"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="form-group m-0">
                                    <select class="form-control">
                                        <option selected> Last 3 months </option>
                                        <option> Last 6 months </option>
                                        <option> Last 9 months </option>
                                        <option> Last 12 months </option>
                                    </select>
                                </div>
                            </div>

                        </div> <!-- row -->

                    </div> <!-- flex-between -->


                    <div class="custom-tabs-wrapper style4">

                        <div class="nav-tabs-wrapper">
                            <ul class="nav nav-tabs justify-content-start">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="all-tab" data-toggle="tab" data-target="#all"> All </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="in-progress-tab" data-toggle="tab" data-target="#in-progress"> In progress </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="completed-tab" data-toggle="tab" data-target="#completed"> Completed </button>
                                </li>
                            </ul>
                        </div>

                        <div class="tab-content" id="myTabContent">

                            <div class="tab-pane fade show active" id="all">

                                <div class="orders-wrapper py-3">

                                    <?php foreach (range(0, 7) as $i) { ?>

                                        <div class="order-card mb-3">

                                            <div class="order-header">
                                                <div class="start">
                                                    <a href="order-details.php" class="mb-0"> Order : 4345464 </a>
                                                    <p class="mb-0 color-gray small"> Friday, 13 Aug - 03 : 23 AM </p>
                                                    <p class="mb-0 small color-success"> 23.000 KWD </p>
                                                </div>
                                                <div class="end">
                                                    <?php

                                                    switch ($i) {
                                                        case 0:
                                                            echo '<span class="badge badge-sm badge-placed"> Placed </span>';
                                                            break;
                                                        case 1:
                                                            echo '<span class="badge badge-sm badge-preparing"> Preparing </span>';
                                                            break;
                                                        case 2:
                                                            echo '<span class="badge badge-sm badge-out-for-delivery"> Out for delivery </span>';
                                                            break;
                                                        case 3:
                                                            echo '<span class="badge badge-sm badge-delivered"> Delivered </span>';
                                                            break;
                                                        case 4:
                                                            echo '<span class="badge badge-sm badge-cancelled"> Cancelled </span>';
                                                            break;
                                                        default:
                                                            echo '<span class="badge badge-sm badge-placed"> Placed </span>';
                                                            break;
                                                    }
                                                    ?>
                                                </div>
                                            </div>

                                            <div class="order-products">

                                                <div class="row">
                                                    <?php foreach (range(1, 3) as $i) { ?>
                                                        <div class="col-12 col-md-4 mb-3">
                                                            <?php include 'shared-html/product-card-wide.php' ?>
                                                        </div>
                                                    <?php } ?>
                                                </div>

                                            </div>


                                        </div><!-- order-card -->


                                    <?php } ?>

                                </div>

                            </div>

                            <div class="tab-pane fade" id="in-progress">


                                <div class="no-data">
                                    <img src="assets/img/no-data.svg" class="no-data-image">
                                    <p class="m-0"> No Orders here </p>
                                </div>

                            </div>

                            <div class="tab-pane fade" id="completed">
                                <p> Lorem Ipsum is simply dummy text of </p>
                            </div>

                        </div>

                    </div> <!-- custom-tabs-wrapper -->



                </div> <!-- card -->

            </div> <!-- end -->

        </div> <!-- profile-layout -->

    </div> <!-- container -->

</div> <!-- page -->

<?php include 'footer.php'; ?>