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

<div class="page">

    <div class="container p-0">

        <div class="mt-4 mb-3">
            <h3 class="bold"> Checkout </h3>
        </div>

        <div class="row">

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

                <?php foreach (range(1, 3) as $i) { ?>

                    <div class="card mb-4">

                        <div class="w-25 h-10px border-radius-sm overflow-hidden mb-3">
                            <div class="shimmer"></div>
                        </div>

                        <div class="row">

                            <?php foreach (range(1, 4) as $i) { ?>

                                <div class="col-lg-6 mb-3">

                                    <div class="product-card-wide w-100">

                                        <div class="start w-75px h-75px">
                                            <div class="w-100 h-100 border-radius-sm overflow-hidden">
                                                <div class="shimmer"></div>
                                            </div>
                                        </div>

                                        <div class="end flex-column flex-center justify-content-between">

                                            <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                                <div class="shimmer"></div>
                                            </div>

                                            <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                                <div class="shimmer"></div>
                                            </div>

                                            <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                                <div class="shimmer"></div>
                                            </div>

                                            <div class="w-100 h-10px border-radius-sm overflow-hidden">
                                                <div class="shimmer"></div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            <?php } ?>

                        </div>

                    </div>

                <?php } ?>

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

                <div class="card mb-4">
                    <p class="mb-3"> Shipment 2 of 2 </p>
                    <div class="row">
                        <?php foreach (range(4, 7) as $i) { ?>
                            <div class="col-lg-6 mb-3">
                                <?php include 'shared-html/product-card-wide-4.php' ?>
                            </div>
                        <?php } ?>
                    </div>
                </div>

            </div>


            <div class="col-md-6">
                <div class="card mb-4">

                    <div class="w-25 h-10px border-radius-sm overflow-hidden mb-3">
                        <div class="shimmer"></div>
                    </div>


                    <div class="flex-between align-items-center  gap-5  ">

                        <div class="d-block w-75">

                            <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                <div class="shimmer"></div>
                            </div>

                            <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                <div class="shimmer"></div>
                            </div>
                            <div class="w-100 h-10px border-radius-sm overflow-hidden">
                                <div class="shimmer"></div>
                            </div>

                        </div>

                        <div class="d-block w-25">
                            <div class="w-100 h-45px border-radius-sm overflow-hidden">
                                <div class="shimmer"></div>
                            </div>
                        </div>
                    </div>


                </div>

                <div class="card mb-4">

                    <h6 class="mb-3 font-medium">Shipping Address</h6>

                    <button class="btn btn-outline-primary btn-block" data-toggle="modal" data-target="#add-new-address">Add new address</button>

                    <div class="flex-between base-border base-border-radius p-2">
                        <div class="d-block">
                            <p class="m-0 show-lines-1"> Kuwait, Hwayli, Elsafa Walmarwa, , Kuwait, Hwayli, Elsafa Walmarwa, , Kuwait, Hwayli, Elsafa Walmarwa, , Kuwait, Hwayli, Elsafa Walmarwa, ,</p>
                            <p class="m-0 show-lines-1"> Building 4 - Apt. 45</p>
                            <p class="m-0 color-gray"> +966 234534634 </p>
                        </div>
                        <div class="d-block">
                            <a href="#" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#change-address"> Change </a>
                        </div>
                    </div>

                    <hr />

                    <h6 class="mb-3 font-medium">Payment Method</h6>

                    <div class="payment-options">

                        <div class="custom-control custom-radio control-border mb-2">
                            <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>
                            <label class="custom-control-label lead d-flex gap-1" for="customRadio1">
                                <i class="icon icon-wallet-checked icon-xl ms-1 me-1"></i>
                                Wallet
                            </label>
                        </div>

                        <div class="custom-control custom-radio control-border mb-2">
                            <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                            <label class="custom-control-label lead d-flex gap-1" for="customRadio2">
                                <i class="icon icon-cash-on-delivery icon-xl ms-1 me-1"></i>
                                Cash on delivery
                            </label>
                        </div>

                        <div class="custom-control custom-radio control-border mb-2">
                            <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input">
                            <label class="custom-control-label lead flex-start gap-1" for="customRadio3">
                                <img src="assets/img/knet.png" class="border-radius-xs h-20px me-1 ms-1">
                                K net
                            </label>
                        </div>

                    </div>

                    <hr />


                    <div class="w-100 h-45px border-radius-sm overflow-hidden mb-2">
                        <div class="shimmer"></div>
                    </div>


                    <div class="form-group">


                        <div class="relative">

                            <input type="text" class="form-control" placeholder="Enter your code here">

                            <div class="end-content p-0 me-1">
                                <a href="#" class="btn btn-primary-faded btn-sm min-w-100"> Apply </a>
                            </div>

                        </div>
                    </div>

                    <div class="form-group">


                        <div class="relative">

                            <input type="text" class="form-control" placeholder="Enter your code here">



                            <div class="end-content p-0 me-1">
                                <a href="#">
                                    <i class="icon icon-close-circle cursor-pointer color-gray me-2"></i>
                                </a>
                                <a href="#" class="btn btn-primary-faded btn-sm min-w-100 disabled "> Apply </a>
                            </div>

                        </div>
                    </div>

                </div>


                <div class="card mb-4">

                    <div class="summary-item flex-between mb-1">
                        <div class="w-180px h-10px border-radius-sm overflow-hidden mb-2">
                            <div class="shimmer"></div>
                        </div>
                        <div class="w-180px h-10px border-radius-sm overflow-hidden mb-2">
                            <div class="shimmer"></div>
                        </div>
                    </div>

                    <div class="summary-item flex-between mb-1">
                        <div class="w-180px h-10px border-radius-sm overflow-hidden mb-2">
                            <div class="shimmer"></div>
                        </div>
                        <div class="w-180px h-10px border-radius-sm overflow-hidden mb-2">
                            <div class="shimmer"></div>
                        </div>
                    </div>

                    <div class="summary-item flex-between mb-1">
                        <div class="w-180px h-10px border-radius-sm overflow-hidden mb-2">
                            <div class="shimmer"></div>
                        </div>
                        <div class="w-180px h-10px border-radius-sm overflow-hidden mb-2">
                            <div class="shimmer"></div>
                        </div>
                    </div>

                    <div class="summary-item flex-between mb-2">
                        <div class="w-180px h-10px border-radius-sm overflow-hidden mb-2">
                            <div class="shimmer"></div>
                        </div>
                        <div class="w-180px h-10px border-radius-sm overflow-hidden mb-2">
                            <div class="shimmer"></div>
                        </div>
                    </div>

                    <div class="w-100 h-45px border-radius-sm overflow-hidden mb-2">
                        <div class="shimmer"></div>
                    </div>

                </div>


                <!-- Order Summary Section -->
                <div class="card mb-4">
                    <h6 class="mb-3 font-medium">Order Summary</h6>
                    <div class="summary-item flex-between mb-2">
                        <span>Net total</span>
                        <span>300.000 KWD</span>
                    </div>
                    <div class="summary-item flex-between mb-2">
                        <span>Delivery fees</span>
                        <span>9.000 KWD</span>
                    </div>
                    <div class="summary-item flex-between mb-2">
                        <span>Promo code</span>
                        <span class="text-danger">- 20.000 KWD</span>
                    </div>
                    <div class="summary-item flex-between mt-3 pt-3 border-top">
                        <span class="h5 font-medium">Total <span class="small"> ( including VAT ) </span></span>
                        <span class="h5 font-medium">23.000 KWD</span>
                    </div>
                </div>

                <!-- Confirm Order Button -->
                <a href="order-details.php" class="btn btn-primary btn-block">Confirm order</a>

            </div>

        </div>

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

</div>

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

<div class="modal fade" id="add-new-address" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title center"> Add new address </h5>
                <i class="icon icon-close-circle close-modal" data-dismiss="modal"></i>
            </div>

            <div class="modal-body">

                <p class="mb-2 bold"> Address Details </p>

                <div class="form-group mb-2">
                    <input type="text" class="form-control" placeholder="Title">
                </div>

                <div class="row mb-2">
                    <div class="col-md-6">
                        <div class="form-group mb-0">
                            <input type="text" class="form-control" placeholder="First name">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-0">
                            <input type="text" class="form-control" placeholder="Last name">
                        </div>
                    </div>
                </div>

                <div class="row mb-2">
                    <div class="col-lg-6">
                        <div class="form-group mb-0">
                            <select class="form-control select2">
                                <option value="01">Governorate 01</option>
                                <option value="02">Governorate 02</option>
                                <option value="03">Governorate 03</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="form-group mb-0">
                            <select class="form-control select2">
                                <option value="01">Area 01</option>
                                <option value="02">Area 02</option>
                                <option value="03">Area 03</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-group mb-2">
                    <input type="text" class="form-control" placeholder=" Street name">
                </div>

                <div class="form-group mb-2">
                    <input type="text" class="form-control" placeholder="Building number">
                </div>

                <div class="row mb-2">
                    <div class="col-lg-6">
                        <div class="form-group mb-0">
                            <input type="text" class="form-control" placeholder="Apt. no">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group mb-0">
                            <input type="text" class="form-control" placeholder="Floor (optional)">
                        </div>
                    </div>
                </div>

                <div class="form-group mb-2">
                    <input type="text" class="form-control" placeholder="Address description (optional)">
                </div>

                <div class="form-group mb-2">

                    <label> Phone Number no selection </label>

                    <div class="relative">

                        <input type="text" class="form-control input-with-country-code" placeholder="Phone Number" required="">

                        <div class="country-code-container">

                            <select class="d-none" name="country" id="country">
                                <option value="001"> 001 </option>
                                <option value="002"> 002 </option>
                                <option value="003"> 003 </option>
                            </select>

                            <div class="dropdown">
                                <button class="reset-btn dropdown-toggle" type="button" id="choose-country-btn" data-toggle="dropdown">
                                    <img alt="" src="assets/img/flag-kuwait.png" /> +001
                                    <i class="icon icon-chevron-down"></i>
                                </button>

                                <div class="dropdown-menu choose-country-list" aria-labelledby="choose-country-btn">
                                    <a data-value="1" class="dropdown-item" href="#"><img alt="" src="assets/img/flag-kuwait.png" /> +001 </a>
                                    <a data-value="2" class="dropdown-item " href="#"><img alt="" src="assets/img/flag-ksa.png" /> +002 </a>
                                    <a data-value="3" class="dropdown-item " href="#"><img alt="" src="assets/img/flag-uae.png" /> +003 </a>
                                </div>
                            </div> <!-- dropdown -->

                        </div><!-- country-code-container -->

                    </div>

                </div><!-- form-group  -->

                <p class="mb-2 bold"> Address Type </p>

                <div class="attributes-options default mb-2">

                    <label class="option-container option-inline">
                        <input type="radio" checked="checked" name="size" value="1">
                        <span class="checkmark"> House </span>
                    </label>

                    <label class="option-container option-inline">
                        <input type="radio" name="size" value="2">
                        <span class="checkmark"> Apartment </span>

                    </label>

                    <label class="option-container option-inline">
                        <input type="radio" name="size" value="3">
                        <span class="checkmark"> Office </span>

                    </label>



                </div>

                <div class="modal-buttons text-center">
                    <button class="btn btn-primary w-100" data-dismiss="modal"> Add </button>
                </div>

            </div>

        </div> <!-- modal-content -->
    </div> <!-- modal-dialog -->
</div> <!-- modal -->

<div class="modal fade" id="change-address" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title center"> Choose shipping address </h5>
                <i class="icon icon-close-circle close-modal" data-dismiss="modal"></i>
            </div>

            <div class="modal-body p-0">

                <div class="addresses-list mt-4">

                    <div class="custom-control custom-radio control-border address-item mb-3 mx-3 p-1 border rounded position-relative">
                        <input type="radio" id="address2" name="shipping_address" class="custom-control-input" checked>
                        <label class="custom-control-label line-height-1-5 w-100" for="address2">

                            <div class="mb-1">
                                <span class="badge badge-primary-faded badge-sm ">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-3">
                                <div class="color-gray font-light">Address details</div>
                                <div>Kuwait, Hwayli, Elsafa Walmarwa, Building 4, Apt.45</div>
                            </div>

                            <div class="flex-between gap-3">
                                <a href="#" class="btn btn-outline-primary btn-sm btn-block">Continue</a>
                                <a href="#" class="btn btn-danger-faded btn-sm text-danger" style="right: 10px; top: 10px;">
                                    <i class="icon icon-trash"></i>
                                </a>
                            </div>

                        </label>
                    </div>

                    <div class="custom-control custom-radio control-border address-item mb-3 mx-3 p-1 border rounded position-relative">
                        <input type="radio" id="address3" name="shipping_address" class="custom-control-input">
                        <label class="custom-control-label line-height-1-5  w-100" for="address3">
                            <div class="mb-1">
                                <span class="badge badge-primary-faded badge-sm">Fahd akhoya</span>
                            </div>
                            <div class="flex-between">
                                <div class="mb-1">
                                    <div class="text-gray">Receiver name</div>
                                    <div>Fahd Abdulaziz abo salman</div>
                                </div>
                                <div class="mb-1">
                                    <div class="text-gray">Phone number</div>
                                    <div>+966 2345626363</div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="text-gray">Address details</div>
                                <div>Kuwait, Hwayli, Elsafa Walmarwa, Building 4, Apt.45</div>
                            </div>
                            <div class="flex-between gap-3">
                                <a href="#" class="btn btn-outline-primary      btn-sm btn-block">Continue</a>
                                <a href="#" class="btn btn-danger-faded btn-sm text-danger" style="right: 10px; top: 10px;">
                                    <i class="icon icon-trash"></i>
                                </a>
                            </div>
                        </label>
                    </div>
                </div>

            </div>

        </div> <!-- modal-content -->
    </div> <!-- modal-dialog -->
</div> <!-- modal -->