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

<style>
    .form-control{
        padding: 9px;
    border-radius: 12px;
    width: 100%;
    color: white;
    background: black;
    }
    .btn-submit {
    background: #4caf50;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
}
</style>

 <div class="app-container">
    <header>
        
        <div class="logo">KYC Verification</div>
    </header>

    <section class="kyc-section">
        <div class="kyc-progress">
            @if($user->kyc_verified == '0')
            <div class="progress-step active" style="background: red;">Not Submit</div>
            @elseif($user->kyc_verified =='2')
            <div class="progress-step active">Pending</div>
            @elseif($user->kyc_verified =='1')
            <div class="progress-step active" style="background: #02c076;">Approved</div>
            @endif
        </div>

@if($user->kyc_verified == '0')
        <form class="kyc-form" action="{{ route('user.kyc.save') }}" method="POST" enctype="multipart/form-data" >
                            @csrf
            <div class="form-section personal-info">
                <h3>Personal Information</h3>
                <div class="input-group">
                    <label>FullName</label>
                    <input type="text" class="form-control"  placeholder="{{$user->name}}" disabled>
                </div>
                <div class="input-group">
                    <label>Email Address</label>
                    <input type="text" class="form-control" placeholder="{{$user->email}}" disabled>
                </div>
                 @if(auth()->user()->country == 'United States')
                 <div class="input-group">
                    <label>SSN</label>
                    <input type="text" name="ssn" class="form-control" placeholder="SSN" required>
                </div>
                @endif
                 
                <div class="input-group">
                    <label class="label" for="select4b">ID Type</label>
                                <select name="id_type" class="form-control custom-select" id="select4b">
                                    <option value="Passport">Passport</option>
                                    <option value="Permit Card">Permit Card</option>
                                    <option value="Voter Card">Voter Card</option>
                                    <option value="National Card">National Card</option>
                                </select>
                </div>
                <div class="input-group">
                    <label>ID Number</label>
                    <input type="text" class="form-control" id="phone4b" placeholder="ID Number" name="id_number" >
                </div>
            </div>

            <div class="form-section document-upload">
                <h3>Document Upload</h3>
                <div class="input-group">
                    <label>Passport or ID</label>
                    <div  >
                        <input type="file" class="form-control" name="image" accept=".png, .jpg, .jpeg" required id="profile_pic">
                        
                    </div>
                </div>
                <div class="input-group">
                    <label>Preview ID Card</label>
                    <div class="file-upload">
                        <img id="profile-preview" src="{{ asset('storage/previewidcard.png') }}" width="70px" alt="Profile Preview" style="border-radius: 20px;width: 280px;height: 150px;">
                    </div>
                </div>
            </div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById('profile_pic').addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('profile-preview').setAttribute('src', e.target.result);
                };
                reader.readAsDataURL(file);
            }
        });
    });
    

</script>

<div class="form-section document-upload">
                 
                <div class="input-group">
                   <button type="submit" class="btn-submit">Submit for Verification</button>
                </div>
            </div>
            
        </form>
        
         @elseif($user->kyc_verified =='2')
        
        <form class="kyc-form" action="{{ route('user.kyc.save') }}" method="POST" enctype="multipart/form-data" >
                            @csrf
            <div class="form-section personal-info">
                <h3>Personal Information</h3>
                <div class="input-group">
                    <label>FullName</label>
                    <input type="text" class="form-control"  placeholder="{{$user->name}}" disabled>
                </div>
                <div class="input-group">
                    <label>Email Address</label>
                    <input type="text" class="form-control" placeholder="{{$user->email}}" disabled>
                </div>
                 @if(auth()->user()->country == 'United States')
                 <div class="input-group">
                    <label>SSN</label>
                    <input type="text" name="ssn" id=""
                                    placeholder="{{$kyc->ssn}}" disabled class="form-control">
                </div>
                @endif
                 
                <div class="input-group">
                    <label class="label" for="select4b">ID Type</label>
                                <select name="id_type" class="form-control custom-select" id="select4b" disabled>
                                    <option value="{{$kyc->id_type}}">{{$kyc->id_type}}</option>
                                    <option value="Passport">Passport</option>
                                    <option value="Permit Card">Permit Card</option>
                                    <option value="Voter Card">Voter Card</option>
                                    <option value="National Card">National Card</option>
                                </select>
                </div>
                <div class="input-group">
                    <label>ID Number</label>
                    <input type="text" class="form-control" id="phone4b" placeholder="{{$kyc->id_number}}" name="id_number" >
                </div>
            </div>

            <div class="form-section document-upload">
                <h3>Document Upload</h3>
                {{--<div class="input-group">
                    <label>Passport or ID</label>
                    <div class="file-upload">
                        <input type="file" id="upload-img" class="form-control" name="image" accept=".png, .jpg, .jpeg" required id="profile_pic">
                        <span id="upload-img">Upload Document</span>
                    </div>
                </div>--}}
                <div class="input-group">
                    <label>Preview ID Card</label>
                    <div class="file-upload">
                        <img id="profile-preview" src="{{ asset('storage/app/public/' . $kyc->image) }}" width="70px" alt="Profile Preview" style="border-radius: 20px;width: 280px;height: 150px;">
                    </div>
                </div>
            </div>
 
             
        </form>
        @elseif($user->kyc_verified == '1')
        
        <form class="kyc-form" action="{{ route('user.kyc.save') }}" method="POST" enctype="multipart/form-data" >
                            @csrf
            <div class="form-section personal-info">
                <h3>Personal Information</h3>
                <div class="input-group">
                    <label>FullName</label>
                    <input type="text" class="form-control"  placeholder="{{$user->name}}" disabled>
                </div>
                <div class="input-group">
                    <label>Email Address</label>
                    <input type="text" class="form-control" placeholder="{{$user->email}}" disabled>
                </div>
                 @if(auth()->user()->country == 'United States')
                 <div class="input-group">
                    <label>SSN</label>
                    <input type="text" name="ssn" id=""
                                    placeholder="{{$kyc->ssn}}" disabled class="form-control">
                </div>
                @endif
                 
                <div class="input-group">
                    <label class="label" for="select4b">ID Type</label>
                                <select name="id_type" class="form-control custom-select" id="select4b" disabled>
                                    <option value="{{$kyc->id_type}}">{{$kyc->id_type}}</option>
                                    <option value="Passport">Passport</option>
                                    <option value="Permit Card">Permit Card</option>
                                    <option value="Voter Card">Voter Card</option>
                                    <option value="National Card">National Card</option>
                                </select>
                </div>
                <div class="input-group">
                    <label>ID Number</label>
                    <input type="text" class="form-control" id="phone4b" placeholder="{{$kyc->id_number}}" name="id_number" >
                </div>
            </div>

            <div class="form-section document-upload">
                <h3>Document Upload</h3>
                {{--<div class="input-group">
                    <label>Passport or ID</label>
                    <div class="file-upload">
                        <input type="file" id="upload-img" class="form-control" name="image" accept=".png, .jpg, .jpeg" required id="profile_pic">
                        <span id="upload-img">Upload Document</span>
                    </div>
                </div>--}}
                <div class="input-group">
                    <label>Preview ID Card</label>
                    <div class="file-upload">
                        <img id="profile-preview" src="{{ asset('storage/app/public/' . $kyc->image) }}" width="70px" alt="Profile Preview" style="border-radius: 20px;width: 280px;height: 150px;">
                    </div>
                </div>
            </div>
 
             
        </form>
        
        @endif
        
        
    </section>

@endsection
