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

<div class="page">

    <div class="container-sm p-0">

        <div class="card mt-4">

            <div class="flex-start gap-3 mb-3">
                <img src="assets/img/card-order-confirmed.png" class="w-50px h-50px">
                <div class="d-block">
                    <h4 class="mb-0 bold"> Order </h4>
                    <h2 class="color-primary font-light"> Confirmed </h2>
                </div>
            </div>

            <div class="card bg-gray-light mb-1">
                <div class="flex-start gap-2">
                    <img src="assets/img/thumbs/cards/04.jpg" class="w-75px h-75px base-border-radius">
                    <div class="d-block">
                        <p class="font-medium mb-0"> PLAYSTATION STORE GIFT CARD - 60 EUR (Croatia) </p>
                        <p class="font-light mb-0"> Playstation </p>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="flex-between">
                    <div class="d-block">
                        <p class="m-0 color-gray font-light"> Date </p>
                        <p class="m-0 font-medium"> Friday, 14 Aug 2042 </p>
                    </div>
                    <div class="d-block">
                        <p class="m-0 color-gray font-light"> Code </p>
                        <div class="flex-center gap-2">
                            <p class="m-0 font-medium color-primary"> 2348526025 </p>
                            <a href="#" class="icon icon-copy"></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card bg-gray-light mb-3">
                <div class="flex-between">
                    <p class="m-0 color-gray font-light"> Amount </p>
                    <p class="bold m-0"> 213 KWD </p>
                </div>
            </div>

            <div class="d-block">
                <a href="#" class="btn btn-primary btn-block" data-toggle="modal" data-target="#review-card"> Review Card </a>
                <a href="shop.php" class="btn btn-outline-primary btn-block"> Continue Shopping </a>
            </div>

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

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


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

<div class="modal fade" id="review-card" 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 the service </p>


                        <div class="feedback-wrapper">
                            <div class="feedback">
                                <div class="rating">
                                    <input type="radio" name="seller-rating" id="rating-5" value="5">
                                    <label for="rating-5"></label>
                                    <input type="radio" name="seller-rating" id="rating-4" value="4">
                                    <label for="rating-4"></label>
                                    <input type="radio" name="seller-rating" id="rating-3" value="3">
                                    <label for="rating-3"></label>
                                    <input type="radio" name="seller-rating" id="rating-2" value="2">
                                    <label for="rating-2"></label>
                                    <input type="radio" name="seller-rating" id="rating-1" value="1">
                                    <label for="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>