<div class="checkout-form-header pb-3 pt-4 mt-md-0 mt-5 col-md-12 text-center px-0">
    <div class="form-header-image">
        <img src="{{ asset('/front/images/emblem.svg') }}" width="70" alt="">
    </div>
</div>
<div class="col-lg-12 errors-checkout" id="errors"></div>
<?php if (!isset($customer_id)) { ?>
    <div class="col-md-12 px-md-5 px-3">
        <div class="row">
            <div class="col-md-12 form-group mb-lg-4">
                <button id="alreadyHaveAcount" class="btn btn-primary btn-lg px-4 border-0 shadow ">Already Have An Account?</button>
                <a id="forgot_password" style="float:right; margin-top: 10px; display:none;" href="/forgot_password" target="_blank">Forgot Password ?</a>

                <button id="registerNow" class="btn btn-primary btn-lg px-4 border-0 shadow ">Register Now</button>

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

<form method="post" id="step1" name="step1" >

    <input type="hidden" name="customerType" id="customerType" value="<?php echo $package["category_id"]; ?>" />
    <input type="hidden" name="title" id="title" value="Mr" />
    <div class="col-md-12 px-md-5 px-3">
        <div class="row">

            <div class="col-md-12 form-group mb-lg-4">

                <label class="font-weight-bold">I am A</label>
                <div class="row justify-content-between mx-0">

                    @foreach($customerTypes as $key =>$customerType)
                    <button id="<?php echo $key; ?>" type="button" data-value="<?php echo $key; ?>" data-name="customerType" class="btn btn-outline-dark col-md-5 mb-md-0 mb-3 btn-lg customerType step1-action"><?php echo $customerType == 'HomeOwner' ? 'Home Owner' : $customerType ; ?></button>
                    @endforeach

                </div>
            </div>
            <div class="col-md-12 form-group mb-lg-4">
                <label class="d-block font-weight-bold">Title</label>
                <div class="btn-group d-flex" role="group" aria-label="Title">
                    <button type="button" id="Mr" data-name="title" data-value="Mr" class="btn btn-outline-dark btn-lg col title step1-action <?php if ($title == "Mr") { ?> bg-primary active <?php } ?>">Mr</button>
                    <button type="button" id="Mrs" data-name="title" data-value="Mrs" class="btn btn-outline-dark btn-lg col title step1-action <?php if ($title == "Mrs") { ?> bg-primary active <?php } ?>">Mrs</button>
                    <button type="button" id="Ms" data-name="title" data-value="Ms" class="btn btn-outline-dark btn-lg col title step1-action <?php if ($title == "Ms") { ?> bg-primary active <?php } ?>">Ms</button>
                    <button type="button" id="Miss" data-name="title" data-value="Miss" class="btn btn-outline-dark btn-lg col title  step1-action <?php if ($title == "Miss") { ?> bg-primary active <?php } ?>">Miss</button>
                </div>
            </div>
            <div class="col-md-6 form-group mb-lg-4">
                <label class="font-weight-bold">First Name</label>
                <input type="text" name="first_name" id="first_name" value="<?php echo isset($firstName) ? $firstName : "" ?>" class="form-control bg-light form-control-lg">
            </div>
            <div class="col-md-6 form-group mb-lg-4">
                <label class="font-weight-bold">Last Name</label>
                <input type="text" name="last_name" id="last_name" value="<?php echo isset($lastName) ? $lastName : "" ?>" class="form-control bg-light form-control-lg">
            </div>
            <div class="col-md-6 form-group mb-lg-4">
                <label class="font-weight-bold">Telephone Number</label>
                <input type="number" name="phone" id="phone" value="<?php echo isset($phone) ? $phone : "" ?>" class="form-control bg-light form-control-lg">
            </div>
            <div class="col-md-6 form-group mb-lg-4">
                <label class="font-weight-bold">Email Address</label>
                <input type="email" name="email" id="email" value="<?php echo isset($emailAddress) ? $emailAddress : "" ?>" class="form-control bg-light form-control-lg"  >
            </div>

            <div class="col-md-6 form-group mb-lg-4">
                <label class="font-weight-bold">Password</label>              
                <input type="password" name="password" id="password" value=""  class="form-control bg-light form-control-lg"  >
                <button type="button" class="btn btn-lg show-password"><i class="fas fa-eye"></i></button>
            </div>

            <div class="col-md-6 form-group mb-lg-4">
                <label class="font-weight-bold">Confirm Password</label>
                <input type="password" name="password_confirmation" id="password_confirmation" class="form-control bg-light form-control-lg"  >
                <button type="button" class="btn btn-lg show-password"><i class="fas fa-eye"></i></button>
                
            </div>
            <div class="col-md-12 text-center pt-2 pb-5">
            

                <button type="button" class="btn btn-primary bg-black-gradiant btn-lg px-4 border-0 shadow next-step1">
                    Next
                    <i class="fas fa-location-arrow pl-2"></i></button>
            </div>
        </div>
    </div>
</form>

<form method="post" id="login" name="login" >
    <div class="col-md-12 px-md-5 px-3">
        <div class="row">
            <div class="col-md-12 form-group mb-lg-4">
                <label class="font-weight-bold">Please Enter Your Email Address</label>
                <input placeholder="Email Address" type="email" name="email" id="email" value="<?php echo isset($emailAddress) ? $emailAddress : "" ?>" class="form-control bg-light form-control-lg"  >
            </div>
            <div class="col-md-12 form-group mb-lg-4">
                <label class="font-weight-bold">Please Enter Your Password</label>
                <input type="password" name="password" id="password" value="" class="form-control bg-light form-control-lg" placeholder="Password">
            </div>

            <div class="col-md-12 text-center pt-2 pb-5">
                
                <button type="button" class="btn btn-primary bg-black-gradiant btn-lg px-4 border-0 shadow next-step-login">Next
                    <i class="fas fa-location-arrow pl-2"></i></button>
            </div>
        </div>
    </div>

</form>

<style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
</style>