<?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="row">

                    <div class="col-12 col-md-6">

                        <div class="card mb-3">

                            <div class="flex-between">
                                <div class="d-block">
                                    <p class="lead font-medium mb-1">Order : 4345464</p>
                                    <p class="color-gray font-light m-0"> Friday, 13 Aug - 03 : 23 AM</p>
                                </div>

                                <a href="#" class="btn btn-sm btn-outline-primary"> Tracking order </a>
                            </div>

                            <hr />

                            <div class="flex-start gap-2">
                                <span class="badge badge-placed rounded-circle color-white w-50px h-50px p-0">
                                    <i class="icon icon-order-placed icon-xl"></i>
                                </span>

                                <div class="d-block">
                                    <p class="lead font-medium mb-0"> Placed </p>
                                    <p class="color-gray font-light m-0"> It get you by Saturday 13 Aug </p>
                                </div>

                            </div>


                            <div class="flex-start gap-2">
                                <span class="badge badge-preparing rounded-circle color-white w-50px h-50px p-0">
                                    <i class="icon icon-order-placed icon-xl"></i>
                                </span>

                                <div class="d-block">
                                    <p class="lead color-warning font-medium mb-0"> Preparing </p>
                                    <p class="color-gray font-light m-0"> It get you by Saturday 13 Aug </p>
                                </div>

                            </div>



                            <div class="flex-start gap-2">
                                <span class="badge badge-out-for-delivery rounded-circle color-white w-50px h-50px p-0">
                                    <i class="icon icon-delivery-by icon-xl"></i>
                                </span>

                                <div class="d-block">
                                    <p class="lead color-success font-medium mb-0"> Out for delivery </p>
                                    <p class="color-gray font-light m-0"> It get you by Saturday 13 Aug </p>
                                </div>

                            </div>


                            <div class="flex-start gap-2">
                                <span class="badge badge-delivered rounded-circle color-white w-50px h-50px p-0">
                                    <i class="icon icon-check icon-lg"></i>
                                </span>

                                <div class="d-block">
                                    <p class="lead color-primary font-medium mb-0"> Delivered </p>
                                    <p class="color-gray font-light m-0"> It get you by Saturday 13 Aug </p>
                                </div>

                            </div>





                        </div>

                        <div class="card mb-3">


                            <div class=" flex-start gap-2 mb-3">
                                <p class="lead font-medium mb-0">Address details</p>
                                <span class="badge badge-primary-faded badge-xs">Fahd akhoya </span>
                            </div>

                            <div class="flex-between">
                                <div class="mb-1">
                                    <p class="mb-0 color-gray font-light">Receiver name</p>
                                    <p class="mb-0">Fahd Abdulaziz abo salman</p>
                                </div>
                                <div class="mb-1">
                                    <div class="color-gray font-light">Phone number</div>
                                    <div>+966 2345626363</div>
                                </div>
                            </div>

                            <div class="mb-0">
                                <div class="color-gray font-light">Address details</div>
                                <div>Kuwait, Hwayli, Elsafa Walmarwa, Building 4, Apt.45</div>
                            </div>

                        </div>

                        <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"> Products </p>
                                <a href="order-cancel.php" class="btn btn-sm btn-outline-primary"> Cancel items </a>
                            </div> <!-- flex-between -->

                            <?php for ($i = 1; $i < 4; $i++) { ?>

                                <div class="<?php if ($i < 2) { ?> mb-3 <?php } ?>">

                                    <?php include 'shared-html/product-card-wide-4.php' ?>

                                    <a
                                        class="card bg-primary-faded p-2 mt-2 cursor-pointer"

                                        <?php if ($i == 1) { ?>
                                        href="profile-edit-product-review-1.php"
                                        <?php } else { ?>
                                        data-toggle="modal" data-target="#review-product"
                                        <?php } ?>>
                                        <div class="flex-between">
                                            <div class="flex-start gap-2">
                                                <i class="icon icon-orders icon-lg color-primary "></i>
                                                <p class="m-0"> <?= $i ?> Review Product </p>
                                            </div>
                                            <div class="flex-end">
                                                <i class="icon icon-chevron-right icon-xxs color-primary-light-100"></i>
                                            </div>
                                        </div>
                                    </a>

                                    <hr class="mb-0" />

                                </div>

                            <?php } ?>

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

                    </div>

                    <div class="col-12 col-md-6">

                        <div class="card mb-4">

                            <div class="payment-summary">

                                <h6 class="mb-3"> Share your experience </h6>

                                <a href="#" class="link-with-end-icon base-border-light base-border-radius p-2 mb-2"
                                    data-toggle="modal" data-target="#review-delivery">
                                    <div class="start">
                                        <i class="icon icon-review-delivery icon-xl"></i>
                                        <div class="d-block">
                                            <p class="m-0 "> Review delivery </p>
                                            <p class="m-0 small"> review delivery man to improve </p>
                                        </div>
                                    </div>
                                    <div class="end">
                                        <i class="icon icon-chevron-right icon-sm"></i>
                                    </div>
                                </a>

                                <a href="#" class="link-with-end-icon base-border-light base-border-radius p-2"
                                    data-toggle="modal" data-target="#review-store">
                                    <div class="start">
                                        <i class="icon icon-review-store icon-xl"></i>
                                        <div class="d-block">
                                            <p class="m-0 "> Review store </p>
                                            <p class="m-0 small"> review delivery man to improve </p>
                                        </div>
                                    </div>
                                    <div class="end">
                                        <i class="icon icon-chevron-right icon-sm"></i>
                                    </div>
                                </a>

                            </div>

                        </div>

                        <div class="card mb-4">
                            <!-- Order Status Timeline -->
                            <div class="order-timeline color-gray">

                                <div class="timeline-item active">
                                    <div class="status-dot"></div>
                                    <div class="status-info">
                                        <p class="title mb-0 lead font-medium">Order placed</p>
                                        <small class="color-gray">Wed, 1 8th Jan</small>
                                    </div>
                                </div>

                                <div class="timeline-item active">
                                    <div class="status-dot"></div>
                                    <div class="status-info">
                                        <p class="title mb-0 lead font-medium">Preparing</p>
                                    </div>
                                </div>

                                <div class="timeline-item ">
                                    <div class="status-dot"></div>
                                    <div class="status-info">
                                        <p class="title mb-0 lead font-medium">Out for delivery</p>
                                    </div>
                                </div>

                                <div class="timeline-item">
                                    <div class="status-dot"></div>
                                    <div class="status-info">
                                        <p class="title mb-0 lead font-medium">Delivered</p>
                                    </div>
                                </div>

                            </div>

                        </div>


                        <div class="card mb-4">
                            <!-- Order Status Timeline -->
                            <div class="order-timeline color-gray">

                                <div class="timeline-item not-active">
                                    <div class="status-dot"></div>
                                    <div class="status-info">
                                        <p class="title mb-0 lead font-medium">Order placed</p>
                                        <small class="color-gray">Wed, 1 8th Jan</small>
                                    </div>
                                </div>

                                <div class="timeline-item not-active">
                                    <div class="status-dot"></div>
                                    <div class="status-info">
                                        <p class="title mb-0 lead font-medium">Preparing</p>
                                    </div>
                                </div>

                                <div class="timeline-item ">
                                    <div class="status-dot"></div>
                                    <div class="status-info">
                                        <p class="title mb-0 lead font-medium">Out for delivery</p>
                                    </div>
                                </div>

                                <div class="timeline-item">
                                    <div class="status-dot"></div>
                                    <div class="status-info">
                                        <p class="title mb-0 lead font-medium">Delivered</p>
                                    </div>
                                </div>

                            </div>

                        </div>


                        <div class="card mb-4">
                            <!-- Store Payment Summary -->
                            <div class="payment-summary">
                                <h6 class="mb-3">Store Payment</h6>
                                <div class="flex-between mb-2 color-gray">
                                    <span>Net total</span>
                                    <span>23.000 KWD</span>
                                </div>
                                <div class="flex-between mb-2 color-gray">
                                    <span>Delivery fees</span>
                                    <span>3.000 KWD</span>
                                </div>
                                <hr>
                                <div class="flex-between">
                                    <p class="m-0">Total</p>
                                    <p class="lead font-medium m-0">23.000 KWD</p>
                                </div>
                            </div>
                        </div>

                        <div class="card mb-4">
                            <!-- Order Summary -->
                            <div class="order-summary ">
                                <h6 class="mb-3">Order Summary</h6>
                                <div class="flex-between mb-2 color-gray">
                                    <span>Net total</span>
                                    <span>300.000 KWD</span>
                                </div>
                                <div class="flex-between mb-2 color-gray">
                                    <span>Delivery fees</span>
                                    <span>8.000 KWD</span>
                                </div>
                                <div class="flex-between mb-2 color-gray">
                                    <span>Promo code</span>
                                    <span class="text-danger">-20.000 KWD</span>
                                </div>
                                <hr>
                                <div class="flex-between">
                                    <p class="lead m-0 font-medium"> Total <span class=" small color-gray">( including VAT )</span></p>
                                    <p class="lead font-medium m-0">23.000 KWD</p>
                                </div>
                                <hr>

                                <!-- Payment Method -->
                                <div class="payment-method">
                                    <div class="flex-between">
                                        <p class="m-0">Payment method</p>
                                        <p class="m-0"><img src="assets/img/knet.png" class="w-20px me-2"><span>K-NET</span></p>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="card">

                            <a href="#" class="flex-between">
                                <div class="d-block">
                                    <p class="m-0  font-medium"> View Invoice / order </p>
                                    <p class="m-0 small color-gray font-light"> order details & payment </p>
                                </div>
                                <div class="d-block">
                                    <i class="icon icon-chevron-right icon-xs color-gray light"></i>
                                </div>
                            </a>
                        </div>

                    </div>

                </div>
            </div> <!-- end -->
        </div> <!-- profile-layout -->
    </div> <!-- container -->
</div> <!-- page -->

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

<div class="modal fade" id="review-product" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body p-0">

                <div class="p-4">

                    <div class="base-border base-border-radius p-2 mb-3">
                        <a href="product-details.php" class="d-flex product-card-wide">
                            <div class="start">
                                <img src="assets/img/thumbs/products/01.jpg" class="product-image">
                            </div>
                            <div class="end">
                                <p class="m-0 product-name"> FUGIFILM XT10 Camera Shutter 30000 67mB all </p>
                                <p class="m-0 color-gray product-quantity"> Playstation 5 </p>
                            </div>
                        </a>
                    </div>


                    <div class="base-border base-border-radius p-3 mb-3">

                        <p class="lead font-medium text-center mb-1"> Rate the Product </p>


                        <div class="feedback-wrapper">
                            <div class="feedback">
                                <div class="rating">
                                    <input type="radio" name="product-rating" id="product-rating-5" value="5">
                                    <label for="product-rating-5"></label>
                                    <input type="radio" name="product-rating" id="product-rating-4" value="4">
                                    <label for="product-rating-4"></label>
                                    <input type="radio" name="product-rating" id="product-rating-3" value="3">
                                    <label for="product-rating-3"></label>
                                    <input type="radio" name="product-rating" id="product-rating-2" value="2">
                                    <label for="product-rating-2"></label>
                                    <input type="radio" name="product-rating" id="product-rating-1" value="1">
                                    <label for="product-rating-1"></label>
                                </div>
                            </div>
                        </div>

                        <div class="flex-between px-3">
                            <p class="small color-gray font-light m-0">Not Satisfied</p>
                            <p class="small color-gray font-light m-0">Very Satisfied</p>
                        </div>

                    </div>

                    <p class="mb-3"> Help others who want to buy this product with feedback </p>

                    <div class="form-group mb-3">
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Write your feedback"></textarea>
                    </div>

                    <a href="#" class="btn btn-primary btn-block"> Send </a>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="review-delivery" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body p-0">

                <div class="p-4">

                    <div class="base-border base-border-radius p-3 mb-3">

                        <p class="lead font-medium text-center mb-1"> Rate Delivery </p>


                        <div class="feedback-wrapper">
                            <div class="feedback">
                                <div class="rating">
                                    <input type="radio" name="delivery-rating" id="delivery-rating-5" value="5">
                                    <label for="delivery-rating-5"></label>
                                    <input type="radio" name="delivery-rating" id="delivery-rating-4" value="4">
                                    <label for="delivery-rating-4"></label>
                                    <input type="radio" name="delivery-rating" id="delivery-rating-3" value="3">
                                    <label for="delivery-rating-3"></label>
                                    <input type="radio" name="delivery-rating" id="delivery-rating-2" value="2">
                                    <label for="delivery-rating-2"></label>
                                    <input type="radio" name="delivery-rating" id="delivery-rating-1" value="1">
                                    <label for="delivery-rating-1"></label>
                                </div>
                            </div>
                        </div>

                        <div class="flex-between px-3">
                            <p class="small color-gray font-light m-0">Not Satisfied</p>
                            <p class="small color-gray font-light m-0">Very Satisfied</p>
                        </div>

                    </div>

                    <p class="mb-3"> Help others who want to buy this product with feedback </p>

                    <div class="form-group mb-3">
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Write your feedback"></textarea>
                    </div>

                    <a href="#" class="btn btn-primary btn-block"> Send </a>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="review-store" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body p-0">

                <div class="p-4">


                    <div class="base-border base-border-radius p-2 mb-3">
                        <a href="product-details.php" class="d-flex flex-center product-card-wide">
                            <div class="start">
                                <img src="assets/img/thumbs/stores/04.png" class="product-image">
                            </div>
                            <div class="end">
                                <p class="m-0 store-name"> 2B Technology </p>
                                <p class="m-0 color-gray product-quantity"> Created at 13 September 2019 </p>
                            </div>
                        </a>
                    </div>

                    <div class="base-border base-border-radius p-3 mb-3">

                        <p class="lead font-medium text-center mb-1"> Rate Store </p>


                        <div class="feedback-wrapper">
                            <div class="feedback">
                                <div class="rating">
                                    <input type="radio" name="store-rating" id="store-rating-5" value="5">
                                    <label for="store-rating-5"></label>
                                    <input type="radio" name="store-rating" id="store-rating-4" value="4">
                                    <label for="store-rating-4"></label>
                                    <input type="radio" name="store-rating" id="store-rating-3" value="3">
                                    <label for="store-rating-3"></label>
                                    <input type="radio" name="store-rating" id="store-rating-2" value="2">
                                    <label for="store-rating-2"></label>
                                    <input type="radio" name="store-rating" id="store-rating-1" value="1">
                                    <label for="store-rating-1"></label>
                                </div>
                            </div>
                        </div>

                        <div class="flex-between px-3">
                            <p class="small color-gray font-light m-0">Not Satisfied</p>
                            <p class="small color-gray font-light m-0">Very Satisfied</p>
                        </div>

                    </div>

                    <p class="mb-3"> Help others who want to buy this product with feedback </p>

                    <div class="form-group mb-3">
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Write your feedback"></textarea>
                    </div>

                    <a href="#" class="btn btn-primary btn-block"> Send </a>

                </div>
            </div>
        </div>
    </div>
</div>