<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>
            @if (empty(auth('customers')->user()))
                <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>
            @endif
            <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>
