@extends('layout.master2')
@section('content')
    <section class="py-5">
        <div class="container">
            <div class="text-center">
                <img src="images/login-logo.svg" height="70px" class="">
            </div>
            <div class="row justify-content-center mt-3">
                <meta name="csrf-token" content="{!! csrf_token() !!}">
                <div class="col-md-7">
                    <div class="row py-4 py-sm-4">
                        <div class="col-md-12">
                            <ul class="nav nav-tabs nav-tab2" id="myTab" role="tablist">
                                <li class="nav-item nav-item2">
                                    <a class="nav-link nav-link2 active tabClass
                                "
                                        id="home-tab" data-toggle="tab" href="#home" role="tab"
                                        aria-controls="home-tab">
                                        Individual
                                    </a>
                                </li>

                                <li class="nav-item nav-item2">
                                    <a class="nav-link nav-link2 tabClass pl-sm-5 pl-4" id="profile-tab" data-toggle="tab"
                                        href="#profile" role="tab" aria-controls="profile">Enterprise</a>
                                </li>

                                <li class="nav-item nav-item2">
                                    <a class="nav-link nav-link2 tabClass" id="agent-tab" data-toggle="tab" href="#agent"
                                        role="tab" aria-controls="agent">Agent</a>
                                </li>
                            </ul>
                            <div class="tab-content tab-content2" id="myTabContent">

                                <div class="tab-pane fade show active" id="home" role="tabpanel"
                                    aria-labelledby="home-tab">
                                    <form id="add_individual_booking" method="post" autocomplete="off" novalidate>
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-12 d-flex">
                                                <a class="facebook-btn btn btn-info"
                                                    data-url="{{ url('/login/facebook') }}">
                                                    <span class="button-icon social-icon"><i class="fa fa-facebook social"
                                                            aria-hidden="true"></i></span>
                                                    <span class="button-text social-text">signup with facebook</span>
                                                </a>
                                                <a class="google-btn btn btn-info ml-3"
                                                    data-url="{{ url('/login/google') }}">
                                                    <span class="button-icon social-icon"><i class="fa fa-google"
                                                            aria-hidden="true"></i></span>
                                                    <span class="button-text social-text">signup with Google</span>
                                                </a>
                                            </div>
                                            <div class="col-md-12 my-3">
                                                <div class="d-flex align-items-center">
                                                    <div class="border-bottom w-50"></div>
                                                    <p class="f-20 pl-2 pr-2 mb-0 mt-0 text-white">or</p>
                                                    <div class="border-bottom w-50"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group login-box-label">
                                                    <label class="control-label" for="email">Emai ID</label>
                                                    <input type="text" class="form-control" name="email"
                                                        placeholder="Email" value="{{ old('email') }}" autofocus>
                                                    <br><span id="email" style="display: none; color: red;"> </span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group login-box-label">
                                                    <label class="control-label" for="mobile">Mobile Number</label>
                                                    <input type="text" name="mob_number" class="form-control"
                                                        aria-label="Text input with radio button"
                                                        value="{{ old('mob_number') }}" placeholder="Mobile number">
                                                    <br><span id="mob_number" style="display: none; color: red;"> </span>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group login-box-label mt-sm-3">
                                                    <label class="control-label" for="type_of_customer">Type of
                                                        Customer</label>
                                                    <!--  <select class="form-control" id="customer_type">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <option value="">Individual</option>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </select> -->
                                                    <input type="text" class="form-control"
                                                        aria-label="Text input with radio button" placeholder="Individual"
                                                        style="pointer-events: none;" disabled>
                                                </div>
                                            </div>
                                            <div class="col-md-12">


                                                <div class="form-group login-box-label">
                                                    <label class="control-label" for="passward">Password</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <div class="input-group-text">
                                                                <!-- <img src="{{ asset('assets/images/login-passward.svg') }}" height="22px" alt=""> -->
                                                                <i class="fa fa-eye f-20 d-none" aria-hidden="true"
                                                                    id="open_eye_id_ind"
                                                                    onclick="passwordShowHideInd(this)"></i>
                                                                <i class="fa fa-eye-slash f-20" aria-hidden="true"
                                                                    id="close_eye_id_ind"
                                                                    onclick="passwordShowHideInd(this)"></i>
                                                            </div>

                                                        </div>
                                                        <input type="password" class="form-control"
                                                            aria-label="Text input with radio button" name="password"
                                                            value="{{ old('password') }}" placeholder="Password"
                                                            id="individualPassword" autocomplete="new-password">
                                                        <br><span id="password" style="display: none; color: red;">
                                                        </span>

                                                    </div>
                                                </div>


                                                <!--  <div class="form-group login-box-label mt-sm-3">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     <i class="fa fa-eye f-20 d-none" aria-hidden="true" id="open_eye_id_ind" onclick="passwordShowHideInd(this)"></i>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <i class="fa fa-eye-slash f-20" aria-hidden="true" id="close_eye_id_ind" onclick="passwordShowHideInd(this)"></i>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <input type="password" class="form-control" name="password" placeholder="Password" value="{{ old('password') }}" id="individualPassword">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <span id="password" style="display: none; color: red;"> </span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </div>  -->
                                            </div>
                                            <div class="col-md-12">
                                                <div class="login-otp mt-sm-3">
                                                    <a href="#" class="text-white">OTP send to Mobile number</a>
                                                </div>
                                            </div>
                                        </div>
                                </div>

                                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                    <div class="row justify-content-center">
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="eamil">Emai ID</label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="enterprize_email"
                                                    value="{{ old('enterprize_email') }}" placeholder="Email">
                                                <span id="enterprize_email" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="mobile">Mobile Number</label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="enterprize_mob_number"
                                                    value="{{ old('enterprize_mob_number') }}"
                                                    placeholder="Mobile Number">
                                                <span id="enterprize_mob_number" style="display: none; color: red;">
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="passward">Password</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">

                                                        <div class="input-group-text">
                                                            <!-- <img src="{{ asset('assets/images/login-passward.svg') }}" height="22px" alt=""> -->
                                                            <i class="fa fa-eye f-20 d-none" aria-hidden="true"
                                                                id="open_eye_id" onclick="passwordShowHide(this)"></i>
                                                            <i class="fa fa-eye-slash f-20" aria-hidden="true"
                                                                id="close_eye_id" onclick="passwordShowHide(this)"></i>
                                                        </div>

                                                    </div>
                                                    <input type="password" class="form-control"
                                                        aria-label="Text input with radio button"
                                                        name="enterprize_password"
                                                        value="{{ old('enterprize_password') }}" placeholder="Password"
                                                        id="emailPassword">
                                                    <span id="enterprize_password" style="display: none; color: red;">
                                                    </span>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="customer">Type of Customer</label>
                                                <!--  <select class="form-control">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <option value="">Enterprise</option>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </select> -->
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" placeholder="Enterprise"
                                                    style="pointer-events: none;" disabled>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="passward">PAN Number <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="pan_number"
                                                    value="{{ old('pan_number') }}" placeholder="Pan Number">
                                                <span id="pan_number" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="aadhar">Aadhaar Number <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="adhar_number"
                                                    value="{{ old('adhar_number') }}" placeholder="Aadhaar Number">
                                                <span id="adhar_number" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="company">Company Name <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="company_name"
                                                    value="{{ old('company_name') }}" placeholder="Company Number">
                                                <span id="company_name" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="number *">GSTIN Number <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="gstin_number"
                                                    value=" {{ old('gstin_number') }}" placeholder="GSTIN Number">
                                                <span id="gstin_number" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="passward">Address <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="address"
                                                    value="{{ old('address') }}" placeholder="Address">
                                                <span id="address" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="pincode">Pin Code <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="pincode"
                                                    value="{{ old('pincode') }}" placeholder="Pincode"
                                                    id="pincodeValue">
                                                <span id="pincode" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="country">Country <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="country"
                                                    value="India" placeholder="Country" style="pointer-events: none;">
                                                <span id="country" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <!--  <label class="control-label" for="state">State <span class="text-danger">*</span></label>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <input type="text" class="form-control" aria-label="Text input with radio button" name="state" value="{{ old('state') }}" placeholder="State"> -->
                                                <label class="control-label" for="email">State</label>
                                                <select class="form-control" name="state" id="state">
                                                    <option value="" disabled selected>Select State</option>
                                                    @foreach ($states as $value)
                                                        <option value="{{ $value['id'] }}"
                                                            {{ old('state') == $value['id'] ? 'selected' : '' }}>
                                                            {{ $value['name'] }}</option>
                                                    @endforeach
                                                </select>
                                                <span id="state" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="city">City <span
                                                        class="text-danger">*</span></label>
                                                <!--  <input type="text" class="form-control" aria-label="Text input with radio button" name="city" value="{{ old('city') }}" placeholder="City"> -->
                                                <select id="city_id" class="form-control" autocomplete="off"
                                                    name="city" required>
                                                    <option value="">Select City</option>
                                                </select>
                                                <span id="city" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="location">Location <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="location"
                                                    value="{{ old('location') }}" placeholder="Location">
                                                <span id="location" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-3">
                                            <iframe
                                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30703867.0716799!2d64.40183608457191!3d20.049158955693073!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1649678246649!5m2!1sen!2sin"
                                                width="100%" height="211" class="mt-1" style="border:0;"
                                                allowfullscreen="" loading="lazy"
                                                referrerpolicy="no-referrer-when-downgrade"></iframe>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="agent" role="tabpanel" aria-labelledby="agent-tab">
                                    <div class="row justify-content-center">
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="eamil">Emai ID</label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_email"
                                                    value="{{ old('agent_email') }}" placeholder="Email">
                                                <span id="agent_email" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="mobile">Mobile Number</label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_mob_number"
                                                    value="{{ old('agent_mob_number') }}" placeholder="Mobile Number">
                                                <span id="agent_mob_number" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="passward">Password</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">

                                                        <div class="input-group-text">
                                                            <!-- <img src="{{ asset('assets/images/login-passward.svg') }}" height="22px" alt=""> -->
                                                            <i class="fa fa-eye f-20 d-none" aria-hidden="true"
                                                                id="agent_open_eye_id"
                                                                onclick="passwordAgentShowHide(this)"></i>
                                                            <i class="fa fa-eye-slash f-20" aria-hidden="true"
                                                                id="agent_close_eye_id"
                                                                onclick="passwordAgentShowHide(this)"></i>
                                                        </div>

                                                    </div>
                                                    <input type="password" class="form-control"
                                                        aria-label="Text input with radio button" name="agent_password"
                                                        value="{{ old('agent_password') }}" placeholder="Password"
                                                        id="agentEmailPassword">
                                                    <span id="agent_password" style="display: none; color: red;"> </span>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="customer">Type of Customer</label>
                                                <!--  <select class="form-control">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <option value="">Enterprise</option>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </select> -->
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" placeholder="Agent"
                                                    style="pointer-events: none;" disabled>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="passward">PAN Number <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_pan_number"
                                                    value="{{ old('agent_pan_number') }}" placeholder="Pan Number">
                                                <span id="agent_pan_number" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="aadhar">Aadhaar Number <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_adhar_number"
                                                    value="{{ old('agent_adhar_number') }}" placeholder="Aadhaar Number">
                                                <span id="agent_adhar_number" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="company">Company Name <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_company_name"
                                                    value="{{ old('agent_company_name') }}" placeholder="Company Number">
                                                <span id="agent_company_name" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="number *">GSTIN Number <span
                                                        class="text-danger"></span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_gstin_number"
                                                    value=" {{ old('agent_gstin_number') }}" placeholder="GSTIN Number">
                                                <span id="agent_gstin_number" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="passward">Address <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_address"
                                                    value="{{ old('agent_address') }}" placeholder="Address">
                                                <span id="agent_address" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="pincode">Pin Code <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_pincode"
                                                    value="{{ old('agent_pincode') }}" placeholder="Pincode"
                                                    id="agent_pincodeValue">
                                                <span id="agent_pincode" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="country">Country <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_country"
                                                    value="India" placeholder="Country" style="pointer-events: none;">
                                                <span id="agent_country" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <!--  <label class="control-label" for="state">State <span class="text-danger">*</span></label>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <input type="text" class="form-control" aria-label="Text input with radio button" name="state" value="{{ old('state') }}" placeholder="State"> -->
                                                <label class="control-label" for="agent_state">State</label>
                                                <select class="form-control" name="agent_state">
                                                    <option value="" disabled selected>Select State</option>
                                                    @foreach ($states as $value)
                                                        <option value="{{ $value['id'] }}"
                                                            {{ old('state') == $value['id'] ? 'selected' : '' }}>
                                                            {{ $value['name'] }}</option>
                                                    @endforeach
                                                </select>
                                                <span id="agent_state" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="city">City <span
                                                        class="text-danger">*</span></label>
                                                <!--  <input type="text" class="form-control" aria-label="Text input with radio button" name="city" value="{{ old('city') }}" placeholder="City"> -->
                                                <select id="agent_city_id" class="form-control" autocomplete="off"
                                                    name="agent_city" required>
                                                    <option value="">Select City</option>
                                                </select>
                                                <span id="agent_city" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="location">Location <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_location"
                                                    value="{{ old('agent_location') }}" placeholder="Location">
                                                <span id="agent_location" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-3">
                                            <iframe
                                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30703867.0716799!2d64.40183608457191!3d20.049158955693073!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1649678246649!5m2!1sen!2sin"
                                                width="100%" height="211" class="mt-1" style="border:0;"
                                                allowfullscreen="" loading="lazy"
                                                referrerpolicy="no-referrer-when-downgrade"></iframe>
                                        </div>

                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 col-12 pb-0">
                                        <div class="form-group custom-form-group login-group">
                                            <input type="hidden" name="static_content_id"
                                                value="{{ $staticContent ? $staticContent->id : null }}"
                                                id="static_content_id" />
                                            <input class="filled-in fill-check2" name="terms_and_conditions"
                                                type="checkbox" value="1" id="terms_and_conditions">
                                            <label for="terms_and_conditions" class="pl-4"><a
                                                    href="{{ url('terms-conditions') }}" target="_blank">Accept
                                                    T&C</a></label>
                                            <br><span id="terms_and_conditions_error" style="display: none; color: red;">
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mt-3 mt-sm-2">
                                        <div class="d-flex align-items-center">
                                            <div class="border-bottom w-50"></div>
                                            <p class="f-20 pl-2 pr-2 mb-0 mt-0 text-white">or</p>
                                            <div class="border-bottom w-50"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mt-2">
                                        <div class="text-center individual-box">
                                            <p href="#" class="">Already a Member? <a
                                                    href="{{ url('/') }}" class="text-decoration-underline"> LOG
                                                    IN</a></p>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="row justify-content-center">
                        <div class="col-md-4">
                            <div class="login-btn text-center">
                                <input type="hidden" name="customer_type" value="" id="custType">
                                <button type="submit" class="btn btn-warning">Sign up</button>
                                <a href="{{ url('/') }}" class="btn btn-dark">&nbsp; login &nbsp;</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </form>
        </div>
        </div>
    </section>

    {{-- Modal --}}
    <div class="modal fade" id="terms-condition-modal" tabindex="-1" role="dialog" data-keyboard="false"
        data-backdrop="static" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog  modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="title-section">
                        <h5 class="modal-title" id="terms-condition-title">
                            {{ $staticContent ? $staticContent->title : '' }}
                        </h5>
                    </div>
                </div>
                <div class="modal-body">
                    {!! $staticContent ? $staticContent->content : '' !!}
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">I Agree</button>
                </div>
            </div>
        </div>
    </div>

    <style type="text/css">
        .dissbleClickButton {
            pointer-events: none;
        }
    </style>

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="text/javascript">
        const Toast = swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        $(document).ready(function() {

            //Pincode country dependent dropdown
            $("#agent_pincodeValue").keyup(function() {

                let pincode = $('#agent_pincodeValue').val();

                if (pincode.length == 6) {

                    jQuery.ajax({
                        url: "{{ route('pincode-country-state') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            pincode: pincode
                        },
                        success: function(data) {

                            if (!data.data) {
                                jQuery('select[name="agent_state"]').empty();
                                jQuery('select[name="agent_city"]').empty();

                                $('select[name="agent_state"]').removeClass(
                                    'dissbleClickButton');
                                $('select[name="agent_city"]').removeClass(
                                    'dissbleClickButton');

                                $('select[name="agent_state"]').append('<option value="">' +
                                    'Select State' + '</option>');

                                jQuery.each(data.states, function(key, value) {

                                    $('select[name="agent_state"]').append(
                                        '<option value="' + value.id + '">' + value
                                        .name + '</option>');
                                });

                                swal({
                                    icon: 'error',
                                    title: "Alert",
                                    text: 'Pincode is not serviceable.',
                                    type: "error",

                                    closeOnConfirm: false,
                                    showLoaderOnConfirm: true,
                                });
                                return;
                            } else {
                                $('select[name="agent_state"]').addClass('dissbleClickButton');
                                $('select[name="agent_city"]').addClass('dissbleClickButton');

                                jQuery('select[name="agent_state"]').empty();
                                jQuery('select[name="agent_city"]').empty();

                                if (data.data.state) {
                                    $('select[name="agent_state"]').append('<option value="' +
                                        data.data.state.id + '">' + data.data.state.name +
                                        '</option>');
                                }

                                if (data.data.district) {
                                    $('select[name="agent_city"]').append('<option value="' +
                                        data.data.district.id + '">' + data.data.district
                                        .name + '</option>');
                                }

                                $('#custum-loader').addClass('hidden');
                            }

                        }
                    });
                }


            });


            $("#pincodeValue").keyup(function() {

                let pincode = $('#pincodeValue').val();

                if (pincode.length == 6) {

                    jQuery.ajax({
                        url: "{{ route('pincode-country-state') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            pincode: pincode
                        },
                        success: function(data) {

                            if (!data.data) {
                                jQuery('select[name="state"]').empty();
                                jQuery('select[name="city"]').empty();

                                $('#statestate').removeClass('dissbleClickButton');
                                $('#city_id').removeClass('dissbleClickButton');

                                $('select[name="state"]').append('<option value="">' +
                                    'Select State' + '</option>');

                                jQuery.each(data.states, function(key, value) {

                                    $('select[name="state"]').append('<option value="' +
                                        value.id + '">' + value.name + '</option>');
                                });

                                swal({
                                    icon: 'error',
                                    title: "Alert",
                                    text: 'Pincode is not serviceable.',
                                    type: "error",

                                    closeOnConfirm: false,
                                    showLoaderOnConfirm: true,
                                });
                                return;
                            } else {
                                $('#state').addClass('dissbleClickButton');
                                $('#city_id').addClass('dissbleClickButton');

                                jQuery('select[name="state"]').empty();
                                jQuery('select[name="city"]').empty();

                                if (data.data.state) {
                                    $('select[name="state"]').append('<option value="' + data
                                        .data.state.id + '">' + data.data.state.name +
                                        '</option>');
                                }

                                if (data.data.district) {
                                    $('select[name="city"]').append('<option value="' + data
                                        .data.district.id + '">' + data.data.district.name +
                                        '</option>');
                                }

                                $('#custum-loader').addClass('hidden');
                            }

                        }
                    });
                }


            });

            check = [];

            check = 'individual';

            $("#home-tab").on("click", function(e) {
                $('#profile').removeClass('active');
                $('#agent').removeClass('active');
                $('#home').addClass('active');
                check = 'individual';

            });

            $("#profile-tab").on("click", function(e) {
                $('#home').removeClass('active');
                $('#agent').removeClass('active');
                $('#profile').addClass('active');
                check = 'enterprize';
            });
            $("#agent-tab").on("click", function(e) {
                $('#home').removeClass('active');
                $('#profile').removeClass('active');
                $('#agent').addClass('active');
                check = 'agent';

            });


            //IndividualCustomerSignup

            $("#add_individual_booking").on('submit', function(e) {
                e.preventDefault();

                $("#pan_number").hide();
                $("#email").hide();
                $("#password").hide();

                $("#enterprize_password").hide();
                $("#enterprize_email").hide();
                $("#enterprize_mob_number").hide();
                $("#mob_number").hide();
                $("#country").hide();
                $("#state").hide();
                $("#city").hide();
                $("#location").hide();
                $("#pan_number").hide();
                $("#address").hide();
                $("#adhar_number").hide();
                $("#pincode").hide();
                $("#company_name").hide();
                $("#gstin_number").hide();


                $("#agent_password").hide();
                $("#agent_email").hide();
                $("#agent_mob_number").hide();
                $("#agent_mob_number").hide();
                $("#agent_country").hide();
                $("#agent_state").hide();
                $("#agent_city").hide();
                $("#agent_location").hide();
                $("#terms_and_conditions_error").hide();
                $("#agent_pan_number").hide();
                $("#agent_address").hide();
                $("#agent_adhar_number").hide();
                $("#agent_pincode").hide();
                $("#agent_company_name").hide();
                $("#agent_gstin_number").hide();


                var form = $(this);

                $('#custType').val(check);

                $.ajax({
                    method: 'POST',
                    url: "{{ url('/user-register') }}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: form.serialize(),
                    success: function(data) {

                        if (data.status == 'true') {
                            Toast.fire({
                                icon: 'success',
                                title: data.message
                            }).then(() => {
                                window.location.href = '{{ url('/login') }}';
                            });
                            // swal({
                            //         title: "Success",
                            //         text: data.message,
                            //         type: "success",

                            //         closeOnConfirm: false,
                            //         showLoaderOnConfirm: true,
                            //     },
                            //     function() {
                            //         window.location.href = '{{ url('/login') }}'
                            //     });

                        } else if (data.status == 'false') {
                            $.each(data.message, function(index, value) {

                                if (index == 'email') {

                                    $("#email").show();
                                    $("#email").html(value[0].toString());

                                }

                                if (index == 'mob_number') {

                                    $("#mob_number").show();
                                    $("#mob_number").html(value[0].toString());

                                }

                                if (index == 'password') {

                                    $("#password").show();
                                    $("#password").html(value[0].toString());

                                }

                                if (index == 'enterprize_email') {

                                    $("#enterprize_email").show();
                                    $("#enterprize_email").html(value[0].toString());

                                }


                                if (index == 'enterprize_mob_number') {

                                    $("#enterprize_mob_number").show();
                                    $("#enterprize_mob_number").html(value[0]
                                        .toString());

                                }

                                if (index == 'enterprize_password') {

                                    $("#enterprize_password").show();
                                    $("#enterprize_password").html(value[0].toString());

                                }

                                if (index == 'enterprize_password') {

                                    $("#enterprize_password").show();
                                    $("#enterprize_password").html(value[0].toString());

                                }

                                if (index == 'pan_number') {

                                    $("#pan_number").show();
                                    $("#pan_number").html(value[0].toString());

                                }

                                if (index == 'adhar_number') {

                                    $("#adhar_number").show();
                                    $("#adhar_number").html(value[0].toString());

                                }

                                if (index == 'company_name') {

                                    $("#company_name").show();
                                    $("#company_name").html(value[0].toString());

                                }

                                if (index == 'gstin_number') {

                                    $("#gstin_number").show();
                                    $("#gstin_number").html(value[0].toString());

                                }

                                if (index == 'address') {

                                    $("#address").show();
                                    $("#address").html(value[0].toString());

                                }

                                if (index == 'country') {

                                    $("#country").show();
                                    $("#country").html(value[0].toString());

                                }

                                if (index == 'state') {

                                    $("#state").show();
                                    $("#state").html(value[0].toString());

                                }

                                if (index == 'city') {

                                    $("#city").show();
                                    $("#city").html(value[0].toString());

                                }

                                if (index == 'pincode') {

                                    $("#pincode").show();
                                    $("#pincode").html(value[0].toString());

                                }

                                if (index == 'location') {

                                    $("#location").show();
                                    $("#location").html(value[0].toString());

                                }



                                if (index == 'agent_email') {

                                    $("#agent_email").show();
                                    $("#agent_email").html(value[0].toString());

                                }


                                if (index == 'agent_mob_number') {

                                    $("#agent_mob_number").show();
                                    $("#agent_mob_number").html(value[0].toString());

                                }

                                if (index == 'agent_password') {

                                    $("#agent_password").show();
                                    $("#agent_password").html(value[0].toString());

                                }

                                if (index == 'agent_password') {

                                    $("#agent_password").show();
                                    $("#agent_password").html(value[0].toString());

                                }

                                if (index == 'agent_pan_number') {

                                    $("#agent_pan_number").show();
                                    $("#agent_pan_number").html(value[0].toString());

                                }

                                if (index == 'agent_adhar_number') {

                                    $("#agent_adhar_number").show();
                                    $("#agent_adhar_number").html(value[0].toString());

                                }

                                if (index == 'agent_company_name') {

                                    $("#agent_company_name").show();
                                    $("#agent_company_name").html(value[0].toString());

                                }

                                if (index == 'agent_gstin_number') {

                                    $("#agent_gstin_number").show();
                                    $("#agent_gstin_number").html(value[0].toString());

                                }

                                if (index == 'agent_address') {

                                    $("#agent_address").show();
                                    $("#agent_address").html(value[0].toString());

                                }

                                if (index == 'agent_country') {

                                    $("#agent_country").show();
                                    $("#agent_country").html(value[0].toString());

                                }

                                if (index == 'agent_state') {

                                    $("#agent_state").show();
                                    $("#agent_state").html(value[0].toString());

                                }

                                if (index == 'agent_city') {

                                    $("#agent_city").show();
                                    $("#agent_city").html(value[0].toString());

                                }

                                if (index == 'agent_pincode') {

                                    $("#agent_pincode").show();
                                    $("#agent_pincode").html(value[0].toString());

                                }

                                if (index == 'agent_location') {

                                    $("#agent_location").show();
                                    $("#agent_location").html(value[0].toString());

                                }

                                if (index == 'terms_and_conditions') {

                                    $("#terms_and_conditions_error").show();
                                    $("#terms_and_conditions_error").html(value[0]
                                        .toString());

                                }

                            });

                        }

                    },
                    error: function(data) {
                        var errors = $.parseJSON(data.responseText);

                        console.log('errors', errors);

                        $.each(errors, function(index, value) {



                        });

                    }
                });
            });



            //Ajax Calling while we selecting state


            jQuery('select[name="state"]').on('change', function() {

                var state_id = jQuery(this).val();

                if (state_id) {
                    jQuery.ajax({
                        url: "{{ route('cities-list') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            state_id: state_id
                        },
                        //dataType : "json",
                        success: function(data) {

                            jQuery('select[name="city"]').empty();
                            localStorage.setItem("city", JSON.stringify(data));
                            $('select[name="city"]').append('<option value="' + '' + '">' +
                                'Select City' + '</option>');
                            jQuery.each(data.cities, function(key, value) {

                                $('select[name="city"]').append('<option value="' +
                                    value.id + '">' + value.name + '</option>');
                            });
                        }
                    });


                }
            });

            jQuery('select[name="agent_state"]').on('change', function() {

                var state_id = jQuery(this).val();

                if (state_id) {
                    jQuery.ajax({
                        url: "{{ route('cities-list') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            state_id: state_id
                        },
                        //dataType : "json",
                        success: function(data) {

                            jQuery('select[name="city"]').empty();
                            localStorage.setItem("city", JSON.stringify(data));
                            $('select[name="city"]').append('<option value="' + '' + '">' +
                                'Select City' + '</option>');
                            jQuery.each(data.cities, function(key, value) {

                                $('select[name="agent_city"]').append(
                                    '<option value="' + value.id + '">' + value
                                    .name + '</option>');
                            });
                        }
                    });


                }
            });

        });

        function passwordShowHide(e) {

            if (e.getAttribute('id') == 'close_eye_id') {
                $('#close_eye_id').addClass('d-none');
                $('#open_eye_id').removeClass('d-none');
                $('#emailPassword').prop("type", "text");
            } else {
                $('#close_eye_id').removeClass('d-none');
                $('#open_eye_id').addClass('d-none');
                $('#emailPassword').prop("type", "password");
            }

        }

        function passwordAgentShowHide(e) {

            if (e.getAttribute('id') == 'agent_close_eye_id') {
                $('#agent_close_eye_id').addClass('d-none');
                $('#agent_open_eye_id').removeClass('d-none');
                $('#agentEmailPassword').prop("type", "text");
            } else {
                $('#agent_close_eye_id').removeClass('d-none');
                $('#agent_open_eye_id').addClass('d-none');
                $('#agentEmailPassword').prop("type", "password");
            }

        }

        function passwordShowHideInd(e) {

            if (e.getAttribute('id') == 'close_eye_id_ind') {
                $('#close_eye_id_ind').addClass('d-none');
                $('#open_eye_id_ind').removeClass('d-none');
                $('#individualPassword').prop("type", "text");
            } else {
                $('#close_eye_id_ind').removeClass('d-none');
                $('#open_eye_id_ind').addClass('d-none');
                $('#individualPassword').prop("type", "password");
            }

        }

        $(document).on('click', '.facebook-btn, .google-btn', function() {
            if (!$('#terms_and_conditions').is(":checked")) {
                Toast.fire({
                    icon: 'warning',
                    title: 'Please accept terms and conditions.'
                }).then(() => {

                });
                return;
            }

            window.open($(this).data('url'), '_blank');
        })

        $('#terms_and_conditions').change(function() {
            if ($(this).is(":checked")) {
                $('#terms-condition-modal').modal('show');
            }
        })
    </script>
@endsection