@extends('layouts.dashboard')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-6">
            <div class="card">
                @include('notification')
                <div class="card-header">
                    <div style="text-transform:capitalize;display: inline-block;margin: 10px 0 0 0;" class="card-title">Visitor</div>
                    <a style="float: right;margin: 10px 0 20px 0;" href="{{ url('/admin/home/users/visitor') }}" class="btn btn-primary">Go Back</a>
                </div>
                <div class="card-body">
                <form action="{{ url('/admin/home/users/visitor') }}" method="POST" class="pt-3 needs-validation" novalidate enctype="multipart/form-data">
                    @csrf
                    <div class="form-group pb-3">
                        <label class="pb-2">Company Name <span>*</span></label>
                        <input type="text" name="company_name" class="form-control" required placeholder="Company Name...">
                        <div class="invalid-feedback">
                            Please Provide Company Name.
                        </div>
                    </div>
                    <div class="form-group pb-3">
                        <label>Visitor Email <span>*</span></label>
                        <input value="{{ old('email') }}" type="text" id="email" name="email" class="form-control" required placeholder="Visitor Email"/>
                        <div class="invalid-feedback">
                            Please Provide Email.
                        </div>
                    </div>
                    <div class="form-group pb-3">
                        <label>Visitor Mobile <span>*</span></label>
                        <input value="{{ old('mobile') }}" type="text" id="mobile" name="mobile" class="form-control" required placeholder="Visitor Mobile"/>
                        <div class="invalid-feedback">
                            Please Provide Mobile Number.
                        </div>
                    </div>
                    <div class="form-group pb-3">
                        <label>Nationality</label>
                        <select name="nationality" class="form-control" required id="nationalityDropdown">
                            <option value="Indian">Indian</option>
                            <option value="Foreigner">Foreigner</option>
                        </select>
                    </div>
                    <button class="btn btn-primary float-left otpBtn mb-3" id="btn-resend-otp" type="button" onclick="generateOTP(true)">Get OTP</button>
                    <div class="other_fields_wrapper">
                    <input type="hidden" id="visitor_id" class="form-control" required name="visitor_id">
                    <div class="form-group pb-3">
                            <label>Visitor Name <span>*</span></label>
                            <input value="{{ old('name') }}" type="text" id="name" name="name" class="form-control" required placeholder="Visitor Name"/>
                            <div class="invalid-feedback">
                                Please Provide Name.
                            </div>
                        </div>
                    <div class="form-group pb-3">
                        <label>Visitor Address <span>*</span></label>
                        <input value="{{ old('address_1') }}" type="text" id="address_1" name="address_1" class="form-control" required placeholder="Address"/>
                        <div class="invalid-feedback">
                            Please Provide Address.
                        </div>
                    </div>
                    <div class="form-group pb-3">
                        <label>Visitor Address</label>
                        <input value="{{ old('address_2') }}" type="text" id="address_2" name="address_2" class="form-control" required placeholder="Address"/>
                        <div class="invalid-feedback">
                            Please Provide Address.
                        </div>
                    </div>
                    <div class="form-group pb-3">
                        <label>Country <span>*</span></label>
                        <select name="country" id="country" class="list_dropdown form-control" required></select>
                    </div>
                    <div class="form-group pb-3">
                        <label>State <span>*</span></label>
                        <select name="state" id="state" class="list_dropdown form-control" required></select>
                    </div>
                    <div class="form-group pb-3">
                        <label>City <span>*</span></label>
                        <input type="text" name="city" placeholder="Enter City" class="form-control" required></input>
                        <div class="invalid-feedback">
                            Please Provide City.
                        </div>
                    </div>
                    <div class="form-group pb-3">
                        <label>Zip <span>*</span></label>
                        <input type="number" name="zip" placeholder="Enter Zip Code" class="form-control" required></input>
                        <div class="invalid-feedback">
                            Please Provide Zip Code.
                        </div>
                    </div>
                    <div class="form-group pb-3">
                        <label>Alternate Phone Number <span>*</span></label>
                        <input type="number" class="form-control"  required placeholder="Phone Number" name="phone_number">
                        <div class="invalid-feedback">
                            Please Provide Alternate Number.
                        </div>
                    </div>
                    <div class="form-group pb-3">
                        <label>Fax</label>
                        <input type="text" class="form-control" required placeholder="Fax" name="fax">
                        <div class="invalid-feedback">
                            Please Provide Fax Number.
                        </div>
                    </div>
                    <div class="form-group pb-3">
                        <label>Website</label>
                        <input type="text" class="form-control" required placeholder="Website" name="website">
                        <div class="invalid-feedback">
                            Please Provide Website.
                        </div>
                    </div>
                    <div class="form-group pb-3">
                        <label>GST Number</label>
                        <input type="text" class="form-control" required placeholder="GST Number" name="gst_number">
                        <div class="invalid-feedback">
                            Please Provide GST Number.
                        </div>
                    </div>
                    <label>Please Select Your Relevent Business</label>
                    <div class="checkbox">
                    @foreach ($businesses as $business)
                        @if(!isset($business['status']))
                            <label>{{$business->name}}</label>
                            <input type="checkbox" class="checkbodx_style" required name="business[]" value="{{$business->id}}">
                        @else
                            <label>{{__('Businessess Not Added')}}</label>
                            @break
                        @endif
                    @endforeach
                    </div>
                    <input type="submit" class="btn btn-success btn-flat get_badge" style="margin-top:30px" value="Get Badge" />
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modal-otp" data-bs-backdrop="false" data-keyboard="false">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h5 class="modal-title">Verify</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <form id="otp-form">
          @csrf
          <div class="form-group mobileOtpDiv">
            <label for="otp">
              <h5 class="baseTxtOTP" style="display: inline;">Otp Sent to </h5>
              <h5 style="display: inline;" id="mobile_txt"></h5>
            </label>
            <input type="text" class="form-control" id="otp" name="otp">
          </div>
          <div class="form-group emailOtpDiv">
                <label for="otp"><h5 class="baseTxtEmailOTP" style="display: inline;">Otp Sent to </h5>  <h5 style="display: inline;text-transform:lowercase;" id="email_txt"></h5></label>
                <input type="text" class="form-control" id="email-otp" name="email_otp">
            </div>
          <h5 style="color:red" class="mt-3 notification_text">Please Wait For 30 - 60 Seconds for EMAIL OTP Verification Mail</h5>
          <button class="btn btn-light float-left mt-4" id="btn-resend-otp" type="button" onclick="generateOTP(false)">Resend OTP</button>
        </form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="verifyOTP()">Verify</button>
      </div>

    </div>
  </div>
</div>
@endsection
@section('script')
<script>
    $(document).ready(function(){
        $(".other_fields_wrapper").hide();
        $('select[name="country"]').change(function(){
            // Get the selected option value
            var selectedValue = $(this).val();
            if(selectedValue == 'India'){
            $('select[name="state"]').append("<option value='Telangana'>" + 'Telangana' + "</option><option value='Uttrakhand'>" + 'Uttrakhand' + "</option>");
            var options = $('select[name="state"] option:not(:first-child)');
            options.sort(function(a, b) {
                    return a.text.localeCompare(b.text);
            });
            }
        });
    });
    populateCountries("country", "state");
</script>
@endsection