@extends('layouts.app')
@section('content')

<form method="POST">
    @csrf
    @honeypot
    <div class="card card-flush ">
        <div class="card-body ">
            <div class="">
                <h3 class="fs-4 mb-4">{{__('Personal Information')}}</h3>
                <div class="separator mb-4 my-2"></div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-4">
                            <label class="form-label">{{__('First Name')}}</label>
                            <input type="text" disabled value="{{auth()->user()->firstname}}" class="form-control">
                        </div>
                    </div>
    
                    <div class="col-md-4">
                        <div class="mb-4">
                            <label class="form-label">{{__('Middle Name')}}</label>
                            <input type="text" disabled value="{{auth()->user()->middlename}}" class="form-control">
                        </div>
                    </div>
    
                    <div class="col-md-4">
                        <div class="mb-4">
                            <label class="form-label">{{__('Surname')}}</label>
                            <input type="text" disabled value="{{auth()->user()->surname}}" class="form-control">
                        </div>
                    </div>
    
                    <div class="col-md-4">
                        <div class="mb-4">
                            <label class="form-label required">{{__('Birth Date')}}</label>
                            <input type="date" value="{{is_null($data) ? old('birthdate') : $data['birthdate']}}" name="birthdate"
                                class="form-control @error('birthdate') is-invalid @enderror">
                            @error('birthdate')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
    
                    <div class="col-md-2">
                        <div class="mb-4">
                            <label class="form-label required">{{__('Civil Status')}}</label>
                            <select name="civil_status" class="form-control ">
                                <option {{is_null($data) ? (old('civil_status') == 'Single' ? 'selected' : '') : ($data['civil_status'] == 'Single' ? 'selected' : '' )}} value="Single">Single</option>
                                <option {{is_null($data) ? (old('civil_status') == 'Married' ? 'selected' : '') : ($data['civil_status'] == 'Married' ? 'selected' : '' )}} value="Married">Married</option>
                                <option {{is_null($data) ? (old('civil_status') == 'Widowed' ? 'selected' : '') : ($data['civil_status'] == 'Widowed' ? 'selected' : '' )}} value="Widowed">Widowed</option>
                                <option {{is_null($data) ? (old('civil_status') == 'Divorced' ? 'selected' : '') : ($data['civil_status'] == 'Divorced' ? 'selected' : '' )}} value="Divorced">Divorced</option>
                            </select>
                        </div>
                    </div>
    
                    <div class="col-md-2">
                        <div class="mb-4">
                            <label class="form-label required">{{__('Gender')}}</label>
                            <select name="gender" class="form-control ">
                                <option {{is_null($data) ? (old('gender') == 'Male' ? 'selected' : '') : ($data['gender'] == 'Male' ? 'selected' : '' )}} value="Male">Male</option>
                                <option {{is_null($data) ? (old('gender') == 'Female' ? 'selected' : '') : ($data['gender'] == 'Female' ? 'selected' : '' )}} value="Female">Female</option>
                            </select>
                        </div>
                    </div>
    
                    <div class="col-md-4">
                        <div class="mb-4">
                            <label class="form-label required">{{__('Nationality')}}</label>
                            <input type="text" value="{{is_null($data) ? old('nationality') : $data['nationality']}}" name="nationality"
                                class="form-control @error('nationality') is-invalid @enderror">
                            @error('nationality')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="separator mb-4 my-2"></div>
                <h3 class="fs-4 mb-4">{{__('Address Information')}}</h3>
                <div class="separator mb-4 my-2"></div>
                <div class="row">
                    <div class="col-md-3">
                        {{--<div class="mb-4">
                            <label class="form-label required">{{__('Country')}}</label>
                            @if(!empty($data['country']))
                                <div class="form-control bg-light text-gray-500">
                                    @foreach($countries as $country)
                                        @if($country->name===$data['country'])
                                        <img class="img-rounded me-2" style="width:20px" src ="{{$country->flag}}"> <span>{{$data['country']}}</span>
                                        @endif
                                    @endforeach
                                    <input type="hidden" name="country" value="{{$data['country']}}">
                                </div>
                            @else
                                <select name="country" class="form-select form-select" id="kt_docs_select2_country">
                                @foreach($countries as $country)
                                    <option value="{{$country->name}}" data-kt-select2-country="{{$country->flag}}" {{empty($data['country'])?"":($data['country']==$country->name?"Selected":"")}}><img class="img-rounded me-2" src="{{$country->flag}}">{{$country->name}}</option>
                                @endforeach
                                </select>
                            @endif
                        </div>--}}
                        <div class="mb-4">
                            <label class="form-label required">{{__('Country')}}</label>
                            <select name="country" class="form-select form-select" id="kt_docs_select2_country">
                            @foreach($countries as $country)
                                <option value="{{$country->name}}" data-kt-select2-country="{{$country->flag}}" {{empty($data['country'])?"":($data['country']==$country->name?"Selected":"")}}><img class="img-rounded me-2" src="{{$country->flag}}">{{$country->name}}</option>
                            @endforeach
                            </select>
                            
                        </div>
                    </div>
    
                    <div class="col-md-3">
                        <div class="mb-4">
                            <label class="form-label required">{{__('State / Province')}}</label>
                            <input type="text" name="province" value="{{is_null($data) ? old('province') : $data['province']}}" class="form-control @error('province') is-invalid @enderror">
                            @error('province')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
    
                    <div class="col-md-3">
                        <div class="mb-4">
                            <label class="form-label required">{{__('City')}}</label>
                            <input type="text" name="city" value="{{is_null($data) ? old('city') : $data['city']}}" class="form-control @error('city') is-invalid @enderror">
                            @error('city')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
    
                    <div class="col-md-3">
                        <div class="mb-4">
                            <label class="form-label">{{__('Zip Code')}}</label>
                            <input type="text" name="zipcode" value="{{is_null($data) ? old('zipcode') : $data['zipcode']}}" class="form-control">
                        </div>
                    </div>
    
                    <div class="col-md-12">
                        <div class="mb-4">
                            <label class="form-label required">{{__('Address')}}</label>
                            <input type="text" name="address" value="{{is_null($data) ? old('address') : $data['address']}}" class="form-control @error('address') is-invalid @enderror">
                            @error('address')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>
    
                <div class="row">
    
                    <div class="col-md-6">
                        <div class="separator mb-4 my-2"></div>
                        <h3 class="fs-4 mb-4">{{__('Contact Information')}}</h3>
                        <div class="separator mb-4 my-2"></div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label required">{{__('Email Address')}}@if(!is_null(auth()->user()->email_verified_at)) <span class="text-success">(Verified)</span>@endif</label>
                                    <input type="text"  value="{{old('email') ?? auth()->user()->email}}" name="email" id="email" class="form-control @error('email') is-invalid @enderror" {{auth()->user()->can('change.email') ? '' : 'disabled'}}>
                                    @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong> 
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label required">{{__('Contact Number')}}</label>
                                    
                                    <div class="input-group w-100 p-0">
                                        <span class="input-group-text border-right-0" >
                                            <img class="img-rounded me-2 " style="height:20px;width:20px;" id="contact_country_flag"  >
                                            <select class="form-control border-0 p-0" id="contact_country_code" name='contact_country_code'>
                                                @foreach($countries as $country)
                                                <option value="{{'+'.$country->phone_code}}" data-flag="{{$country->flag}}" {{'+'.$country->phone_code == $data['contact_country_code']? 'selected' : ''}}>{{$country->code." (+".$country->phone_code.")"}}</option>
                                                @endforeach
                                            </select>
                                        </span>
                                        <input type="text" value="{{substr(auth()->user()->contact,strlen($data['contact_country_code']))}}" class="form-control @error('contact') is-invalid @enderror" placeholder="9123564789" id="contact">
                                        <input type="hidden" id="contact_number" name="contact" >
                                        @error('contact')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    @error('contact')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="separator mb-4 my-2"></div>
                        <h3 class="fs-4 mb-4">{{__('Beneficiary Information')}}</h3>
                        <div class="separator mb-4 my-2"></div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label required">{{__('Full Name')}}</label>
                                    <input type="text" name="beneficiary_fullname" value="{{is_null($data) ? old('beneficiary_fullname') : $data['fullname']}}"
                                        class="form-control @error('beneficiary_fullname') is-invalid @enderror" {{!empty($data['fullname']) ? 'readonly' : ''}} style={{!empty($data['fullname']) ? "color:#A1A5B7;background-color:#F4F4F4;border-color:#E1E3EA;opacity:1;" : ""}}>
                                    @error('beneficiary_fullname')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label required">{{__('Relationship')}}</label>
                                    <input type="text" name="beneficiary_relationship" value="{{is_null($data) ? old('beneficiary_relationship') : $data['relationship']}}"
                                        class="form-control @error('beneficiary_relationship') is-invalid @enderror" {{!empty($data['relationship']) ? 'readonly' : ''}} style={{!empty($data['relationship']) ? "color:#A1A5B7;background-color:#F4F4F4;border-color:#E1E3EA;opacity:1;" : ""}}>
                                    @error('beneficiary_relationship')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="separator mb-4 my-2"></div>
                        <h3 class="fs-4 mb-4">{{__('Account')}}</h3>
                        <div class="separator mb-4 my-2"></div>
                        <div class="col-md-12">
                            <div class="mb-4">
                                <label class="form-label">{{__('Your username and member ID')}}</label>
                                <input type="text" disabled class="form-control" value="{{auth()->user()->username}} {{auth()->user()->id_number}}">
                            </div>
                        </div>
                    </div>
                </div>    
                <div class="row">
                    @if($mybanks->count() == 0)
                   
                    @else
                    <div class="separator mb-4 my-2"></div>
                    <h3 class="fs-4 mb-4">{{__('Bank Information')}}</h3>
                    <div class="separator mb-4 my-2"></div>
                        @foreach($mybanks as $bank)
                            <div class="col-md-3">
                                <div class="mb-4">
                                    <label class="form-label">{{__('Bank')}}</label>
                                    <input type="text" disabled class="form-control" value="{{$bank->bank}}">
                                </div>
                            </div>
    
                            <div class="col-md-3">
                                <div class="mb-4">
                                    <label class="form-label">{{__('Account Name')}}</label>
                                    <input type="text" disabled class="form-control" value="{{$bank->account_name}}">
                                </div>
                            </div>
    
                            <div class="col-md-3">
                                <div class="mb-4">
                                    <label class="form-label">{{__('Account Number')}}</label>
                                    <input type="text" disabled class="form-control" value="{{$bank->account_number}}">
                                </div>
                            </div>
    
                            <div class="col-md-3">
                                <div class="mb-4">
                                    <label class="form-label">{{__('Branch')}}</label>
                                    <input type="text" disabled class="form-control"
                                        value="{{is_null($bank->branch) ? 'Not Available' : $bank->branch}}">
                                </div>
                            </div>
                            @endforeach
                    @endif  
                </div>
    
               @if(Route::has('account.profile.update'))
               <div class="col-md-12">
                    <div class="mb-4">
                        <button class="btn w-100 btn-primary btn-sm blocker" type="submit">Save Changes</button>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</form>
@endsection           
@section('page_script')                                                           
<script>
    $(".topbar-user").find('.profile').addClass('active')
    $("#contact_country_code").change(function($query){
        let number_val = $("#contact").val()
        number_val = number_val.replace(/\s/g,'');
        $("#contact_number").val($(this).val()+number_val)
        let flag=$(this).find(':selected').data('flag')
        console.log(flag);
        $("#contact_country_flag").attr('src',flag)
    });
    $("#contact").on('input',function($query){
        var inputValue = $(this).val();
        var numericPattern = /^[0-9]*$/;
    
        if (!numericPattern.test(inputValue)) {
            // If the input value contains non-numeric characters, remove them
            $(this).val(inputValue.replace(/[^0-9]/g, ''));
            numericPattern = /^[0-9 ]*$/;
            if(!numericPattern.test(inputValue))
            $('.next').attr('disabled', true); // Disable button
        } else {
            if ($(this).closest("form").find('.is-invalid').length === 0) {
                $('.next').removeAttr('disabled'); // Enable button
            }
        }
            inputValue = $(this).val();
        console.log(inputValue)
        inputValue = inputValue.replace(/([0-9]{0,3})([0-9]{0,3})([0-9]{0,4})/, function(match, area, first, last) {
            // Construct the formatted number based on matched groups
            var formattedNumber = (area ? area : '') + (first ? ' ' + first : '') + (last ? ' ' + last : '');
            return formattedNumber;
        });
    
        $(this).val(inputValue);
        let number_val = $(this).val()
        number_val = number_val.replace(/\s/g,'');
        $("#contact_number").val($("#contact_country_code").val()+number_val)
    });
     $("#contact").trigger('input')
     $("#contact_country_code").trigger('change')
</script>
@endsection                                  
<!-- App js -->