JezK

Edit File: owner_registration.php

<?php
include_once("app/adminObj.php");
$countryList=$customerObj->getCountryList();
$optionData='';
foreach($countryList as $val) 
    {
        $optionData.= '<option class="text-capitalize" 
        value='.$val['country_id'].'>'.$val['display_name'].'</option>';
    }
?>
<!DOCTYPE html>
<html lang="en" class="h-100">

<head>
    <title>Uflexit</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="images/fav.png" type="image/gif" sizes="16x16">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/registration.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<div class="col-md-6 h-100 bg-white ">
                <div class="justify-content-center h-100 d-md-flex flex-column">
                    <div class="row d-flex justify-content-between">
                        <div class="col-md-2 col-2">
                            <img src="">
                        </div>
                        <div class="col-md-8 col-8">
                            <p class="text-center text-clr-blue font-BAHNSCHRIFT">Warehouse Registration</p>
                        </div>
                        <div class="col-md-2 col-2">
                            <a class="text-center text-clr" href="owner_login.php">Login</a>
                        </div>

</div>

<!-- <div class="row d-flex justify-content-center">
                        <div class="offset-md-2 col-md-10 col-8">
                            <ul class="nav nav-tabs">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#owner"><span class="pr-2"><img src="images/owner_unselect.png" alt="owner"></span>Register as a Owner</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#customer"><span class="pr-2"><img src="images/customer_ubselect.png" alt="owner"></span>Register as a Customer</a>
                                </li>
                            </ul>

</div>
                    </div> -->

<div class="tab-content">

<div class="container tab-pane active"><br>
                            <form class="form" action="app/registeration.php" method="post"
                                enctype="multipart/form-data">
                                <div class="row d-flex justify-content-center">

<div class="row d-flex justify-content-around w-100 mb-2">
                                        <div class="col-md-6 marg">
                                            <label for="inputware" class="inpt-label">*Company Name</label>
                                            <div class="input-container">
                                                <input type="text" id="company_name" name="company_name" value=""
                                                    class="form-control frm-input" placeholder="Company Name"
                                                    onchange="return checkExistsOrNot(this.value,'1');" required>
                                            </div>
                                            <div class="error company_name_error"></div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="inputware1" class="inpt-label">*First Name</label>
                                            <div class="input-container">
                                                <input type="text" id="first_name" name="first_name" value=""
                                                    class="form-control frm-input" placeholder="First Name" required onkeyup="return checkLength(this.value,'2');">
                                            </div>
                                            <div class="error first_name_error"></div>
                                        </div>
                                    </div>

<div class="row d-flex justify-content-around w-100 mb-2 mt-2">
                                        <div class="col-md-6 marg">
                                            <label for="inputware1" class="inpt-label">*Last Name</label>
                                            <div class="input-container">
                                                <input type="text" id="last_name" name="last_name" value=""
                                                    class="form-control frm-input" placeholder="Last Name" required onkeyup="return checkLength(this.value,'3');">
                                            </div>
                                            <div class="error last_name_error"></div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="inputAddress" class="inpt-label">*Designation</label>
                                            <div class="input-container">
                                                <input type="text" id="designation" name="designation" value=""
                                                    class="form-control frm-input" placeholder="Designation" required onkeyup="return checkLength(this.value,'4');">
                                            </div>
                                            <div class="error designation_error"></div>
                                        </div>
                                    </div>

<div class="row d-flex justify-content-around w-100 mb-2 mt-2">
                                        <div class="col-md-6 marg">
                                            <label for="inputCity" class="inpt-label">*Email</label>
                                            <div class="input-container">
                                                <input type="email" id="email" name="email" value=""
                                                    class="form-control frm-input " placeholder="Enter Email Address"
                                                    onkeyup="return checkExistsOrNot(this.value,'2');" required>
                                            </div>
                                            <div class="error email_error"></div>
                                        </div>
                                        <div class="col-md-6 ">
                                            <label for="inputEmail" class="inpt-label">*Password</label>
                                            <div class="input-container">
                                                <input type="password" name="password" class="form-control frm-input"
                                                    placeholder="Enter Password" value="" id="password" required>
                                                <i class="fa fa-eye-slash icon icon-display" id="togglePassword"></i>
                                            </div>
                                            <div class="error password_error"></div>
                                        </div>
                                    </div>

<div class="row d-flex justify-content-around w-100 mb-2 mt-2">

<div class="col-md-6 marg">
                                            <label for="inputLocation" class="inpt-label">*Select Country</label>
                                            <div class="input-container">
                                                <select id="country" name="country" class="form-control frm-input text-capitalize"
                                                    required onchange="return getcity(this.value);" required>
                                                    <option value=""  >Select Country</option>
                                                    <?= $optionData;?>
                                                </select>
                                            </div>
                                            <div class="error country_error"></div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="inputEmail" class="inpt-label">*City</label>
                                            <div class="input-container">

<select name="city" id="city" class="form-control frm-input text-capitalize">
                                                    <option value="">Select City</option>
                                                </select>

</div>
                                            <div class="error city_error"></div>

</div>

</div>

<div class="row d-flex justify-content-around w-100 mb-2 mt-2">
                                        <div class="col-md-3 marg">
                                            <label for="inputPhone" class="inpt-label">Country Code</label>
                                            <div class="input-container form-control drop-down">

<select id="mobile_country_code"  name="mobile_country_code"
                                                    class="form-control  frm-input text-capitalize">
                                                    <option value="">Select</option>
                                                    <option value="966" class="en"
                                                        style="background-image:url('images/saudi arabia.png');background-size: 45px 20px;">
                                                        +966</option>
                                                    <option value="971" class="en"
                                                        style="background-image:url('images/uae.png');background-size: 45px 20px;">
                                                        +971</option>
                                                    <option value="962" class="en"
                                                        style="background-image:url('images/jordan.png');background-size: 45px 20px;">
                                                        +962</option>
                                                </select>
                                            </div>

</div>

<div class="col-md-3 marg">
                                            <label for="inputPhone" class="inpt-label">*Phone Number</label>
                                            <div class="input-container pr-md-2 shadow-none">
                                                <input type="text" name="mobile_number" class="form-control frm-input"
                                                    value="" placeholder="Phone Number" id="mobile_number"
                                                    onkeyup="return checkExistsOrNot(this.value,'3');"
                                                    onkeypress="return checkPhone(event)" required>
                                            </div>
                                            <div class="error mobile_number_error"></div>
                                        </div>

<div class="col-md-6 marg">
                                            <label for="inputEmail" class="inpt-label">*Address</label>
                                            <div class="input-container">
                                                <input type="text" id="address" name="address" value=""
                                                    class="form-control frm-input" placeholder="Address">
                                            </div>
                                            <div class="error address_error"></div>

</div>
                                    </div>

<div class="row d-flex justify-content-around w-100 mb-2 mt-2">
                                        <div class="col-md-6 marg">
                                            <label for="inputPostalCode" class="inpt-label">Postal Code
                                                (optional)</label>
                                            <div class="input-container">
                                                
                                                <input id="zip" name="zip" type="text" class="form-control frm-input"
                                                    placeholder="Postal Code">
                                            </div>
                                            <div class="error postal_code_error"></div>
                                        </div>
                                        <div class="col-md-6">
                                        </div>

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

</div>

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

</html>
<?php include_once("scriptsLinks.php");?>

if (country_id == 1) {
        // $('.button span').css('display','block');
        $('.button span').html('+966');
        $('.button span').css('background-image',
            'url("http://uflexit.krify.com/uflexit-local/images/saudi arabia.png")');

// $('#mobile_country_code option:selected').removeAttr('selected');
        // $("#mobile_country_code option[value='966']").attr("selected", "selected");
        // $("#mobile_country_code ").attr('data-img-src');

} else if (country_id == 2) {
        $('.button span').html('+971');
        $('.button span').css('background-image', 'url("http://uflexit.krify.com/uflexit-local/images/uae.png")');

// $('#mobile_country_code option:selected').removeAttr('selected');
        // $("#mobile_country_code option[value='971']").attr("selected", "selected");

} else if (country_id == 3) {

$('.button span').html('+962');
        $('.button span').css('background-image', 'url("http://uflexit.krify.com/uflexit-local/images/jordan.png")');

// $('#mobile_country_code option:selected').removeAttr('selected');
        // $("#mobile_country_code option[value='962']").attr("selected", "selected");

}

$.ajax({
        type: "POST",
        url: 'ajax.php',
        data: ({
            action: 'get_cities',
            country_id: country_id
        }),
        success: function(data) {
            $('#city').html(data);
        }
    });

}
$(document).on('click', '#togglePassword', function() {

$(this).toggleClass("fa-eye fa-eye-slash");

var input = $("#password");
    input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
});
// const togglePassword = document.querySelector('#togglePassword');
// const password = document.querySelector('#password');

// togglePassword.addEventListener('click', function (e) {
//     // toggle the type attribute
//     const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
//     password.setAttribute('type', type);
//     // toggle the eye slash icon
//     this.classList.toggle('fa-eye-slash');
// });

jQuery().ready(function() {
    /* Custom select design */
    jQuery('.drop-down').append('<div class="button"></div>');
    jQuery('.drop-down').append('<ul class="select-list"></ul>');
    jQuery('.drop-down select option').each(function() {
        var bg = jQuery(this).css('background-image');
        jQuery('.select-list').append('<li class="clsAnchor"><span value="' + jQuery(this).val() +
            '" class="' + jQuery(this).attr('class') +
            '" style=background-image:;font-size: 14px;' + bg + '>' + jQuery(this).text() +
            '</span></li>');
    });
    jQuery('.drop-down .button').html('<span class="pl-4 pr-0" style="background-image:;font-size: 14px;" ' +
        jQuery('.drop-down select').find(':selected').css('background-image') + '>' + jQuery(
            '.drop-down select').find(':selected').text() + '</span>' +
        '<a href="javascript:void(0);" class="select-list-link"></a>');
    jQuery('.drop-down ul li').each(function() {
        if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) {
            jQuery(this).addClass('active');
        }
    });
    jQuery('.drop-down .select-list span').on('click', function() {

var dd_text = jQuery(this).text();
        var dd_img = jQuery(this).css('background-image');
        var dd_val = jQuery(this).attr('value');
        jQuery('.drop-down .button').html('<span style=background-image:' + dd_img + '>' + dd_text +
            '</span>' + '<a href="javascript:void(0);" class="select-list-link"></a>');
        jQuery('.drop-down .select-list span').parent().removeClass('active');
        jQuery(this).parent().addClass('active');
        $('.drop-down select[name=options]').val(dd_val);
        $('.drop-down .select-list li').slideUp();
    });
    jQuery('.drop-down .button').on('click', 'a.select-list-link', function() {
        jQuery('.drop-down ul li').slideToggle();
    });
    /* End */
});
</script>

.drop-down select {
    display: none;
}

.drop-down .select-list {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin-top: 40px;
    padding: 0;
    background-color: #595959;
    list-style: none;
}

.drop-down .select-list li {
    display: none;
}

.drop-down .select-list li span {
    display: inline-block;
    min-height: 40px;
    min-width: 280px;
    width: 100%;
    padding: 5px 15px 5px 35px;
    background-color: white;
    background-position: left 10px center;
    background-repeat: no-repeat;
    font-size: 16px;
    text-align: left;
    color: black;
    opacity: 0.7;
    box-sizing: border-box;
}

.drop-down .select-list li span:hover,
.drop-down .select-list li span:focus {
    opacity: 1;
}

span.en {
    background-size: 20px 25px;
}

span {
    background-repeat: no-repeat;
    background-size: 20px;
    padding: 3px 35px;
}

span {
    color: gray;
}
</style>