@extends('boothagent.layout.app')

@section('title')
   वोटर जोड़े
@endsection

@section('header')
   <a onclick="history.back()"><i class="fa-solid fa-arrow-left"></i></a>
   <h2><img src="{{asset('assets/booth/images/header-voteradd.svg')}}" class="img-fluid" alt="Image"> वोटर जोड़े</h2> 
@endsection

@section('content')
   <!-- Body -->
   <div class="mainwrapper voteradd_screen">
      <div class="container">
         <div class="commonform">
            <form action="{{ route('bavoterlist.store') }}" method="post" class="form-horizontal" enctype="multipart/form-data"> 
               @csrf
               <div class="form-group" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="900">
                  <label for="votername"><img src="{{asset('assets/booth/images/profileicon1.svg')}}" class="img-fluid" alt="Voter Name"></label>
                  <input type="text" name="name" id="votername" class="form-control" placeholder="वोटर नाम">
               </div>
               <div class="form-group" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="900">
                  <label for="fathername"><img src="{{asset('assets/booth/images/profileicon1.svg')}}" class="img-fluid" alt="Father Name"></label>
                  <input type="text" name="father_name" id="fathername" class="form-control" placeholder="पिता का नाम">
               </div>
               <div class="form-group custom-select" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="900">
                  <label for="gender"><img src="{{asset('assets/booth/images/gendaricon.png')}}" class="img-fluid" alt="Icon"></label>
                  <select class="form-select selectdropdownjs" name="sex" id="gender">
                     <option value="" selected>जेंडर</option>
                     <option value="मेल">मेल</option>
                     <option value="फीमेल">फीमेल</option>
                     <option value="अन्य">अन्य</option>
                  </select>
               </div>
               <div class="form-group" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="900">
                  <label for="age"><img src="{{asset('assets/booth/images/ageicon.png')}}" class="img-fluid" alt="Voter Age"></label>
                  <input type="number" name="age" id="age" class="form-control" placeholder="उम्र">
               </div>
               <div class="form-group" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="900">
                  <label for="phonenumber"><img src="{{asset('assets/booth/images/votericon2.png')}}" class="img-fluid" alt="Mobile Number"></label>
                  <input type="text" name="phone_no" id="phonenumber" class="form-control" placeholder="वोटर मोबाइल नंबर">
               </div>
               <div class="form-group" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="900">
                  <label for="blocknumber"><img src="{{asset('assets/booth/images/blocknumber.png')}}" class="img-fluid" alt="Block Number"></label>
                  <input type="number" name="plot_no" id="blocknumber" class="form-control" placeholder="मकान नंबर">
               </div>
               <div class="form-group" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="900">
                  <label for="areaname"><img src="{{asset('assets/booth/images/areaicon.png')}}" class="img-fluid" alt="Area Name"></label>
                  <input type="text" name="area_name" id="areaname" class="form-control" placeholder="एरिया का नाम">
               </div>
               <div class="form-group" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="900">
                  <label for="voternumber"><img src="{{asset('assets/booth/images/votericon4.png')}}" class="img-fluid" alt="Voter Number"></label>
                  <input type="text" name="voter_id" id="voternumber" class="form-control" placeholder="वोटर ई डी नंबर">
               </div>
               <div class="form-group custom-select" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="900">
                  <label for="vidhansabha"><img src="{{asset('assets/booth/images/votericon4.png')}}" class="img-fluid" alt="Icon"></label>
                  <select class="form-select selectdropdownjs" name="other_id" id="vidhansabha" required="">
                     <option value="" selected>अन्य आई डी</option>
                     <option value="1">आधार कार्ड</option>
                     <option value="2">पैन कार्ड</option>
                     <option value="3">ड्राइविंग लाइसेंस</option>
                  </select>
               </div>
               <div class="form-group" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="900">
                  <label for="aadharnumber"><img src="{{asset('assets/booth/images/votericon5.png')}}" class="img-fluid" alt="Aadhar Number"></label>
                  <input type="text" name="otherid_no" id="aadharnumber" class="form-control" placeholder="अन्य कार्ड नंबर">
               </div>
               <div class="form-group" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="900">
                  <label for="uploadimage"><img src="{{asset('assets/booth/images/fileuploadicon.png')}}" class="img-fluid" alt="img upload"></label>
                  <input type="file" name="voterlist_image" onchange="loadimageFile(event, 'galleryimage')" accept="image/*"  id="uploadimage" class="form-control">
               </div>
                 <div class="form-group" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="900">
                 <img src="" width="100" id="galleryimage" alt="">
               </div>
               <div class="loginbtn text-center" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="900">
                  <button type="submit" class="btn bgcolorbtn"><span>सबमिट करे</span></button>
               </div>
            </form>
         </div>
      </div>
   </div>
@endsection
@push('footerscript')
    <script>
        $('.number').keyup(function(e) {
            if (/\D/g.test(this.value)) {
                this.value = this.value.replace(/\D/g, '');
            }
        });
    </script>
    <script>
        var loadimageFile = function (event, imgid) {
          var output = document.getElementById(imgid);
          output.src = URL.createObjectURL(event.target.files[0]);
        };
        
          function hide() {
              document.getElementById('submit_btn').style.display = 'none'
          }   
      </script>
@endpush