@extends('frontend.layout.dashboard-master')
@section('site_title', __('Identity Verification'))

@section('style')
<style>
    .document-card {
        position: relative;
        min-height: 62px;
        border: 1px solid #d6dde6;
        border-radius: 9px;
        background: #ffffff;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 0 18px;
        cursor: pointer;
        transition: 0.2s ease;
    }
    .document-card:hover { border-color: var(--main-color-one); }
    .document-card.active { border-color: var(--main-color-one); background: #effaf5; }

    .document-icon {
        width: 34px;
        height: 34px;
        border-radius: 9999px;
        background: #f1f3f6;
        color: #334155;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
    }
    .document-icon.active { background: #e0f4ed; color: var(--main-color-one); }

    .form-label {
        display: block;
        margin-bottom: 11px;
        font-size: 15px;
        line-height: 20px;
        font-weight: 600;
        color: #1f2937;
    }

    .form-input {
        width: 100%;
        height: 40px;
        border: 1px solid #d6dde6;
        border-radius: 9px;
        background: #ffffff;
        padding: 0 15px;
        font-size: 13px;
        font-weight: 500;
        color: #334155;
        outline: none;
        transition: 0.2s ease;
    }
    .form-input::placeholder { color: #64748b; }
    .form-input:focus { border-color: var(--main-color-one); box-shadow: 0 0 0 3px rgba(0, 116, 86, 0.12); }

    .select-icon {
        pointer-events: none;
        position: absolute;
        right: 15px;
        top: 50%;
        width: 18px;
        height: 18px;
        transform: translateY(-50%);
        color: #334155;
    }

    .upload-box {
        min-height: 122px;
        border: 1px dashed #cbd5e1;
        border-radius: 9px;
        background: #f8fafc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 22px 16px;
        text-align: center;
        cursor: pointer;
        transition: 0.2s ease;
    }
    .upload-box:hover { border-color: var(--main-color-one); background: #f3fbf7; }
</style>
@endsection

@section('content')
@php
    $authUser = Auth::guard('web')->user();
    $isVerified = $authUser->user_verified_status == 1 && $authUser->user_type == 1;
    $verifyBy = $user_identity->verify_by ?? 'National ID Card';
@endphp

@if($isVerified)

<div class="max-w-[1120px] bg-white border border-[#d9e0e8] rounded-[12px] px-6 py-8">
    <div class="flex items-start gap-4">
        <div class="w-12 h-12 rounded-full bg-[#ecfdf5] flex items-center justify-center flex-shrink-0">
            <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
            </svg>
        </div>
        <div>
            <h4 class="text-[18px] font-bold text-[#1f2937]">{{ __('Your identity is verified') }}</h4>
            <p class="mt-1 text-[14px] text-[#64748b]">{{ __('Your identity has been verified by our team.') }}</p>
        </div>
    </div>
</div>

@else

<div class="max-w-[1120px] bg-white border border-[#d9e0e8] rounded-[12px] px-6 lg:px-6 py-6" id="display_client_identity_verification">
    <div class="max-w-[720px]">

        @if(isset($user_identity) && $user_identity->status == 2)
        <div class="mb-6 bg-[#FFF1F4] border border-[#ffc0cc] rounded-xl px-5 py-4 flex gap-3 items-start">
            <svg class="w-5 h-5 text-[#F0416C] mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
            </svg>
            <p class="text-sm text-[#3B4759]">{{ __('Please resubmit your identity details with proper information so that we can verify it\'s you.') }}</p>
        </div>
        @elseif(isset($user_identity))
        <div class="mb-6 bg-[#FFF9F0] border border-[#FDDBA8] rounded-xl px-5 py-4 flex gap-3 items-start">
            <svg class="w-5 h-5 text-[#FA8C00] mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
            </svg>
            <p class="text-sm text-[#3B4759]">{{ __('Notice: Please wait. we will notify by email whether you verified or not. Multiple request may delay your verification.') }}</p>
        </div>
        @endif

        <h1 class="text-[22px] leading-7 font-bold text-[#1f2937]">
            {{ __('Identity Verification') }}
        </h1>

        <p class="mt-3 text-[14px] leading-[18px] font-medium text-[#111827] max-w-[680px]">
            {{ __("Please choose to submit any of the government-issued documents listed below. User general info's are common for any documents submitted.") }}
        </p>

        {{-- Document Type Cards --}}
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-5 mt-5 mb-8">

            <label class="document-card @if($verifyBy == 'National ID Card') active @endif" data-value="National ID Card">
                <input type="radio" name="document_type" @if($verifyBy == 'National ID Card') checked @endif class="sr-only" />
                <span class="document-icon @if($verifyBy == 'National ID Card') active @endif">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c0 1.306.835 2.417 2 2.83"/>
                    </svg>
                </span>
                <span class="text-[15px] font-semibold text-[#111827]">{{ __('National ID Card') }}</span>
                @if($verifyBy == 'National ID Card')
                <span class="check-badge absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center text-white">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                </span>
                @endif
            </label>

            <label class="document-card @if($verifyBy == 'Passport') active @endif" data-value="Passport">
                <input type="radio" name="document_type" @if($verifyBy == 'Passport') checked @endif class="sr-only" />
                <span class="document-icon @if($verifyBy == 'Passport') active @endif">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                </span>
                <span class="text-[15px] font-semibold text-[#111827]">{{ __('Passport') }}</span>
                @if($verifyBy == 'Passport')
                <span class="check-badge absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center text-white">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                </span>
                @endif
            </label>

            <label class="document-card @if($verifyBy == 'Driving License') active @endif" data-value="Driving License">
                <input type="radio" name="document_type" @if($verifyBy == 'Driving License') checked @endif class="sr-only" />
                <span class="document-icon @if($verifyBy == 'Driving License') active @endif">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                    </svg>
                </span>
                <span class="text-[15px] font-semibold text-[#111827]">{{ __('Driving License') }}</span>
                @if($verifyBy == 'Driving License')
                <span class="check-badge absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center text-white">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                </span>
                @endif
            </label>

        </div>

        <form id="submit_client_verify_info" method="post" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="verify_by" id="verify_by" value="{{ $verifyBy }}" />
            <div class="error_msg_container mb-4"></div>

            {{-- Country --}}
            <div class="mb-5">
                <label for="country" class="form-label">{{ __('ID issuing country') }}</label>
                <div class="relative">
                    <select id="country" name="country" class="form-input appearance-none">
                        <option value="">{{ __('Select country') }}</option>
                        @foreach(\Modules\CountryManage\Entities\Country::all_countries() as $country)
                            <option value="{{ $country->id }}" @if(isset($user_identity) && $user_identity->country_id == $country->id) selected @endif>{{ $country->country }}</option>
                        @endforeach
                    </select>
                    <svg class="select-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </div>
            </div>

            @if(!moduleExists('CoinPaymentGateway'))
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
                <div>
                    <label for="state" class="form-label">{{ __('State') }}</label>
                    <div class="relative">
                        <select id="state" name="state" class="get_country_state form-input appearance-none">
                            <option value="">{{ __('Select state') }}</option>
                            @if(isset($user_identity) && $user_identity->state_id)
                                @foreach(\Modules\CountryManage\Entities\State::where('country_id', $user_identity->country_id)->get() as $state)
                                    <option value="{{ $state->id }}" @if($user_identity->state_id == $state->id) selected @endif>{{ $state->state }}</option>
                                @endforeach
                            @endif
                        </select>
                        <svg class="select-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </div>
                    <span class="state_info text-[13px] text-[#F0416C] mt-1 block"></span>
                </div>
                <div>
                    <label for="city" class="form-label">{{ __('City (Optional)') }}</label>
                    <div class="relative">
                        <select id="city" name="city" class="get_state_city form-input appearance-none">
                            <option value="">{{ __('Select city') }}</option>
                            @if(isset($user_identity) && $user_identity->state_id)
                                @foreach(\Modules\CountryManage\Entities\City::where('state_id', $user_identity->state_id)->get() as $city)
                                    <option value="{{ $city->id }}" @if(isset($user_identity->city_id) && $user_identity->city_id == $city->id) selected @endif>{{ $city->city }}</option>
                                @endforeach
                            @endif
                        </select>
                        <svg class="select-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </div>
                    <span class="city_info text-[13px] text-[#F0416C] mt-1 block"></span>
                </div>
            </div>
            @endif

            {{-- Address --}}
            <div class="mb-5">
                <label for="address" class="form-label">{{ __('Address') }}</label>
                <input id="address" name="address" type="text"
                    placeholder="{{ __('Enter address') }}"
                    value="{{ $user_identity->address ?? old('address') }}"
                    class="form-input" />
            </div>

            @if(!moduleExists('CoinPaymentGateway'))
            <div class="mb-5">
                <label for="zipcode" class="form-label">{{ __('Zip code') }}</label>
                <input id="zipcode" name="zipcode" type="text"
                    placeholder="{{ __('Enter zip code') }}"
                    value="{{ $user_identity->zipcode ?? old('zipcode') }}"
                    class="form-input" />
            </div>
            @endif

            {{-- National ID Number --}}
            <div class="mb-7">
                <label for="national_id_number" class="form-label">{{ __('National ID number') }}</label>
                <input id="national_id_number" name="national_id_number" type="text"
                    placeholder="{{ __('Enter id number') }}"
                    value="{{ $user_identity->national_id_number ?? old('national_id_number') }}"
                    class="form-input" />
            </div>

            {{-- Front Side Upload --}}
            <div class="mb-7">
                <label class="form-label">{{ __('Front side') }}</label>
                <label for="front_image" class="upload-box">
                    <input id="front_image" name="front_image" type="file" class="sr-only" accept="image/jpeg,image/png,image/jpg" />
                    <div id="front_default_content" class="flex flex-col items-center">
                        @if(!empty($user_identity) && !empty($user_identity->front_image))
                            @if(cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3', 'cloudFlareR2', 'wasabi']))
                                <img class="max-h-[120px] object-contain rounded mb-2"
                                    src="{{ render_frontend_cloud_image_if_module_exists('verification/'.$user_identity->front_image, load_from: $user_identity->load_from) }}"
                                    alt="{{ __('Front') }}" />
                            @else
                                <img class="max-h-[120px] object-contain rounded mb-2"
                                    src="{{ asset('assets/uploads/verification/'.$user_identity->front_image) }}"
                                    alt="{{ __('Front') }}" />
                            @endif
                            <p class="text-[13px] font-medium text-[#64748b]">{{ __('Click to change') }}</p>
                        @else
                            <svg class="w-5 h-5 text-[#111827]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                            </svg>
                            <p class="mt-4 text-[15px] leading-5 font-semibold text-[#111827]">
                                <span class="text-primary">{{ __('Click to upload') }}</span>
                                {{ __('or drag and drop') }}
                            </p>
                            <p class="mt-2 text-[13px] leading-5 font-medium text-[#64748b]">
                                {{ __('PDF, JPG, JPEG, PNG less than 10 MB.') }}<br />
                                {{ __('Ensure your document are in good condition and readable') }}
                            </p>
                        @endif
                    </div>
                    <img id="front_image_preview" src="" class="hidden max-h-[150px] object-contain rounded" alt="{{ __('Front Preview') }}" />
                </label>
            </div>

            {{-- Back Side Upload --}}
            <div class="mb-7">
                <label class="form-label">{{ __('Back side') }}</label>
                <label for="back_image" class="upload-box">
                    <input id="back_image" name="back_image" type="file" class="sr-only" accept="image/jpeg,image/png,image/jpg" />
                    <div id="back_default_content" class="flex flex-col items-center">
                        @if(!empty($user_identity) && !empty($user_identity->back_image))
                            @if(cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3', 'cloudFlareR2', 'wasabi']))
                                <img class="max-h-[120px] object-contain rounded mb-2"
                                    src="{{ render_frontend_cloud_image_if_module_exists('verification/'.$user_identity->back_image, load_from: $user_identity->load_from) }}"
                                    alt="{{ __('Back') }}" />
                            @else
                                <img class="max-h-[120px] object-contain rounded mb-2"
                                    src="{{ asset('assets/uploads/verification/'.$user_identity->back_image) }}"
                                    alt="{{ __('Back') }}" />
                            @endif
                            <p class="text-[13px] font-medium text-[#64748b]">{{ __('Click to change') }}</p>
                        @else
                            <svg class="w-5 h-5 text-[#111827]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                            </svg>
                            <p class="mt-4 text-[15px] leading-5 font-semibold text-[#111827]">
                                <span class="text-primary">{{ __('Click to upload') }}</span>
                                {{ __('or drag and drop') }}
                            </p>
                            <p class="mt-2 text-[13px] leading-5 font-medium text-[#64748b]">
                                {{ __('PDF, JPG, JPEG, PNG less than 10 MB.') }}<br />
                                {{ __('Ensure your document are in good condition and readable') }}
                            </p>
                        @endif
                    </div>
                    <img id="back_image_preview" src="" class="hidden max-h-[150px] object-contain rounded" alt="{{ __('Back Preview') }}" />
                </label>
            </div>

            <button type="submit"
                class="verification_load_spinner h-[42px] min-w-[118px] px-7 rounded-[7px] bg-primary text-white text-[15px] font-semibold hover:bg-secondary transition">
                {{ __('Submit') }}
            </button>
        </form>

    </div>
</div>

@endif
@endsection

@section('script')
<script>
(function ($) {
    "use strict";
    $(document).ready(function () {

        $('.document-card').on('click', function () {
            $('.document-card').each(function () {
                $(this).removeClass('active');
                $(this).find('.document-icon').removeClass('active');
                $(this).find('.check-badge').remove();
            });
            $(this).addClass('active');
            $(this).find('.document-icon').addClass('active');
            var val = $(this).data('value');
            $('#verify_by').val(val);
            $(this).append(
                '<span class="check-badge absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center text-white">' +
                '<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">' +
                '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></span>'
            );
            $(this).find('input[type="radio"]').prop('checked', true);
        });

        $('#country').on('change', function () {
            $.ajax({
                method: 'post', url: "{{ route('au.state.all') }}", data: { country: $(this).val() },
                success: function (res) {
                    if (res.status === 'success') {
                        var opts = "<option value=''>{{ __('Select state') }}</option>";
                        $.each(res.states, function (i, v) { opts += "<option value='" + v.id + "'>" + v.state + "</option>"; });
                        $('.get_country_state').html(opts);
                        $('.get_state_city').html("<option value=''>{{ __('Select city') }}</option>");
                        $('.state_info').html(res.states.length === 0 ? "{{ __('No state found for selected country!') }}" : '');
                    }
                }
            });
        });

        $('#state').on('change', function () {
            $.ajax({
                method: 'post', url: "{{ route('au.city.all') }}", data: { state: $(this).val() },
                success: function (res) {
                    if (res.status === 'success') {
                        var opts = "<option value=''>{{ __('Select city') }}</option>";
                        $.each(res.cities, function (i, v) { opts += "<option value='" + v.id + "'>" + v.city + "</option>"; });
                        $('.get_state_city').html(opts);
                        $('.city_info').html(res.cities.length === 0 ? "{{ __('No city found for selected state!') }}" : '');
                    }
                }
            });
        });

        $('#front_image').on('change', function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#front_image_preview').attr('src', e.target.result).removeClass('hidden');
                    $('#front_default_content').addClass('hidden');
                };
                reader.readAsDataURL(this.files[0]);
            }
        });

        $('#back_image').on('change', function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#back_image_preview').attr('src', e.target.result).removeClass('hidden');
                    $('#back_default_content').addClass('hidden');
                };
                reader.readAsDataURL(this.files[0]);
            }
        });

        $(document).on('submit', '#submit_client_verify_info', function (e) {
            e.preventDefault();
            var country = $('#country').val();
            var address = $('#address').val();
            var national_id_number = $('#national_id_number').val();
            var front_image = $('#front_image').val();
            var back_image = $('#back_image').val();
            if (!country || !address || !national_id_number || !front_image || !back_image) {
                toastr.warning("{{ __('Except city all fields required !') }}", "Warning !");
                return false;
            }
            $('.verification_load_spinner').html(
                '<svg class="animate-spin w-5 h-5 inline" fill="none" viewBox="0 0 24 24">' +
                '<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +
                '<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>'
            );
            $.ajax({
                url: "{{ route('client.identity.verification') }}",
                method: 'post',
                data: new FormData(this),
                cache: false, contentType: false, processData: false,
                success: function (res) {
                    $('.error_msg_container').html('');
                    $('.verification_load_spinner').html("{{ __('Submit') }}");
                    if (res.status === 'success') {
                        toastr.success("{{ __('Documents successfully submitted') }}", "Success !");
                        setTimeout(function () { location.reload(); }, 1000);
                    }
                },
                error: function (err) {
                    $('.error_msg_container').html('');
                    $('.verification_load_spinner').html("{{ __('Submit') }}");
                    if (err.responseJSON && err.responseJSON.errors) {
                        $.each(err.responseJSON.errors, function (i, v) {
                            $('.error_msg_container').append('<p class="text-sm text-[#F0416C]">' + v + '</p>');
                        });
                    }
                }
            });
        });

    });
}(jQuery));
</script>
@endsection