@extends('frontend.layouts.master')
@section('content')

        <div class="cmt-page-title-row" style="background: url({{ asset("$breadcrumb->name") }});">
            <div class="cmt-page-title-row-inner">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-12">
                            <div class="page-title-heading">
                                <h2 class="title">Registration</h2>
                                {{-- <p>Founded In 1996 New York,USA</p> --}}
                            </div>
                            <div class="breadcrumb-wrapper">
                                <span>
                                    <a title="Homepage" href="#">Home</a>
                                </span>
                                <span>Registration</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!--site-main start-->
    <div class="site-main">

        <!--- conatact-section -->
        <section class="cmt-row conatact_2-section clearfix">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="cmt-col-bgcolor-yes cmt-bg cmt-bgcolor-grey z-index-2 spacing-7 mt-0 box-shadow">
                            <div class="cmt-col-wrapper-bg-layer cmt-bg-layer"></div>
                            <div class="row">

                                <div class="col-md-6 mx-auto">
                                    <form id="contact_form" class="contact_form wrap-form clearfix" action="{!! url('member-registration-submit') !!}" method="POST">
                                        @csrf
                                        <input type="hidden" name="service_name" value="{{ $service_name }}">
                                        <input type="hidden" name="service_type" value="{{ $service_type }}">
                                        <input type="hidden" name="service_country" value="{{ $service_country }}">
                                        <input name="segment" type="hidden" value="{{ $segment }}">
                                        <div class="row">
                                            <input name="id" type="hidden" value="{{ $id }}">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <label>
                                                    <span class="text-input"><input name="first_name" type="text" value="" placeholder="First Name" required="required"></span>
                                                </label>
                                            </div>
                                            <div class="col-lg-6">
                                                <label>
                                                    <span class="text-input"><input name="last_name" type="text" value="" placeholder="Last Name" required="required"></span>
                                                </label>
                                            </div>
                                            <div class="col-lg-6">
                                                <label>
                                                    <span class="text-input"><input name="email" type="email" value="" placeholder="Your Email" required="required"></span>
                                                </label>
                                            </div>
                                            <div class="col-lg-6">
                                                <label>
                                                    <span class="text-input"><input name="phone" type="text" value="" placeholder="Your Phone Number" required="required"></span>
                                                </label>
                                            </div>

                                            <div class="col-lg-6">
                                                <label>
                                                    <span class="text-input"><input name="password" type="password" value="" placeholder="Your Password" required="required"></span>
                                                </label>
                                            </div>
                                            <div class="col-lg-6">
                                                <label>
                                                    <span class="text-input"><input name="confirm_password" type="password" value="" placeholder="Confirm Password" required="required"></span>
                                                </label>
                                            </div>

                                            <div class="col-lg-12" id="drop-down">
                                                <label>Application for: </label>
                                                <span class="text-input">
                                                <select name="application" id="application" onChange=showHide()>
                                                    <option value="0" selected>Myself</option>
                                                    <option value="1">Others</option>
                                                   {{-- <option value="0" selected>No</option> --}}
                                                </select>
                                                </span>
                                             </div>

                                             <div class="col-lg-6" style="display: none" name="hidden-panel" id="hidden-panel1">
                                                <span class="text-input"><input name="applicant_first_name" type="text" value="" placeholder="First Name of the Applicant" ></span>
                                            </div>
                                            <div class="col-lg-6" style="display: none" name="hidden-panel" id="hidden-panel2">
                                                <span class="text-input"><input name="applicant_last_name" type="text" value="" placeholder="Last Name of the Applicant" ></span>
                                            </div>
                                            <div class="col-lg-6" style="display: none" name="hidden-panel" id="hidden-panel3">
                                                <span class="text-input"><input name="applicant_phone" type="text" value="" placeholder="Phone number of the Applicant" ></span>
                                            </div>
                                            <div class="col-lg-6" style="display: none" name="hidden-panel" id="hidden-panel4">
                                                <span class="text-input"><input name="applicant_email" type="text" value="" placeholder="Email address of the Applicant" ></span>
                                             </div>
                                            {{-- <div class="col-lg-6">
                                                <label>
                                                    <span class="text-input"><input name="password" type="password" value="" placeholder="Your Password" required="required"></span>
                                                </label>
                                            </div>
                                            <div class="col-lg-6">
                                                <label>
                                                    <span class="text-input"><input name="confirm_password" type="password" value="" placeholder="Confirm Password" required="required"></span>
                                                </label>
                                            </div> --}}
                                        </div>
                                        <button class="submit cmt-btn cmt-btn-size-xs cmt-btn-shape-round cmt-btn-style-fill cmt-icon-btn-right cmt-btn-color-dark mt-5 w-100" type="submit">Register</button>
                                    </form>
                                    @if (empty($service_country))
                                      <div class="m_t">
                                        Do you have an account? <a href="{{ url('member-login/'.$service_type.'/'.$service_name.'/'.$segment.'/'.$id) }}">Click here to Login</a>
                                      </div>
                                      @elseif (empty($service_type))
                                      <div class="m_t">
                                        Do you have an account? <a href="{{ url('member-login/'.$service_country.'/'.$service_name.'/'.$segment.'/'.$id) }}">Click here to Login</a>
                                      </div>
                                    @elseif (!empty($service_country))
                                      <div class="m_t">
                                        Do you have an account? <a href="{{ url('member-login/'.$service_type.'/'.$service_name.'/'.$service_country.'/'.$segment.'/'.$id) }}">Click here to Login</a>
                                      </div>
                                    @else

                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- row end -->
            </div>
        </section>
        <!-- conatact-section end -->

    </div><!--site-main end-->


    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();


        var password = document.getElementById("password")
            , confirm_password = document.getElementById("confirm_password");

        function validatePassword(){
            if(password.value != confirm_password.value) {
                confirm_password.setCustomValidity("Passwords Don't Match");
            } else {
                confirm_password.setCustomValidity('');
            }
        }

        password.onchange = validatePassword;
        confirm_password.onkeyup = validatePassword;

    </script>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > </script>
<script>
    $(document).ready(function() {
        $("#application").change(function() {
            if ($("#application").val() == 0) {
                $("#hidden-panel1").hide()
                $("#hidden-panel2").hide()
                $("#hidden-panel3").hide()
                $("#hidden-panel4").hide()
            } else {
                $("#hidden-panel1").show()
                $("#hidden-panel2").show()
                $("#hidden-panel3").show()
                $("#hidden-panel4").show()
            }
        })
    });
</script>

@endsection