@extends('layouts.adminapp')

@section('content')
<style>
#CountrySelect {
    /* display:none; */
}
</style>
{{-- Member Registration --}}

<x-app-flash/>
<x-houses-modal>
</x-houses-modal>
<form method="POST" action="{{route('Member.store')}}" enctype='multipart/form-data'>
    @csrf
    <div class="card">
        <div class="card-header">        
            <div class="d-flex align-items-center">
                <div class="p-2  flex-fill bd-highlight"> 
                    <h4>{{__('lng.CreateMember')}}</h4>
                </div>            
            </div>  
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-4 form-group">
                    <label for="txtName">{{__('lng.Name')}} <span class="required">*</span></label>
                    <input value="{{ old('name') }}" type="text" class="form-control @error('name') is-invalid @enderror" name="name" id="txtName" required/>
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-sm-4 form-group">
                    <label for="txtNickName">{{__('lng.NickName')}}</label>
                    <input value="{{ old('nickname') }}" type="text" class="form-control" name="nickname" id="txtNickName"/>
                </div>
                <div class="col-sm-4 form-group">
                    <label for="HouseID">{{__('lng.HouseName')}} <span class="required">*</span></label>
                     <div class="input-group mb-3"> 
                        <input type="hidden" name="house_id" id="HouseID" value="{{ old('house_id') }}">
                        <input type="text" value="{{ old('house_name') }}" name="house_name" id="txtHouse" class="form-control @error('house_name') is-invalid @enderror" placeholder="Select House" disabled="" aria-label="Select House" aria-describedby="basic-addon2" value="" required>
                          <div class="input-group-append">
                              <button class="btn btn-dark" type="button" onclick="ChooseHouse()">{{__('lng.Choose')}}</button>
                          </div>
                          @error('house_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>   
                </div>
                <div class="col-sm-4 form-group">
                    <label for="cbGender">{{__('lng.Gender')}} <span class="required">*</span></label>
                    <select class="form-control" id="cbGender" name="gender" required>
                        <option value="">{{__('lng.Select')}}</option>
                        <option @if (old('gender') == 'Male') selected="selected" @else selected @endif value="Male">Male</option>
                        <option @if (old('gender') == 'Female') selected="selected" @endif value="Female">Female</option>
                        <option @if (old('gender') == 'Other') selected="selected" @endif value="Other">Other</option>
                    </select>
                </div>
                <div class="col-sm-4 form-group">
                    <label for="DOB">{{__('lng.DateOfBirth')}} </label>
                    <div class="input-group">
                        <input type="date" value="{{ old('dob') }}" class="form-control" name="dob" id="DOB" />
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button"  data-toggle="modal" data-target="#AgeCalculator"><i class="fa fa-plus" aria-hidden="true"></i></button>
                        </div>
                    </div> 
                </div>
                <div class="col-sm-4 form-group">
                    <label for="cbEducation">{{__('lng.Education')}}</label><div class="input-group">
                        <select class="form-control "  id="cbEducation" name="education_id">
                            @php
                            echo (new App\Http\Controllers\EducationController())->EducationListForCombo(0);
                            @endphp
                        </select>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button"  data-toggle="modal" data-target="#ajaxFormEducation"><i class="fa fa-plus" aria-hidden="true"></i></button>
                        </div>
                    </div>   
                </div>
                <div class="col-sm-4 form-group">
                    <label for="cbEducation">{{__('lng.Job')}}</label>
                    <div class="input-group">
                        <select class="form-control" name="job_id" id="cbJob">
                            @php
                            echo (new App\Http\Controllers\JobController())->JobListForCombo(0);
                            @endphp
                        </select>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button"  data-toggle="modal" data-target="#ajaxFormJobModel"><i class="fa fa-plus" aria-hidden="true"></i></button>
                        </div>
                    </div>   
                </div>
                <div class="col-sm-4 form-group">
                    <label for="cbJob">{{__('lng.BloodGroup')}} </label>
                    <select class="form-control" name="blood_group" id="cbJob" >
                        <option selected value=""  disabled>{{__('lng.Select')}}</option>
                        @foreach(PBCon::BLOOD_GROUPS as $BloodGroup)
                            <option @if (old('blood_group') == $BloodGroup ) selected="selected" @endif value="{{$BloodGroup}}">{{$BloodGroup}}</option>
                        @endforeach
                    </select>   
                </div>
                <div class="col-sm-4 form-group">
                    <label for="txtContact">{{__('lng.Contact')}} </label>
                    <input type="number" value="{{ old('contact') }}" class="form-control @error('contact') is-invalid @enderror" name="contact" id="txtContact"/>
                    @error('contact')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-sm-4 form-group">
                    <label for="whatsapp_no">{{__('lng.WhatsappNo')}} </label>
                    <input type="number" value="{{ old('whatsapp_no') }}" class="form-control @error('whatsapp_no') is-invalid @enderror" name="whatsapp_no" id="whatsapp_no"/>
                    @error('whatsapp_no')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-sm-4 form-group">
                    <label for="religion_study">{{__('lng.ReligionStudy')}} </label>
                    <input type="text" value="{{ old('religion_study') }}" class="form-control @error('religion_study') is-invalid @enderror" name="religion_study" id="religion_study"/>
                    @error('religion_study')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-sm-4 form-group">
                    <label for="adar">{{__('lng.AdarNo')}} </label>
                    <input type="text" value="{{ old('adar') }}" class="form-control @error('adar') is-invalid @enderror" name="adar" id="adar"/>
                    @error('adar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-sm-4 form-group">
                    <label for="txtEmail">{{__('lng.Email')}} </label>
                    <input type="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" name="email" id="txtEmail"/>
                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-sm-4 form-group">
                    <label for="txtEmail">{{__('lng.Password')}} </label>
                    <input type="password"  class="form-control @error('password') is-invalid @enderror" name="password" id="txtEmail"/>
                    @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-sm-4 form-group">
                    <label for="cbMemberRelation">{{__('lng.Relation')}} <span class="required">*</span></label>
                    <div class="input-group">
                        <select class="form-control"  name="member_relation_id" id="cbMemberRelation">
                            @php
                            echo (new App\Http\Controllers\MemberRelationController())->MemberRelationListForCombo(0);
                            @endphp
                        </select>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button"  data-toggle="modal" data-target="#ajaxFormMemberRelation"><i class="fa fa-plus" aria-hidden="true"></i></button>
                        </div>
                    </div>   
                </div>
                <div class="col-sm-4 form-group">
                    <label for="cbJob">{{__('lng.MaritalStatus')}} </label>
                    <select class="form-control" name="marital_status" id="cbJob" >
                        <option selected value=""  disabled>{{__('lng.Select')}}</option>
                        @foreach(PBCon::MARITAL_STATUS as $MaritalStatus)
                            <option @if (old('marital_status') == $MaritalStatus ) selected="selected" @endif value="{{$MaritalStatus}}">{{$MaritalStatus}}</option>
                        @endforeach
                    </select>   
                </div>
                <div class="col-sm-4 form-group">
                    <label for="txtAnnualIncome">{{__('lng.AnnualIncome')}} </label>
                    <input type="number" value="{{ old('annual_income') }}" class="form-control @error('annual_income') is-invalid @enderror" name="annual_income" id="txtAnnualIncome"/>
                    @error('annual_income')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-sm-4 form-check">
                    <div class="form-check mt-5">
                    <input class="form-check-input" type="checkbox" name="orphan" id="flexCheckDefault">
                    <label class="form-check-label" for="flexCheckDefault">
                        {{__('lng.Orphan')}}
                    </label>
                  </div>
                </div>
                <div class="col-sm-2 border justify-content" style="text-align: center;">
                    <img src="{{asset('assets/images/imgicon.png')}}" alt="defualt"  width="100px" id="imgImage"/>
                </div>
                <div class="col-sm-4 form-group">
                    <label for="filePhoto">{{__('lng.Photo')}}</label>
                    <input type="file" class="form-control @error('photo1') is-invalid @enderror" name="photo1" id="filePhoto" onchange="
                    var input=this;
		                if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        var size=(Math.round(input.files[0].size/1024));
                        if(size>1024)
                            {
                            alert('Please Upload file lesthan 1MB\nControl load time');
                            input.value='';
                            }
                        else{
                            reader.onload = function (e) {
                            $('#imgImage').attr('src', e.target.result); 
                            }
                            reader.readAsDataURL(input.files[0]);
                            }
				    }">
                    @error('photo1')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-sm-2 form-check">
                    <label class="form-check-label" for="rdIsEmigrant">
                        {{__('lng.IsEmigrant')}}
                    </label><br>
                    <input onchange="Emigrant(this.checked)" class="form-check-input ml-1 mt-2" type="checkbox" value="1" name="isEmigrant" id="rdIsEmigrant">
                </div>
                <div class="col-sm-4 form-group">
                    <div id="CountrySelect">
                        <label for="cbCountry">{{__('lng.Country')}}</label>
                        <select class="form-control" name="country_id" id="cbCountry">
                            @php
                                echo App\Http\Controllers\CountryController::CountryListForCombo(0);
                            @endphp
                        </select> 
                    </div>  
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 form-check">
                    <div class="form-check mt-5">
                    <input class="form-check-input" onchange="Health(this.checked)" type="checkbox"  name="isHealth" id="isHealth">
                    <label class="form-check-label" for="isHealth">
                        {{__('lng.Health')}}
                    </label>
                  </div>
                </div>
                <div class="col-sm-6 form-check">
                    <div class="form-check mt-5">
                    <input class="form-check-input" onchange="DifferentlyAbled(this.checked)" type="checkbox"  name="isAbled" id="isAbled" >
                    <label class="form-check-label" for="isAbled">
                        {{__('lng.DifferentlyAbled')}}
                    </label>
                  </div>
                </div>
                <div class="col-sm-12 form-group mt-3">
                    <label for="txtName">{{__('lng.Narration')}}</label>
                    <input type="text" value="{{ old('narration') }}" class="form-control" name="narration" id="txtNarration"/>
                </div>
            </div>
        </div>

        <div class="card-footer">
            <div class="d-flex  justify-content-start p-2" style="width:50%;float:left;">
                <a class="btn btn-primary btn-icon-split" href="{{route('Member.index')}}">
                    <span class="icon text-white-50">
                        <i class="fas fa-arrow-left"></i>
                    </span>
                    <span class="text">{{__('lng.Back')}}</span>
                </a>
            </div>
            <div class="d-flex  justify-content-end p-2">
                <button type="reset" class="btn btn-secondary btn-icon-split mr-2" name="btnSave">
                    <span class="icon text-white-50">
                        <i class="fas fa-trash"></i>
                    </span>
                    <span class="text">{{__('lng.Clear')}}</span>
                </button>
                <button type="submit" class="btn btn-success btn-icon-split">
                    <span class="icon text-white-50">
                        <i class="fas fa-check"></i>
                    </span>
                    <span class="text">{{__('lng.Save')}}</span>
                </button>
            </div>
        </div>
    </div>


        
    

        <!-- include health creation -->
        <x-health-modal>
        </x-health-modal>
        <!--End include health creation -->

        <!-- include differently abled creation -->
        <x-differentlyabled-modal>
        </x-differentlyabled-modal>
        <!--End include differently abled creation -->








</form>




{{-- Start Ajax Modal Education--}}
<div class="modal fade" id="ajaxFormEducation" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{__('lng.CreateEducation')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="AjaxFormBodyEducation">                
                <input name="AjaxForm" type="hidden" value="1">
                @include('Education.createajax')
            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btn-secondary btn-icon-split mr-2" name="btnSave">
                    <span class="icon text-white-50">
                        <i class="fas fa-trash"></i>
                    </span>
                    <span class="text">{{__('lng.Clear')}}</span>
                </button>
                <button type="button" class="btn btn-success btn-icon-split" onclick="btnModalSaveEducation()">
                    <span class="icon text-white-50">
                        <i class="fas fa-check"></i>
                    </span>
                    <span class="text">{{__('lng.Save')}}</span>
                </button>
            </div>
        </div>
    </div>
</div>
{{-- End Ajax Modal Education--}}


{{-- Start Ajax Modal Job--}}
<div class="modal fade" id="ajaxFormJobModel" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{__('lng.CreateJob')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="AjaxFormBodyJob">                
                <input name="AjaxForm" type="hidden" value="1">
                @include('Job.createajax')
            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btn-secondary btn-icon-split mr-2" name="btnSave">
                    <span class="icon text-white-50">
                        <i class="fas fa-trash"></i>
                    </span>
                    <span class="text">{{__('lng.Clear')}}</span>
                </button>
                <button type="button" class="btn btn-success btn-icon-split" onclick="btnModalSaveJob()">
                    <span class="icon text-white-50">
                        <i class="fas fa-check"></i>
                    </span>
                    <span class="text">{{__('lng.Save')}}</span>
                </button>
            </div>
        </div>
    </div>
</div>
{{-- End Ajax Modal Job--}}

{{-- Start Ajax Modal Member Relation--}}
<div class="modal fade" id="ajaxFormMemberRelation" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{__('lng.CreateMemberRelation')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="AjaxFormBodyMemberRelation">                
                <input name="AjaxForm" type="hidden" value="1">
                @include('MemberRelation.createajax')
            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btn-secondary btn-icon-split mr-2" name="btnSave">
                    <span class="icon text-white-50">
                        <i class="fas fa-trash"></i>
                    </span>
                    <span class="text">{{__('lng.Clear')}}</span>
                </button>
                <button type="button" class="btn btn-success btn-icon-split" onclick="btnModalSaveMemberRelation()">
                    <span class="icon text-white-50">
                        <i class="fas fa-check"></i>
                    </span>
                    <span class="text">{{__('lng.Save')}}</span>
                </button>
            </div>
        </div>
    </div>
</div>
{{-- End Ajax Modal Member Relation--}}


{{-- include age calculator --}}
@include('Help.AgeCalculator')

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
    CountrySelect.style.display ="none";
    function Emigrant(Value) {
        var DefaultCountry = {{App\Extra\General\PublicConstants::DEFAULT_COUNTRY}};
        // alert(DefaultCountry);
        if(Value == true)
            CountrySelect.style.display ="block";
        else
            CountrySelect.style.display ="none";
            document.getElementById('cbCountry').value=DefaultCountry;

    }

    function Load_EducationListCombo(Education_id)
    {
        $.get(
            '{{url('EducationCombo')}}/'+Education_id,
            function (response) {
                document.getElementById('cbEducation').innerHTML=response;
            }
        );
    }
    
    
    function btnModalSaveEducation()
    {
        var AjaxFormEducation=document.getElementById('AjaxFormEducation');        
        $.post('{{route('Education.store')}}',
            $('#AjaxFormBodyEducation :input').serialize(),
            function (response) {    
                response=response.trim();
                Load_EducationListCombo(response);
                $('#ajaxFormEducation').modal('hide')
            }
        );
    }

    function Load_JobListCombo(Job_id)
    {
        $.get(
            '{{url('JobCombo')}}/'+Job_id,
            function (response) {
                document.getElementById('cbJob').innerHTML=response;
            }
        );
    }
    
    
    function btnModalSaveJob()
    {
        var ajaxFormJobModel=document.getElementById('ajaxFormJobModel');        
        $.post('{{route('Job.store')}}',
            $('#AjaxFormBodyJob :input').serialize(),
            function (response) {    
                response=response.trim();
                Load_JobListCombo(response);
                $('#ajaxFormJobModel').modal('hide')
            }
        );
    }

    function Load_MemberRelationListCombo(MemberRelation_id)
    {
        $.get(
            '{{url('MemberRelationCombo')}}/'+MemberRelation_id,
            function (response) {
                document.getElementById('cbMemberRelation').innerHTML=response;
            }
        );
    }
        
    
    function btnModalSaveMemberRelation()
    {
        var ajaxFormMemberRelation=document.getElementById('ajaxFormMemberRelation');        
        $.post('{{route('MemberRelation.store')}}',
            $('#AjaxFormBodyMemberRelation :input').serialize(),
            function (response) {    
                response=response.trim();
                Load_MemberRelationListCombo(response);
                $('#ajaxFormMemberRelation').modal('hide')
            }
        );
    }

</script>





@endsection