@extends('layouts.app')

@section('content')
<!-- start page title -->
<!-- Nepali Datepicker CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nepali-datepicker/dist/css/nepali-datepicker.min.css">

<!-- jQuery (required by nepali-datepicker) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Nepali Datepicker JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/nepali-datepicker/dist/js/nepali-datepicker.min.js"></script>
<script>
    $(document).ready(function() {
        // Initialize Nepali datepicker
        $('#dob').nepaliDatePicker();
    });
</script>

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">नयाँ सदस्य प्रविष्टि</h4>
            <p><i>कृपया सदस्यको अकाउन्ट बाट मात्र फारम भर्नुहोला <span class="text-danger">तथा * चिन्ह भएका विवरण अनिवार्य छन्</span></i></p>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('addmembers') }}">सदस्य</a></li>
                    <li class="breadcrumb-item active">नयाँ सदस्य प्रविष्टि</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <form action="{{route('uploadmembers') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    {{ allErrors($errors) }}
                    <div class="row">

                        <div class="col-md-4 mb-3">
                            <label class="form-label">पूरा नाम र थर  <span class="text-danger">*</span></label>
                            <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="off">

                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">NAME (IN BLOCK LETTERS) <span class="text-danger">*</span></label>
                            <input id="nameeng" type="text" class="form-control @error('nameeng') is-invalid @enderror" name="nameeng" value="{{ auth()->user()->name }}" placeholder="{{ auth()->user()->name }}" required autocomplete="off">

                            @error('nameeng')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">जन्म मिति  <span class="text-danger">*</span></label>
                            <input id="dob" type="text" class="form-control date @error('dob') is-invalid @enderror" name="dob" value="{{ old('dob') }}" required autocomplete="off">
                            @error('dob')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">बाबुको नाम  <span class="text-danger">*</span></label>
                            <input id="fname" type="text" class="form-control @error('fname') is-invalid @enderror" name="fname" value="{{ old('fname') }}" required autocomplete="off">

                            @error('fname')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">बाजेको नाम  <span class="text-danger">*</span></label>
                            <input id="grandfather" type="text" class="form-control @error('grandfather') is-invalid @enderror" name="grandfather" value="{{ old('grandfather') }}" required autocomplete="off">

                            @error('grandfather')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">विवाहित भए पति वा पत्निको नाम</label>
                            <input id="sname" type="text" class="form-control @error('sname') is-invalid @enderror" name="sname" value="{{ old('sname') }}" autocomplete="off">

                            @error('sname')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">आमाको नाम <span class="text-danger">*</span></label>
                            <input id="mname" type="text" class="form-control @error('mname') is-invalid @enderror" name="mname" value="{{ old('mname') }}" autocomplete="off" required>

                            @error('mname')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">लिङ्ग <span class="text-danger">*</span></label>
                            <select name="gender" class="form-control select2" required>
                                <option value="" disabled selected> </option>
                                <option value="1" {{ old('gender') == '1' ? 'selected' : ''}}>Male</option>
                                <option value="2" {{ old('gender') == '2' ? 'selected' : ''}}>Female</option>
                                <option value="3" {{ old('gender') == '3' ? 'selected' : ''}}>Others</option>
                            </select>

                            @error('gender')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <br>

                        <h3> स्थायी ठेगाना </h3>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">प्रदेश <span class="text-danger">*</span></label>
                            <select name="province_id" id="province_id" required class="form-control select2">
                                <option value="" disabled selected>विवरण छान्नुहोस्</option>
                                @foreach($provinces as $id => $provinceName)
                                <option value="{{ $id }}" {{ old('province_id') == $id ? 'selected' : ''}}>{{ $provinceName }}</option>
                                @endforeach
                            </select>
                            @error('province_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">जिल्ला <span class="text-danger">*</span></label>
                            <select name="district_id" class="form-control select2" required id="district_id">
                                <option value="" disabled selected>प्रदेश छान्नुहोस्</option>
                                @foreach($pDistricts as $id => $districtName)
                                <option value="{{ $id }}" {{ old('district_id') == $id ? 'selected' : ''}}>{{ $districtName }}</option>
                                @endforeach
                            </select>
                            @error('district')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">गा.पा/न.पा <span class="text-danger">*</span></label>
                            <select name="locallevel_id" id="locallevel_id" required class="form-control select2">
                                <option value="" disabled selected>जिल्ला छान्नुहोस्</option>
                                @foreach($pLocallevels as $id => $locallevelName)
                                <option value="{{ $id }}" {{ old('locallevel_id') == $id ? 'selected' : ''}}>{{ $locallevelName }}</option>
                                @endforeach
                            </select>
                            @error('locallevel')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">वडा नं. <span class="text-danger">*</span></label>
                            <select name="ward" id="ward" required class="form-control select2 @error('ward') is-invalid @enderror">
                                <option value="" disabled selected>स्थानीय तह छान्नुहोस्</option>
                                @for($pw = 1; $pw <= $pWards; $pw++)
                                <option value="{{ $pw }}" {{ old('ward') == $pw ? 'selected' : ''}}>वडा नं. {{$pw}}</option>
                                @endfor
                            </select>

                            @error('ward')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">टोल <span class="text-danger">*</span></label>
                            <input id="tole" type="text"  class="form-control @error('tole') is-invalid @enderror" name="tole" value="{{ old('tole') }}" required autocomplete="off">

                            @error('tole')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">गाउँ <span class="text-danger">*</span></label>
                            <input id="village" type="text" class="form-control @error('village') is-invalid @enderror" name="village" value="{{ old('village') }}" required autocomplete="off">

                            @error('village')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <h5> नागरिकता अनुसार ठेगाना <small>(अंचल भएमा मात्र राख्नुहोस्)</small></h5>


                        <div class="col-md-3 mb-3">
                            <label class="form-label">अञ्चल</label>
                            <select name="citz_zone" class="form-control select2">
                                <option value="" disabled selected>अञ्चल छान्नुहोस्</option>
                                <option value="Mechi" {{ old('citz_zone') == 'Mechi' ? 'selected' : ''}}>मेची</option>
                                <option value="Koshi" {{ old('citz_zone') == 'Koshi' ? 'selected' : ''}}>कोशी</option>
                                <option value="Sagarmatha" {{ old('citz_zone') == 'Sagarmatha' ? 'selected' : ''}}>सगरमाथा</option>
                                <option value="Janakpur" {{ old('citz_zone') == 'Janakpur' ? 'selected' : ''}}>जनकपुर</option>
                                <option value="Bagamati" {{ old('citz_zone') == 'Bagamati' ? 'selected' : ''}}>बागमती</option>
                                <option value="Narayani" {{ old('citz_zone') == 'Narayani' ? 'selected' : ''}}>नारायणी</option>
                                <option value="Gandaki" {{ old('citz_zone') == 'Gandaki' ? 'selected' : ''}}>गण्डकी</option>
                                <option value="Lumbini" {{ old('citz_zone') == 'Lumbini' ? 'selected' : ''}}>लुम्बिनी</option>
                                <option value="Dhaulagiri" {{ old('citz_zone') == 'Dhaulagiri' ? 'selected' : ''}}>धौलागिरी</option>
                                <option value="Rapti" {{ old('citz_zone') == 'Rapti' ? 'selected' : ''}}>राप्ती</option>
                                <option value="Beri" {{ old('citz_zone') == 'Beri' ? 'selected' : ''}}>भेरी</option>
                                <option value="Karnali" {{ old('citz_zone') == 'Karnali' ? 'selected' : ''}}>कर्णाली</option>
                                <option value="Seti" {{ old('citz_zone') == 'Seti' ? 'selected' : ''}}>सेती</option>
                                <option value="Mahakali" {{ old('citz_zone') == 'Mahakali' ? 'selected' : ''}}>महाकाली</option>
                            </select>

                            @error('citz_zone')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label class="form-label">जिल्ला</label>
                            <select name="citz_district_id" class="form-control select2">
                                <option value="" disabled selected>जिल्ला छान्नुहोस् </option>
                                @foreach($districts as $id => $districtName)
                                <option value="{{ $id }}" {{ old('citz_district_id') == $id ? 'selected' : ''}}>{{ $districtName }}</option>
                                @endforeach
                            </select>

                            @error('citz_district_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label class="form-label">गा.पा/न.पा</label>
                            <input id="citz_locallevel" type="text" class="form-control @error('citz_locallevel') is-invalid @enderror" name="citz_locallevel" value="{{ old('citz_locallevel') }}" autocomplete="off">

                            @error('citz_locallevel')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label class="form-label">टोल/गाउँ</label>
                            <input id="citz_tole_village" type="text" class="form-control @error('citz_tole_village') is-invalid @enderror" name="citz_tole_village" value="{{ old('citz_tole_village') }}" autocomplete="off">

                            @error('citz_tole_village')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <!-- end address based on citizenship -->
                        <br>

                        <h3> अस्थायी ठेगाना </h3>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">प्रदेश <span class="text-danger">*</span></label>
                            <select name="cprovince_id" id="cprovince_id" required class="form-control select2">
                                <option value="" disabled selected>विवरण छान्नुहोस्</option>
                                @foreach($provinces as $id => $provinceName)
                                <option value="{{ $id }}" {{ old('cprovince_id') == $id ? 'selected' : ''}}>{{ $provinceName }}</option>
                                @endforeach
                            </select>
                            @error('Province')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">जिल्ला <span class="text-danger">*</span></label>
                            <select name="cdistrict_id" id="cdistrict_id" required class="form-control select2">
                                <option value="" disabled selected>प्रदेश छान्नुहोस्</option>
                                @foreach($cDistricts as $id => $districtName)
                                <option value="{{ $id }}" {{ old('cdistrict_id') == $id ? 'selected' : ''}}>{{ $districtName }}</option>
                                @endforeach
                            </select>
                            @error('district')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">गा.पा/न.पा <span class="text-danger">*</span></label>
                            <select name="clocallevel_id" id="clocallevel_id" required class="form-control select2">
                                <option value="" disabled selected>जिल्ला छान्नुहोस्</option>
                                @foreach($cLocallevels as $id => $locallevelName)
                                <option value="{{ $id }}" {{ old('clocallevel_id') == $id ? 'selected' : ''}}>{{ $locallevelName }}</option>
                                @endforeach
                            </select>
                            @error('locallevel')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>


                        <div class="col-md-4 mb-3">
                            <label class="form-label">वडा नं. <span class="text-danger">*</span></label>
                            <select name="cward" id="cward" required class="form-control select2 @error('cward') is-invalid @enderror">
                                <option value="" disabled selected>स्थानीय तह छान्नुहोस्</option>
                                @for($cw = 1; $cw <= $cWards; $cw++)
                                <option value="{{ $cw }}" {{ old('cward') == $cw ? 'selected' : ''}}>वडा नं. {{$cw}}</option>
                                @endfor
                            </select>

                            @error('cward')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">टोल <span class="text-danger">*</span></label>
                            <input id="ctole" type="text" required class="form-control @error('tole') is-invalid @enderror" name="ctole" value="{{ old('tole') }}" autocomplete="off">

                            @error('tole')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">गाउँ <span class="text-danger">*</span></label>
                            <input id="cvillage" type="text" required class="form-control @error('village') is-invalid @enderror" name="cvillage" value="{{ old('village') }}" autocomplete="off">

                            @error('village')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">टेलिफोन नं.</label>
                            <input id="telephone" type="text" class="form-control @error('telephone') is-invalid @enderror" name="telephone" value="{{ old('telephone') }}" autocomplete="off">

                            @error('telephone')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">मोबाइल नं. <i>(IN ENGLISH)</i> <span class="text-danger">*</span></label>
                            <input id="mobileno" type="text" class="form-control @error('mobileno') is-invalid @enderror" name="mobileno" value="{{ old('mobileno') }}" required autocomplete="off">

                            @error('mobileno')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">इमेल <span class="text-danger">*</span></label>
                            <input id="email" type="text" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ auth()->user()->email }}" required autocomplete="off" placeholder="{{auth()->user()->email}}">

                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-8 mb-3">
                            <label class="form-label">पत्र व्यवहार गर्ने ठेगाना </label>
                            <input id="caddress" type="text" class="form-control @error('caddress') is-invalid @enderror" name="caddress" value="{{ old('caddress') }}" autocomplete="off">

                            @error('caddress')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">मतदानमा भाग लिन चाहेको प्रदेश  <span class="text-danger">*</span></label>
                            <select name="election_province_id" required id="election_province_id" class="form-control select2">
                                <option value="" disabled selected></option>
                                @foreach($provinces as $id => $provinceName)
                                <option value="{{ $id }}" {{ old('election_province_id') == $id ? 'selected' : ''}}>{{ $provinceName }}</option>
                                @endforeach
                            </select>

                            @error('election_province_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <br>
                        <h3> कुनै संस्थामा कार्यरत भए, </h3>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">संस्थाको नाम</label>
                            <input id="office_name" type="text" class="form-control @error('office_name') is-invalid @enderror" name="office_name" value="{{ old('office_name') }}" autocomplete="off">

                            @error('office_name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">संस्थाको ठेगाना</label>
                            <input id="office_address" type="text" class="form-control @error('office_address') is-invalid @enderror" name="office_address" value="{{ old('office_address') }}" autocomplete="off">

                            @error('specialization')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <br>
                        <h3> अन्य विवरण </h3>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">हाल दर्ता हुन चाहेको श्रेणी <span class="text-danger">*</span></label>
                            <select name="level" class="form-control select2" id="level" required>
                                <option value="level_id" disabled selected>श्रेणी छान्नुहोस्</option>
                                @foreach($level as $id => $levelName)
                                <option value="{{ $id }}" {{ old('level') == $id ? 'selected' : ''}}>{{ $levelName }}</option>
                                @endforeach
                            </select>
                            @error('level')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3" id="specialization">
                            <label class="form-label">वैज्ञताको क्षेत्र</label>
                            <select name="specialization" class="form-control select2" id="specialization_id">
                                <option value="specialization_id" disabled selected>वैज्ञताको क्षेत्र छान्नुहोस्</option>
                                @foreach($specialization as $id => $specializationName)
                                <option value="{{ $id }}">{{ $specializationName }}</option>
                                @endforeach
                            </select>
                            @error('specialization')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <br>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">आफ्नो तस्वीर अपलोड गर्नुहोस् <span class="text-danger">*</span></label>
                            <input type="file" name="photoName" class="form-control" required>
                            <span class = "text-danger">फोटो 2MB भन्दा कमको हुनुपर्दछ।</span>
                            @error('photoName')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label"> आफ्नो नागरिकता अपलोड गर्नुहोस् <span class="text-danger">*</span></label>
                            <input type="file" name="citizenshipImage" class="form-control" required>
                            <span class = "text-danger">फायल 2MB भन्दा कमको हुनुपर्दछ र नागरिकताको अगाडि र पछाडिको भागलाई एउटै फोटोमा समावेश गरेर अपलोड गार्नुपर्छ। <br> यस कार्यको लागी तलको लिकंको प्रयोग गार्नुहोस र सो Website मा रहेको Merge Direction मा 'Vertical' छान्नुहोस्। </span><br><a href="https://imagelr.com/image-combiner" target = "_blank">Click Here To Merge Photos</a>
                            @error('citizenshipImage')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>



                    </div>

                    <div class="mb-3">
                        <button class="btn btn-primary w-100 waves-effect waves-light" type="submit">सेभ गर्ने</button>
                    </div>
                </form>
                <!-- end table responsive -->
            </div>
            <!-- end card body -->
        </div>
        <!-- end card -->
    </div>
    <!-- end col -->
</div>
<!-- end row -->

@if(!$errors->any())
<div class="modal" id="level-info" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">सदस्य दर्ता गर्दा छान्न सकिने श्रेणीको व्यहोरा</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @include('components.member-level-info')
            </div>
        </div>
    </div>
</div>
@endif
@endsection


@section('scripts')
<script src="{{ public_url('assets/js/province-district-contact.js') }}"></script>
<script>
    $(document).ready(function() {
        $("#specialization").hide();

        $("#level-info").modal('show');

        $("#level").change(function() {
            if ($(this).val() === "1") {
                $("#specialization").show();
            } else {
                $("#specialization").hide();
                $("#specialization_id").val(null);
            }
        });

    });
</script>
@endsection