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

                <form action="#" class="edit-user-form">



                    <!-- if profile not completed -30%  -->
                    <div class="alert alert-primary">

                        <div class="row">

                            <div class="col-lg-5 d-flex  align-items-center">
                                <h6 class="m-0"> Edit Profile </h6>
                            </div>

                            <div class="col-lg-7 font-size-small">

                                <div class="row d-flex justify-content-center align-items-center">

                                    <div class="col-lg-3">
                                        <p class="m-0"> Your profile not <br /> completed </p>
                                    </div>

                                    <div class="col-lg-5">
                                        <div class="d-flex justify-content-center align-items-center">
                                            <div class="progress w-100 me-2">
                                                <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <p class="m-0 progress-value color-danger"> 50% </p>
                                        </div>
                                    </div>

                                    <div class="col-lg-4">
                                        <p class="m-0"> Complete these missing </p>
                                        <a href="" data-toggle="modal" data-target="#addBankAccountModal">
                                            <p class="m-0"> <span class="font-weight-light"> Email, Interests, </span> 4 others </p>
                                        </a>
                                    </div>

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

                            </div> <!-- col-lg-8 -->

                        </div>
                    </div>

                    <!-- if profile not completed -70%  -->
                    <div class="alert alert-primary d-none">

                        <div class="row">

                            <div class="col-lg-5 d-flex align-items-center">
                                <h6 class="m-0"> Edit Profile </h6>
                            </div>

                            <div class="col-lg-7 font-size-small">

                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-lg-3">
                                        <p class="m-0"> Your profile not <br /> completed </p>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="d-flex justify-content-center align-items-center">
                                            <div class="progress w-100 me-2">
                                                <div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <p class="m-0 progress-value color-warning"> 50% </p>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <p class="m-0"> Complete these missing </p>
                                        <p class="m-0"> <span class="font-weight-light"> Email, Interests, </span> 4 others </p>
                                    </div>
                                </div> <!-- row -->

                            </div> <!-- col-lg-8 -->

                        </div>
                    </div>

                    <!-- if profile not completed -99%  -->
                    <div class="alert alert-primary d-none">

                        <div class="row">

                            <div class="col-lg-5 d-flex align-items-center">
                                <h6 class="m-0"> Edit Profile </h6>
                            </div>

                            <div class="col-lg-7 font-size-small">

                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-lg-3">
                                        <p class="m-0"> Your profile not <br /> completed </p>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="d-flex justify-content-center align-items-center">
                                            <div class="progress w-100 me-2">
                                                <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <p class="m-0 progress-value color-success"> 75% </p>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <p class="m-0"> Complete these missing </p>
                                        <p class="m-0"> <span class="font-weight-light"> Email, Interests, </span> 4 others </p>
                                    </div>
                                </div> <!-- row -->

                            </div> <!-- col-lg-8 -->

                        </div>
                    </div>

                    <!-- if profile completed 100%  -->
                    <div class="alert alert-primary">

                        <div class="row">

                            <div class="col-lg-5 d-flex align-items-center">
                                <h6 class="m-0"> Edit Profile </h6>
                            </div>

                            <div class="col-lg-7 font-size-small">

                                <div class="row d-flex justify-content-center align-items-center">

                                    <div class="col-lg-6">
                                    </div>

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

                                        <div class="d-flex justify-content-end align-items-center">

                                            <i class="icon icon-check-1 icon-xl color-success me-3"></i>

                                            <div class="d-block">
                                                <p class="m-0"> Great ! </p>
                                                <p class="m-0"> your Profile 100% Completed </p>
                                            </div>
                                        </div>

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

                            </div> <!-- col-lg-8 -->

                        </div>
                    </div>





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

                        <div class="d-block mb-3">
                            <p class="title m-0"> Personal data </p>
                        </div>

                        <div class="card-body mb-0">

                            <div class="row">

                                <div class="col-lg-2">
                                    <div class="edit-image-container image-container relative">

                                        <div class="image-wrapper mb-3">
                                            <img src="assets/img/thumbs/users/user-placeholder.svg" class="img-fluid image-file image">
                                        </div><!-- image-wrapper -->

                                        <div class="text-center">

                                            <div class="d-none">
                                                <input type="file" class="file-input" accept="image/png, image/gif, image/jpeg">
                                            </div>

                                            <div class="d-block">
                                                <a href="#" class="btn btn-primary-faded btn-sm change-image-button mb-2"> Edit photo </a>
                                            </div>
                                            <div class="d-block">
                                                <a href="#" class="btn btn-link color-danger btn-sm" data-toggle="modal" data-target="#remove-user-photo"> Delete </a>
                                            </div>

                                        </div> <!-- text-center -->




                                        <!-- Modal -->
                                        <div class="modal fade" id="remove-user-photo" tabindex="-1">

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

                                                <div class="modal-content">

                                                    <div class="modal-body">

                                                        <div class="text-center">

                                                            <div class="remove-image-wrapper mb-3">
                                                                <img src="assets/img/thumbs/users/02.jpg" class="rounded-circle w-100px">
                                                                <i class="icon icon-remove-2 icon-xxl color-danger remove-icon"></i>
                                                            </div>

                                                            <h5 class="mb-2"> Are you sure you want to <br /> remove your photo ? </h5>
                                                            <p class="color-gray"> Once you hit the delete button, there's no way to recover it, Take a moment to think about it and make sure you're 100% sure before you proceed </p>

                                                        </div>

                                                        <div class="buttons-wrapper text-center">
                                                            <a href="#" class="btn btn-block btn-primary" data-dismiss="modal"> Keep your photo </a>
                                                            <a href="#" class="btn btn-block btn-outline-primary"> Yes, Remove </a>
                                                        </div>

                                                    </div>

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


                                    </div><!-- edit-image-container -->
                                </div><!-- col-lg-3 -->

                                <div class="col-lg-10">

                                    <div class="form-group">
                                        <label> Full name </label>
                                        <input type="text" class="form-control" placeholder="Full name">
                                    </div> <!-- form-group -->

                                    <div class="form-group">
                                        <label> E-mail </label>
                                        <input type="email" class="form-control" placeholder="E-mail">
                                    </div> <!-- form-group -->

                                    <div class="form-group">
                                        <label> Nationality </label>
                                        <select class="form-control select2 mb-3">

                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                    </div> <!-- form-group -->

                                    <div class="form-group">

                                        <label class="main-label"> Radio inline </label>

                                        <div class="input-with-start-label-wrapper">

                                            <div class="custom-control custom-radio custom-control-inline">
                                                <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input" checked>
                                                <label class="custom-control-label" for="customRadioInline1">Male </label>
                                            </div>

                                            <div class="custom-control custom-radio custom-control-inline">
                                                <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
                                                <label class="custom-control-label" for="customRadioInline2"> Female </label>
                                            </div>

                                        </div> <!-- input-with-start-label-wrapper -->

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

                                    <div class="form-group">
                                        <label> Birth date </label>
                                        <input type="text" class="form-control flatpickr" placeholder="Select date">
                                    </div>

                                    <div class="form-group">

                                        <label>Your phone</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 selected 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 class="end-content gap-2">
                                                <i class="icon icon-check-1 color-success"></i>
                                                <a href="#" data-toggle="modal" data-target="#edit-phone-otp-modal" class="btn btn-link btn-sm p-0"> Edit </a>
                                            </div>

                                        </div>

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

                                </div> <!-- col-lg-9 -->

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

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

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

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

                        <div class="d-block mb-3">
                            <p class="title m-0"> Location </p>
                        </div>

                        <div class="card-body mb-0">

                            <div class="row">

                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label> Country </label>
                                        <select class="form-control select2 mb-3">

                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                    </div> <!-- form-group -->
                                </div>

                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label> Governorate </label>
                                        <select class="form-control select2 mb-3">

                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                    </div> <!-- form-group -->
                                </div>

                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label> Area </label>
                                        <select class="form-control select2 mb-3">

                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                    </div> <!-- form-group -->
                                </div>

                            </div>

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

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

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

                        <div class="d-block mb-3">
                            <p class="title m-0"> Job details </p>
                        </div>

                        <div class="card-body mb-0">

                            <div class="row">

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label> Job Title </label>
                                        <select class="form-control select2 mb-3">
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                    </div> <!-- form-group -->
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label> Job Category </label>
                                        <select class="form-control select2 mb-3">
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                    </div> <!-- form-group -->
                                </div>

                            </div>

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

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

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

                        <div class="d-block mb-3">
                            <p class="title m-0"> Interests </p>
                        </div>

                        <div class="card-body mb-0">

                            <div class="select-items-wrapper mb-5">

                                <button data-category-id="1" type="button" class="btn btn-sm btn-select-option me-1 mb-2 active"> TV show </button>
                                <button data-category-id="2" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> music </button>
                                <button data-category-id="3" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> books </button>
                                <button data-category-id="4" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> sport </button>
                                <button data-category-id="5" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> shopping </button>
                                <button data-category-id="6" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> movie </button>
                                <button data-category-id="7" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> games </button>
                                <button data-category-id="8" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> social N </button>
                                <button data-category-id="9" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> shopping shopping </button>

                                <button data-category-id="10" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> games </button>
                                <button data-category-id="11" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> TV show </button>
                                <button data-category-id="12" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> music </button>
                                <button data-category-id="13" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> books </button>
                                <button data-category-id="14" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> sport </button>
                                <button data-category-id="15" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> shopping </button>
                                <button data-category-id="16" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> movie </button>
                                <button data-category-id="17" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> games </button>
                                <button data-category-id="18" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> social N </button>
                                <button data-category-id="19" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> shopping shopping </button>


                            </div><!-- select-items-wrapper -->

                            <input id="my-interests-value" type="text" value="" class="mb-5">

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

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

                    <div class="text-center">
                        <a href="#" type="button" class="btn btn-primary"> Save Changes </a>
                    </div> <!-- text-center -->

                </form> <!-- edit-user-form -->

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

        </div>

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

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

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

<script>
    $(function() {
        circularProgress();
    });
</script>



<!-- Modal -->
<div class="modal fade" id="edit-phone-otp-modal" tabindex="-1">

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

        <div class="modal-content">

            <div class="modal-body">


                <div class="d-block mb-4">
                    <h3 class="bold mb-2"> Enter your OTP </h3>
                    <p class="lead font-light"> Enter the 6 digits code that you received on <br /> your phone : <span class="bold"> +965237262562 </span> </p>
                </div>

                <div class="activate-inputs-container">

                    <div class="activate-inputs sm mb-3">
                        <input class="num1" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                        <input class="num2" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                        <input class="num3" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                        <input class="num4" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                        <input class="num5" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                        <input class="num6" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                    </div><!-- activate-inputs -->

                </div>

                <p class="text-center color-danger mb-2"> Please enter the correct digits </p>

                <div class="count-down-numbers-wrapper text-center mb-2">
                    <p class="lead m-0"> Send code Again (
                        <span class="black" id="minutes">02</span>
                        <span class="black" id="colon">:</span>
                        <span class="black" id="seconds">00</span>
                        )
                    </p>
                </div> <!-- count-down-numbers-wrapper -->

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

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





<div class="modal fade" id="addBankAccountModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title center"> Complete these missing </h5>
                <i class="icon icon-close-circle close-modal" data-dismiss="modal"></i>
            </div>

            <div class="modal-body">

                <p class="text-gray font-light mb-3"> Complete your profile to can earn more and more with no limits </p>

                <ul class="ps-3 mb-4">
                    <li class="mb-2"> Nationality </li>
                    <li class="mb-2"> Nationality </li>
                    <li class="mb-2"> Nationality </li>
                    <li class="mb-2"> Nationality </li>
                    <li class="mb-2"> Nationality </li>
                </ul>




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

            </div>

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