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

                    <p class="lead font-medium"> Settings </p>



                    <div class="d-block border-bottom  py-3 ">

                        <p class="small font-light color-gray mb-2"> Profile </p>

                        <div class="link-with-end-icon">
                            <div class="start">
                                <span class="text text-black"> Allow search by Email </span>
                            </div>
                            <div class="end">

                                <div class="form-group m-0">

                                    <div class="d-flex">
                                        <div class="custom-switch-wrapper me-2">
                                            <input type="checkbox" name="switch2" id="switch2" class="custom-checkbox" checked />
                                            <label for="switch2" class="checkbox-label"></label>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>


                    </div>

                    <div class="d-block border-bottom  py-3 ">

                        <p class="small font-light color-gray mb-2"> Data Sharing </p>

                        <div class="link-with-end-icon">
                            <div class="start">
                                <span class="text text-black"> Allow 3rd-party analytics </span>
                            </div>
                            <div class="end">

                                <div class="form-group m-0">

                                    <div class="d-flex">
                                        <div class="custom-switch-wrapper me-2">
                                            <input type="checkbox" name="switch3" id="switch3" class="custom-checkbox" checked />
                                            <label for="switch3" class="checkbox-label"></label>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>


                    </div>

                    <div class="d-block border-bottom  py-3 ">

                        <div class="link-with-end-icon">

                            <div class="start">
                                <i class="icon icon-language text-black active"></i>
                                <span class="text text-black"> Languages </span>
                            </div>

                            <div class="end">

                                <div class="dropdown select w-180px">

                                    <button class="btn base-border w-100" type="button" data-toggle="dropdown">
                                        <div class="start flex-start gap-2 w-100">
                                            <span> English </span>
                                        </div>
                                        <div class="end">
                                            <i class="icon icon-chevron-down icon-xs color-base-text m-0"></i>
                                        </div>
                                    </button>

                                    <div class="dropdown-menu p-0 text-start w-100">

                                        <a class="dropdown-item active" href="#">
                                            <div class="flex-start py-2">
                                                English
                                            </div>
                                        </a>

                                        <a class="dropdown-item " href="#">
                                            <div class="flex-start py-2">
                                                العربية
                                            </div>
                                        </a>



                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="d-block border-bottom  py-3 ">

                        <div class="link-with-end-icon">

                            <div class="start">
                                <i class="icon icon-global text-black active"></i>
                                <span class="text text-black"> Country </span>
                            </div>

                            <div class="end">

                                <div class="dropdown select w-180px">

                                    <button class="btn base-border w-100" type="button" data-toggle="dropdown">
                                        <div class="start flex-start gap-2 w-100">
                                            <img src="assets/img/flags/kuwait.svg" class="w-20px">
                                            <span> kuwait</span>
                                        </div>
                                        <div class="end">
                                            <i class="icon icon-chevron-down icon-xs color-base-text m-0"></i>
                                        </div>
                                    </button>

                                    <div class="dropdown-menu p-0 text-start w-100">

                                        <a class="dropdown-item" href="#">
                                            <div class="flex-start py-2">
                                                <img src="assets/img/flag_1.png" class="w-20px ms-1 me-2">
                                                Kuwait
                                            </div>
                                        </a>

                                        <a class="dropdown-item active" href="#">
                                            <div class="flex-start py-2">
                                                <img src="assets/img/flags/egypt.svg" class="w-20px ms-1 me-2">
                                                Egypt
                                            </div>
                                        </a>

                                        <a class="dropdown-item" href="#">
                                            <div class="flex-start py-2">
                                                <img src="assets/img/flags/ksa.svg" class="w-20px ms-1 me-2">
                                                Saudi Arabia
                                            </div>
                                        </a>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="d-block border-bottom  py-4 ">

                        <div class="link-with-end-icon">

                            <div class="start">

                                <i class="icon icon-customer-support text-black active"></i>

                                <span class="text text-black"> Currency </span>

                            </div>

                            <div class="end">

                                <div class="flex-center h-45px border-radius-sm base-border w-180px">

                                    <p class="m-0"> KWD </p>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="d-block border-bottom py-4 ">

                        <a href="profile-blocked-users.php" class="link-with-end-icon ">
                            <div class="start">
                                <i class="icon icon-user-block text-black active"></i>
                                <span class="text text-black"> Blocked Users </span>
                            </div>
                            <div class="end">
                                <i class="icon icon-chevron-right text-black"></i>
                            </div>
                        </a>

                    </div>

                    <div class="d-block py-4">

                        <a href="#" class="link-with-end-icon " data-toggle="modal" data-target="#delete-post-modal">
                            <div class="start">
                                <i class="icon icon-trash text-black active"></i>
                                <span class="text text-black"> Delete my Account </span>
                            </div>
                            <div class="end">
                                <i class="icon icon-chevron-right text-black"></i>
                            </div>
                        </a>

                    </div>



                </div>

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

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

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

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

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






<div class="modal fade" id="delete-post-modal" tabindex="-1">

    <div class="modal-dialog modal-sm">

        <div class="modal-content">

            <div class="modal-body">

                <div class="mb-3 text-center">
                    <img src="assets/img/delete.svg" class="w-70px">
                </div>

                <h6 class="bold text-center mb-3"> Are you sure you want to Delete this account permanently ? </h6>

                <p> Reason of delete your account </p>

                <div class="delete-your-account-select-wrapper">

                    <select class="form-control mb-4" id="delete-reason-select">
                        <option> Choose reason </option>
                        <option> 1 </option>
                        <option> 2 </option>
                        <option> 3 </option>
                        <option> 4 </option>
                        <option> 5 </option>
                        <option value="other"> other </option>
                    </select>

                    <div class="other-wrapper" style="display:none;">
                        <div class="form-group mb-3">
                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Write your Reason "></textarea>
                        </div>
                    </div><!-- other-wrapper -->

                </div> <!-- delete-your-account-select-wrapper -->


                <div class="modal-buttons flex-start gap-3 text-center">
                    <button class="btn btn-danger w-100" data-dismiss="modal"> Delete </button>
                    <button class="btn btn-outline-primary w-100" data-dismiss="modal"> Cancel </button>
                </div>

            </div>

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

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

</div> <!-- modal -->