<?php
isset($_GET['authModal']) ? '' : include 'header.php';
?>

<div class="page center-content flex-center">

    <div class="container p-0">

        <div class="auth-layout">

            <div class="start">
                <div class="image-wrapper">
                    <img src="assets/img/auth/auth-bg-lg.jpg">
                </div>
            </div>

            <div class="end">

                <div class="data-wrapper">

                    <div class="data-wrapper-start">

                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div class="flex-center gap-2">
                                <a href="#" class="auth-back flex-center color-gray"> <i class="icon icon-arrow-left"></i> </a>
                                <img src="assets/img/logo-wide-black.svg" class="h-30px">
                            </div>
                            <a href="#" class="close-modal" data-dismiss="modal"> <i class="icon icon-close-circle"></i> Close </a>
                        </div>

                        <div class="text">
                            <h2 class="bold  mb-2"> Complete your profile </h2>
                            <p class="lead"> Please complete your info to enjoy all Kashkom <br /> features </p>
                        </div>

                        <div class="form-wrapper mb-4">

                            <form class="form">

                                <div class="form-group">
                                    <label> Full Name </label>
                                    <input type="text" class="form-control" placeholder="Ex: Omar Sultane">
                                    <small class="form-text invalid-feedback"> Please enter your full name </small>
                                </div>

                                <div class="form-group">

                                    <label class="main-label"> Gender </label>

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

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

                                        <div class="custom-control custom-radio custom-control-inline m-0">
                                            <input type="radio" id="customRadioInline2" name="customRadioInline1" 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> Phone Number </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" 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  -->

                                <a href="profile-my-profile.php" class="btn btn-primary w-100"> Continue </a>

                            </form>

                        </div> <!-- form-wrapper -->

                    </div>



                    <div class="data-wrapper-end">
                        <div class="links-and-help-btn">
                            <div class="help-btn-wrapper mb-3">
                                <a href="#" class="need-help-button"> <i class="fab fa-whatsapp fa-lg"></i> Need Help ? </a>
                            </div>
                            <div class="links-wrapper">
                                <a href="#" class="me-3"> Privacy Policy </a>
                                <a href="#"> Terms & Conditions </a>
                            </div>
                        </div>
                    </div>

                </div> <!-- data-wrapper -->

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

        </div> <!-- auth-layout -->

    </div>

</div> <!-- page -->
<?php
isset($_GET['authModal']) ? '' : include 'footer.php';
?>