@extends('user.layout.user')
@section('content')


<style>
    .finger_box img{
        width: 100%;
    height: 100%;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    max-height: 194px;
    min-height: 194px;
    }
    .finger_box {
        padding: 25px 0px;
    text-align: center;
    display: grid;
    gap: 15px;
    }
</style>
  <!--start main wrapper-->
  <main class="main-wrapper">
    <div class="main-content">
      <!--breadcrumb-->
				<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
					{{-- <div class="breadcrumb-title pe-3">Dob 2 Apply</div>
					<div class="ps-3">
						<nav aria-label="breadcrumb">
							<ol class="breadcrumb mb-0 p-0">
								<li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
								</li>
								<li class="breadcrumb-item active" aria-current="page">Dob 2 Apply</li>
							</ol>
						</nav>
					</div> --}}
				
				</div>
				<!--end breadcrumb-->

        <div class="row">

            <div class="col-12">
                <div class="alert alert-danger border-0 bg-grd-danger alert-dismissible fade show">
                    <div class="d-flex align-items-center">
                        <div class="font-35 text-white"><span class="material-icons-outlined fs-2">report_gmailerrorred</span>
                        </div>
                        <div class="ms-3">
                           <marquee behavior="" direction=""> <div class="text-white">ATTENTION PLEASE! live यदि ग्राहक के पास किसी भी प्रकार का कोई भी उम्र से संबंधित दस्तावेज उपलब्ध नहीं है तो उसका यहाँ से एंट्री करे बिना दस्तावेज़ की उम्र अपडेट हो जाएगी 100%
                        </div></marquee>
                        </div>
                    </div>
                    <button type="button" class="btn-close text-white" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>

					<div class="col-12 col-xl-12">
            <div class="card">
							<div class="card-body p-4">
								<h5 class="mb-4">ATTENTION PLEASE! PER ADD CUSTOMER CHARGE ₹1500 WILL BE DEDUCTED!
                                </h5>


                                @if (session('success'))
                                <div class="alert alert-success border-0 bg-grd-success alert-dismissible fade show">
                                    <div class="d-flex align-items-center">
                                        <div class="font-35 text-white"><span class="material-icons-outlined fs-2">check_circle</span>
                                        </div>
                                        <div class="ms-3">
                                            <div class="text-white">{{ session('success') }}</div>
                                         
                                        </div>
                                    </div>
                                    <button type="button" class="btn-close text-white" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                              @endif
                              
                              
                              @if (session('error'))
                                <div class="alert alert-danger border-0 bg-grd-danger alert-dismissible fade show">
                                    <div class="d-flex align-items-center">
                                        <div class="font-35 text-white"><span class="material-icons-outlined fs-2">check_circle</span>
                                        </div>
                                        <div class="ms-3">
                                            <div class="text-white">{{ session('error') }}</div>
                                         
                                        </div>
                                    </div>
                                    <button type="button" class="btn-close text-white" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                              @endif
                              
                              @php
    $userid = $user->id;
    $walletBalance = $user->wallet;
@endphp

@if (Auth::user()->dob_charge > $walletBalance)
    <div class="alert alert-danger">
        Insufficient balance in your wallet to proceed. Please recharge your wallet.The charge is ₹{{ Auth::user()->dob_charge }} Per Kyc.
    </div>
@else
    <div class="alert alert-success">
        You have sufficient balance. The charge is ₹{{ Auth::user()->dob_charge }} Per Kyc.
    </div>
@endif


								<form class="row g-3" method="post" enctype="multipart/form-data">
                                    @csrf
									<div class="col-md-3 col-sm-6">
										<label for="input1" class="form-label">First Name</label>
										<input type="text" class="form-control" name="first_name" required value="{{ old('first_name') }}" id="input1">

                                        @include('error.danger',['input' => 'first_name'])
                                        
                                       
									</div>
									<div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Middle Name</label>
										<input type="text" class="form-control" value="{{ old('middle_name') }}" name="middle_name" id="input2" >
                                        @include('error.danger',['input' => 'middle_name'])
                                        
									</div>
                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Last Name</label>
										<input type="text" class="form-control" required value="{{ old('last_name') }}" name="last_name" id="input2" >
                                        @include('error.danger',['input' => 'last_name'])
									</div>


                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Gender</label>
										<select name="gender" required  id="input9" class="form-select">
											<option selected="">Select...</option>
											<option value="Male">Male</option>
											<option value="Female">Female</option>
											<option value="Transgender">Transgender</option>
										</select>
                                        @include('error.danger',['input' => 'gender'])
									</div>


                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Old Dob</label>
										<input type="date" class="form-control" value="{{ old('old_dob') }}"  required name="old_dob" id="input2" >
                                        @include('error.danger',['input' => 'old_dob'])

									</div>


                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">New Dob</label>
										<input type="date" class="form-control" required  value="{{ old('new_dob') }}" name="new_dob" id="input2" >
                                        @include('error.danger',['input' => 'new_dob'])

									</div>


                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Aadhar Number</label>
										<input type="number" required value="{{ old('aadhar_number') }}" class="form-control" name="aadhar_number" id="input2" >
                                        @include('error.danger',['input' => 'aadhar_number'])

									</div>
                                  
                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Mobile No.</label>
										<input type="number" value="{{ old('mobile_number') }}" required class="form-control" name="mobile_number" id="input2" >
                                        @include('error.danger',['input' => 'mobile_number'])

									</div>


                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Birth Place</label>
										<input type="text" class="form-control" required value="{{ old('birth_place') }}"  name="birth_place" id="input2" >
                                        @include('error.danger',['input' => 'birth_place'])

									</div>


                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Father Name</label>
										<input type="text" class="form-control" required value="{{ old('father_name') }}"  name="father_name" id="input2" >
                                        @include('error.danger',['input' => 'father_name'])

									</div>
                                 
                                 
                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Mother Name</label>
										<input type="text" required value="{{ old('mother_name') }}"  class="form-control" name="mother_name" id="input2" >
                                        @include('error.danger',['input' => 'mother_name'])

									</div>
                                 
                                 
                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">House Number</label>
										<input type="text" class="form-control" value="{{ old('house_number') }}" required name="house_number" id="input2" >
                                        @include('error.danger',['input' => 'house_number'])

									</div>


                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Village Name</label>
										<input type="text" class="form-control" required value="{{ old('vilage_name') }}" name="vilage_name" id="input2" >
                                        @include('error.danger',['input' => 'vilage_name'])

									</div>


                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">District</label>
										<input type="text" class="form-control" required value="{{ old('district') }}" name="district" id="input2" >
                                        @include('error.danger',['input' => 'district'])

									</div>


                                  

                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">State</label>
										<select name="state" id="input9" class="form-select">
											<option selected="">Select...</option>
                                            <option value="Andhra Pradesh">Andhra Pradesh</option>
                                            <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                                            <option value="Assam">Assam</option>
                                            <option value="Bihar">Bihar</option>
                                            <option value="Chhattisgarh">Chhattisgarh</option>
                                            <option value="Goa">Goa</option>
                                            <option value="Gujarat">Gujarat</option>
                                            <option value="Haryana">Haryana</option>
                                            <option value="Himachal Pradesh">Himachal Pradesh</option>
                                            <option value="Jharkhand">Jharkhand</option>
                                            <option value="Karnataka">Karnataka</option>
                                            <option value="Kerala">Kerala</option>
                                            <option value="Madhya Pradesh">Madhya Pradesh</option>
                                            <option value="Maharashtra">Maharashtra</option>
                                            <option value="Manipur">Manipur</option>
                                            <option value="Meghalaya">Meghalaya</option>
                                            <option value="Mizoram">Mizoram</option>
                                            <option value="Nagaland">Nagaland</option>
                                            <option value="Odisha">Odisha</option>
                                            <option value="Punjab">Punjab</option>
                                            <option value="Rajasthan">Rajasthan</option>
                                            <option value="Sikkim">Sikkim</option>
                                            <option value="Tamil Nadu">Tamil Nadu</option>
                                            <option value="Telangana">Telangana</option>
                                            <option value="Tripura">Tripura</option>
                                            <option value="Uttar Pradesh">Uttar Pradesh</option>
                                            <option value="Uttarakhand">Uttarakhand</option>
                                            <option value="West Bengal">West Bengal</option>
                                            <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
                                            <option value="Chandigarh">Chandigarh</option>
                                            <option value="Dadra and Nagar Haveli and Daman and Diu">Dadra and Nagar Haveli and Daman and Diu</option>
                                            <option value="Lakshadweep">Lakshadweep</option>
                                            <option value="Delhi">Delhi</option>
                                            <option value="Puducherry">Puducherry</option>
										</select>
                                        @include('error.danger',['input' => 'state'])

									</div>

                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Pincode</label>
										<input type="number" class="form-control" value="{{ old('pincode') }}" required name="pincode" id="input2" >
                                        @include('error.danger',['input' => 'pincode'])

									</div>


                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Purppse</label>
										<select name="purpose" id="input9" class="form-select">
											<option value="dob_2" selected>DOB Update 2</option>
										</select>
                                        @include('error.danger',['input' => 'purpose'])

									</div>



                                    <div class="col-md-3 col-sm-6">
										<label for="input2"  class="form-label">Signature</label>
										<input type="file"  required class="form-control" name="signature" id="input2" accept="image/*">
                                        @include('error.danger',['input' => 'signature'])

									</div>


                                    <div class="col-md-3 col-sm-6">
										<label for="input2" class="form-label">Passport Size Photo</label>
										<input type="file" required class="form-control" name="passport_photo" id="input2" accept="image/*">
                                        @include('error.danger',['input' => 'passport_photo'])

									</div>

                                    <div class="col-12">
										<div class="row">
                                            <div class="col-6 col-md-2">
                                                <label for="input2" class="form-label mt-3">Finger 1</label>
                                                <div class="finger_box">
                                                <img src="{{ url('') }}/finger/d.webp" id="cim1" alt="">
                                                <button id="scanButton" data-id="1" type="button" class="btn btn-primary btn-circle raised rounded-circle d-flex gap-2 wh-48 m-auto capture">
                                                    <svg class="text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z"></path></svg>
                                                </button>
                                                <input class="form-control" type="hidden" id="pic1" name="photo1" style="width: 205px;" id="cim1"required>
                                                <h5 id="q1" class="text-center mt-3"></h5>
                                                </div>
                                            </div>

                                            <div class="col-6 col-md-2">
                                                <label for="input2" class="form-label mt-3">Finger 2</label>
                                                <div class="finger_box">
                                                <img src="{{ url('') }}/finger/d.webp" id="cim2" alt="">
                                                <button id="scanButton" data-id="2" type="button" class="btn btn-primary btn-circle raised rounded-circle d-flex gap-2 wh-48 m-auto capture">
                                                    <svg class="text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z"></path></svg>
                                                </button>
                                                <input class="form-control" type="hidden" id="pic2" name="photo2" style="width: 205px;" id="cim2"required>
                                                <h5 id="q2" class="text-center mt-3"></h5>
                                                </div>
                                            </div>


                                            <div class="col-6 col-md-2">
                                                <label for="input3" class="form-label mt-3">Finger 3</label>
                                                <div class="finger_box">
                                                <img src="{{ url('') }}/finger/d.webp" id="cim3" alt="">
                                                <button id="scanButton" data-id="3" type="button" class="btn btn-primary btn-circle raised rounded-circle d-flex gap-2 wh-48 m-auto capture">
                                                    <svg class="text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z"></path></svg>
                                                </button>
                                                <input class="form-control" type="hidden" id="pic3" name="photo3" style="width: 205px;" id="cim3" required>
                                                <h5 id="q3" class="text-center mt-3"></h5>
                                                </div>
                                            </div>

                                            <div class="col-6 col-md-2">
                                                <label for="input4" class="form-label mt-3">Finger 4</label>
                                                <div class="finger_box">
                                                <img src="{{ url('') }}/finger/d.webp" id="cim4" alt="">
                                                <button id="scanButton" data-id="4" type="button" class="btn btn-primary btn-circle raised rounded-circle d-flex gap-2 wh-48 m-auto capture">
                                                    <svg class="text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z"></path></svg>
                                                </button>
                                                <input class="form-control" type="hidden" id="pic4" name="photo4" style="width: 205px;" id="cim4" required>
                                                <h5 id="q4" class="text-center mt-3"></h5>
                                                </div>
                                            </div>



                                            <div class="col-6 col-md-2">
                                                <label for="input5" class="form-label mt-3">Finger 5</label>
                                                <div class="finger_box">
                                                <img src="{{ url('') }}/finger/d.webp" id="cim5" alt="">

                                                <button id="scanButton" data-id="5" type="button" class="btn btn-primary btn-circle raised rounded-circle d-flex gap-2 wh-48 m-auto capture">
                                                    <svg class="text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z"></path></svg>
                                                </button>
                                                <input class="form-control" type="hidden" id="pic5" name="photo5" style="width: 205px;" id="cim5"required>
                                                <h5 id="q5" class="text-center mt-3"></h5>
                                                </div>
                                            </div>



                                        </div>
									</div>
									<div class="col-md-12">
										<div class="d-md-flex d-grid align-items-center gap-3">
											<button type="submit" class="btn btn-grd-primary px-4">Submit</button>
											{{-- <button type="button" class="btn btn-grd-royal px-4">Reset</button> --}}
										</div>
									</div>
								</form>
							</div>
						</div>
          </div>
         
    </div>
  </main>


@endsection