@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<div class="nk-kycfm-head">
    <div class="nk-kycfm-count">01</div>
    <div class="nk-kycfm-title">
        <h5 class="title">Personal Details</h5>
        <p class="sub-title">Your simple personal information required for identification</p>
    </div>
</div><!-- .nk-kycfm-head -->
<div class="nk-kycfm-content">
    <div class="nk-kycfm-note">
        <em class="icon ni ni-info-fill" data-bs-toggle="tooltip" data-bs-placement="right" aria-label="Tooltip on right" data-bs-original-title="Tooltip on right"></em>
        <p>Please type carefully and fill out the form with your personal details. Your can’t edit these details once you submitted the form.</p>
    </div>


<div class="row padding-1 p-1">

    <div class="col-md-6">


        <div class="form-group mb-2 mb20">
            <label for="bvn" class="form-label">{{ __('BVN') }}</label>
            @if(auth()->user()->bvn)
            <input type="text" name="bvn" class="form-control @error('bvn') is-invalid @enderror" value="{{ auth()->user()->bvn }}" id="bvn" placeholder="Bvn" readonly>
          @else
                <input type="text" name="bvn" class="form-control @error('bvn') is-invalid @enderror" value="{{ old('bvn', $virtualCardKy?->bvn) }}" id="bvn" placeholder="Bvn">
            @endif
            {!! $errors->first('bvn', '<div class="invalid-feedback" role="alert"><strong>:message</strong></div>') !!}
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-group mb-2 mb20">
            <label for="house_no" class="form-label">{{ __('House No') }}</label>
            <input type="text" name="house_no" class="form-control @error('house_no') is-invalid @enderror" value="{{ old('house_no', $virtualCardKy?->house_no) }}" id="house_no" placeholder="House No">
            {!! $errors->first('house_no', '<div class="invalid-feedback" role="alert"><strong>:message</strong></div>') !!}
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-group mb-2 mb20">
            <label for="street" class="form-label">{{ __('Street') }}</label>
            <input type="text" name="street" class="form-control @error('street') is-invalid @enderror" value="{{ old('street', $virtualCardKy?->street) }}" id="street" placeholder="Street">
            {!! $errors->first('street', '<div class="invalid-feedback" role="alert"><strong>:message</strong></div>') !!}
        </div>
    </div>
    <div class="col-md-6">
    <div class="form-group mb-2 mb20">
        <label for="postal_code" class="form-label">{{ __('Postal Code') }}</label>
        <input type="text" name="postal_code" class="form-control @error('postal_code') is-invalid @enderror" value="{{ old('postal_code', $virtualCardKy?->postal_code) }}" id="postal_code" placeholder="Postal Code">
        {!! $errors->first('postal_code', '<div class="invalid-feedback" role="alert"><strong>:message</strong></div>') !!}
    </div>
    </div>
    <div class="col-md-6">
        <div class="form-group mb-2 mb20">
            <label for="phone_number" class="form-label">{{ __('Phone Number') }}</label>
            <input type="text" name="phone_number" class="form-control @error('phone_number') is-invalid @enderror" value="{{ auth()->user()->phone }}" id="phone_number" placeholder="Phone Number" readonly>
            {!! $errors->first('phone_number', '<div class="invalid-feedback" role="alert"><strong>:message</strong></div>') !!}
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-group mb-2 mb20">
            <label for="country" class="form-label">{{ __('Country') }}</label>
            <input type="text" name="country" class="form-control @error('country') is-invalid @enderror" value="{{auth()->user()->country}}" id="country" placeholder="Country"  readonly>
            {!! $errors->first('country', '<div class="invalid-feedback" role="alert"><strong>:message</strong></div>') !!}
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group mb-2 mb20">
            <label for="state" class="form-label">{{ __('State') }}</label>
            <select class="form-control mb-3" name="state" aria-label="state" id="stateSelect">
                <option value="">State</option>
                @if(auth()->user()->country=='Nigeria')
                    @foreach (loadState("4") as $item)
                        <option value="{{ $item->id }}" {{ old('state', $virtualCardKy?->state) == $item->id ? 'selected' : '' }}>
                            {{ $item->name }}
                        </option>
                    @endforeach
                @endif
            </select>
            {!! $errors->first('state', '<div class="invalid-feedback" role="alert"><strong>:message</strong></div>') !!}
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-group mb-2 mb20">
            <label for="city" class="form-label">{{ __('City') }}</label>
            <select class="form-control mb-3" name="city" aria-label="city" id="city">
                <option value="">LGA</option>
                @if(old('state', $virtualCardKy?->state))
                    @foreach (loadCity($virtualCardKy->state) as $item)
                        <option value="{{ $item->name }}" {{old('city', $virtualCardKy?->city) == $item->name ? 'selected' : '' }}>
                            {{ $item->name }}
                        </option>
                    @endforeach
                    @endif
            </select>
            {!! $errors->first('city', '<div class="invalid-feedback" role="alert"><strong>:message</strong></div>') !!}
        </div>
    </div>


    <div class="col-md-6">
        <div class="form-group mb-2 mb20">
            <label for="id_type" class="form-label">{{ __('Id Type') }}</label>
            <select class="form-control mb-3" name="id_type" aria-label="id_type" id="id_type">
                <option value="">Select ID Type</option>
                <option value="National identity" {{old('city', $virtualCardKy?->id_type) == "National identity" ? 'selected' : '' }}>National identity/NIN Card</option>
            </select>
            {!! $errors->first('id_type', '<div class="invalid-feedback" role="alert"><strong>:message</strong></div>') !!}
        </div>
    </div>
    <div class="col-md-6">

        <div class="form-group mb-2 mb20">
            <label for="nin_no" class="form-label">{{ __('Nin No') }}</label>
            <input type="text" name="nin_no" class="form-control @error('nin_no') is-invalid @enderror" value="{{ old('nin_no', $virtualCardKy?->nin_no) }}" id="nin_no" placeholder="Nin No">
            {!! $errors->first('nin_no', '<div class="invalid-feedback" role="alert"><strong>:message</strong></div>') !!}
        </div>

    </div>
</div>
</div>
<div class="nk-kycfm-head">
    <div class="nk-kycfm-count">02</div>
    <div class="nk-kycfm-title">
        <h5 class="title">Document Upload</h5>
        <p class="sub-title">To verify your identity, please upload any of your document.</p>
    </div>
</div><!-- .nk-kycfm-head -->
<div class="nk-kycfm-content">
    <div class="nk-kycfm-note">
        <em class="icon ni ni-info-fill" data-bs-toggle="tooltip" data-bs-placement="right" aria-label="Tooltip on right" data-bs-original-title="Tooltip on right"></em>
        <p>In order to complete, please upload any of the following personal document.</p>
    </div>
    <h6 class="title">To avoid delays when verifying account, Please make sure bellow:</h6>
    <ul class="list list-sm list-checked">
        <li>Chosen credential must not be expaired.</li>
        <li>Document should be good condition and clearly visible.</li>
        <li>Make sure that there is no light glare on the card.</li>
    </ul>
<div class="row">
    <div class="col-md-6">
        <div class="form-group mb-2 mb20">
            <label for="id_image_url" class="form-label">{{ __('Id Image') }}</label>
            <a href="#" class="d-block"><img src="{{getPhoto(old('id_image_url', $virtualCardKy?->id_image_url))}}" width="500px" height="300px" class="card-img-top imageShow" id="nin"></a>
            <input type="file" name="id_image_url" class="form-control imageUpload ninImage @error('id_image_url') is-invalid @enderror" id="id_image_url" placeholder="Id Image Url" data-preview="nin"  accept="image/*">
            {!! $errors->first('id_image_url', '<div class="invalid-feedback" role="alert"><strong>:message</strong></div>') !!}
        </div>
    </div>
    <div class="col-md-6">
        <div class="card card-sm">
            <label>Your Photo Please use your phone</label>
            <a href="#" class="d-block"><img src="{{getPhoto(old('photo', $virtualCardKy?->photo))}}" width="200px" height="300px" class="card-img-top imageShow" id="photo"></a>
            <div class="card-body">
                <input type="file" class="form-control imageUpload file-type mb-1" name="photo" accept="image/*" capture="camera" data-preview="photo">
            </div>
        </div>
    </div>
</div>

</div>
<div class="nk-kycfm-footer">
    <div class="form-group">
        <div class="custom-control custom-control-xs custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="tc-agree" required>
            <label class="custom-control-label" for="tc-agree">I Have Read The <a href="#">Terms Of Condition</a> And <a href="#">Privacy Policy</a></label>
        </div>
    </div>
    <div class="form-group">
        <div class="custom-control custom-control-xs custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="info-assure" required>
            <label class="custom-control-label" for="info-assure">All The Personal Information I Have Entered Is Correct.</label>
        </div>
    </div>
    <div class="nk-kycfm-action pt-2">
        <button type="submit" class="btn btn-lg btn-primary">Process for Verify</button>
    </div>
</div><!-- .nk-kycfm-footer -->
@push('script')


    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


    <script>
        $(document).ready(function() {
            $('#stateSelect').select2({
                placeholder: "Select State",
                allowClear: true
            });
        });
    </script>


        <script>
            $(document).ready(function() {
                // Function to populate dropdown
                function populateDropdown(url, dropdown) {
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success: function(data) {
                            dropdown.empty();
                            dropdown.append('<option value="">Select</option>');
                            $.each(data, function(key, value) {
                                dropdown.append('<option value="' + value.id + '">' + value.name + '</option>');
                            });
                            dropdown.prop('disabled', false);
                        }
                    });
                }
                //subject




                // Senatorial District change event
                $('#stateSelect').change(function() {
                    var id = $(this).val();
                    if(id) {
                        var url = `{{ url('/gb/get-city/') }}/${id}`;
                        populateDropdown(url, $('#city'));

                    } else {
                        $('#city').empty().append('<option value="">Select</option>').prop('disabled', true);
                    }
                });

            });
        </script>


    <script>
        'use strict';

        function imageUpload(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    // Use the data-preview attribute to find the corresponding preview image
                    var targetId = $(input).data('preview');
                    $('#' + targetId).attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        // Bind the change event to all inputs with the class "imageUpload"
        $(".imageUpload").on('change', function () {
            imageUpload(this);
        });
    </script>

@endpush