@extends('layouts.user')

@section('title', 'KYC Verification')
@section('page-title', 'KYC Verification')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-10">
        @if(auth()->user()->kyc_verified)
        <!-- Already Verified -->
        <div class="card shadow">
            <div class="card-header bg-success text-white py-3">
                <h5 class="mb-0"><i class="fas fa-check-circle me-2"></i>KYC Verified</h5>
            </div>
            <div class="card-body text-center py-5">
                <div class="mb-4">
                    <i class="fas fa-check-circle fa-5x text-success"></i>
                </div>
                <h3 class="text-success mb-3">Your KYC is Verified!</h3>
                <p class="text-muted mb-4">
                    Your account has been successfully verified. You can now enjoy all features including sending SMS.
                </p>
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="card bg-light">
                            <div class="card-body">
                                <div class="row text-start">
                                    <div class="col-md-6">
                                        <strong>Verified Date:</strong><br>
                                        <span class="text-muted">{{ auth()->user()->kycDocument->verified_at->format('M j, Y') }}</span>
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Verified By:</strong><br>
                                        <span class="text-muted">{{ auth()->user()->kycDocument->verifiedBy->name ?? 'System' }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{{ route('user.sms.send') }}" class="btn btn-primary btn-lg">
                        <i class="fas fa-paper-plane me-2"></i>Send SMS Now
                    </a>
                </div>
            </div>
        </div>
        @else
        <!-- KYC Upload Form -->
        <div class="card shadow">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="mb-0"><i class="fas fa-id-card me-2"></i>KYC Document Upload</h5>
            </div>
            <div class="card-body">
                @if(auth()->user()->kyc_status === 'rejected')
                <!-- Rejection Notice -->
                <div class="alert alert-danger">
                    <h6 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>KYC Verification Rejected</h6>
                    <p class="mb-2"><strong>Reason:</strong> {{ auth()->user()->kycDocument->rejection_reason }}</p>
                    <p class="mb-0">Please review the reason and upload correct documents again.</p>
                </div>
                @endif

                <!-- Progress Steps -->
                <div class="row mb-5">
                    <div class="col-12">
                        <div class="progress-steps">
                            <div class="step active">
                                <div class="step-number">1</div>
                                <div class="step-label">Upload Documents</div>
                            </div>
                            <div class="step {{ auth()->user()->kyc_status === 'pending' ? 'active' : '' }}">
                                <div class="step-number">2</div>
                                <div class="step-label">Under Review</div>
                            </div>
                            <div class="step {{ auth()->user()->kyc_verified ? 'active' : '' }}">
                                <div class="step-number">3</div>
                                <div class="step-label">Verified</div>
                            </div>
                        </div>
                    </div>
                </div>

                <form action="{{ route('user.kyc.upload.submit') }}" method="POST" enctype="multipart/form-data" id="kycForm">
                    @csrf
                    
                    <!-- Voter ID Section -->
                    <div class="document-section mb-4">
                        <h6 class="section-title bg-light p-3 rounded">
                            <i class="fas fa-id-card me-2"></i>Voter ID Card (Required)
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="voter_id_front" class="form-label">Front Side *</label>
                                    <input type="file" class="form-control @error('voter_id_front') is-invalid @enderror file-upload-preview" 
                                           id="voter_id_front" name="voter_id_front" accept="image/*" 
                                           data-preview="#voter_front_preview" required>
                                    @error('voter_id_front')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">
                                        Clear image of Voter ID front side. Max 2MB
                                    </small>
                                    <div class="mt-2">
                                        <img src="#" id="voter_front_preview" class="img-thumbnail d-none" style="max-height: 200px;">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="voter_id_back" class="form-label">Back Side *</label>
                                    <input type="file" class="form-control @error('voter_id_back') is-invalid @enderror file-upload-preview" 
                                           id="voter_id_back" name="voter_id_back" accept="image/*" 
                                           data-preview="#voter_back_preview" required>
                                    @error('voter_id_back')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">
                                        Clear image of Voter ID back side. Max 2MB
                                    </small>
                                    <div class="mt-2">
                                        <img src="#" id="voter_back_preview" class="img-thumbnail d-none" style="max-height: 200px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Documents (For Reseller) -->
                    @if(auth()->user()->role === 'reseller')
                    <div class="document-section mb-4">
                        <h6 class="section-title bg-light p-3 rounded">
                            <i class="fas fa-file-contract me-2"></i>Business Documents (Required for Reseller)
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="trade_license" class="form-label">Trade License *</label>
                                    <input type="file" class="form-control @error('trade_license') is-invalid @enderror file-upload-preview" 
                                           id="trade_license" name="trade_license" accept="image/*,application/pdf" 
                                           data-preview="#trade_license_preview" required>
                                    @error('trade_license')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">
                                        Trade License copy. PDF or Image, Max 2MB
                                    </small>
                                    <div class="mt-2">
                                        <div id="trade_license_preview" class="d-none">
                                            <i class="fas fa-file-pdf fa-3x text-danger"></i>
                                            <p class="mt-2">PDF Document</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="tin_certificate" class="form-label">TIN Certificate (Optional)</label>
                                    <input type="file" class="form-control @error('tin_certificate') is-invalid @enderror file-upload-preview" 
                                           id="tin_certificate" name="tin_certificate" accept="image/*,application/pdf" 
                                           data-preview="#tin_certificate_preview">
                                    @error('tin_certificate')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">
                                        TIN Certificate copy. PDF or Image, Max 2MB
                                    </small>
                                    <div class="mt-2">
                                        <div id="tin_certificate_preview" class="d-none">
                                            <i class="fas fa-file-pdf fa-3x text-danger"></i>
                                            <p class="mt-2">PDF Document</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Document Guidelines -->
                    <div class="alert alert-info">
                        <h6 class="alert-heading"><i class="fas fa-info-circle me-2"></i>Document Guidelines</h6>
                        <ul class="mb-0">
                            <li>All documents must be clear and readable</li>
                            <li>File size should not exceed 2MB per document</li>
                            <li>Accepted formats: JPG, PNG, GIF, PDF</li>
                            <li>Make sure all information is visible and not blurred</li>
                            <li>Documents should be valid and not expired</li>
                            @if(!auth()->user()->kyc_verified)
                            <li><strong>Bonus:</strong> Get 10 free SMS after verification!</li>
                            @endif
                        </ul>
                    </div>

                    <!-- Terms Agreement -->
                    <div class="form-group mb-4">
                        <div class="form-check">
                            <input class="form-check-input @error('terms_agreed') is-invalid @enderror" 
                                   type="checkbox" name="terms_agreed" id="terms_agreed" value="1" required>
                            <label class="form-check-label" for="terms_agreed">
                                I certify that all uploaded documents are genuine and belong to me. I understand that providing false documents may result in account suspension.
                            </label>
                            @error('terms_agreed')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('user.dashboard') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
                        </a>
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="fas fa-upload me-2"></i>Submit for Verification
                        </button>
                    </div>
                </form>
            </div>
        </div>
        @endif

        <!-- KYC Status Information -->
        @if(auth()->user()->kyc_status === 'pending')
        <div class="card shadow mt-4">
            <div class="card-header bg-warning text-white py-3">
                <h5 class="mb-0"><i class="fas fa-clock me-2"></i>Verification in Progress</h5>
            </div>
            <div class="card-body">
                <div class="text-center py-4">
                    <i class="fas fa-clock fa-3x text-warning mb-3"></i>
                    <h4 class="text-warning mb-3">Your KYC is Under Review</h4>
                    <p class="text-muted mb-4">
                        We are currently reviewing your documents. This process usually takes 24-48 hours. 
                        You will receive a notification once the verification is complete.
                    </p>
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <div class="row text-start">
                                        <div class="col-md-6">
                                            <strong>Submitted Date:</strong><br>
                                            <span class="text-muted">{{ auth()->user()->kycDocument->created_at->format('M j, Y H:i') }}</span>
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Documents Uploaded:</strong><br>
                                            <span class="text-muted">
                                                Voter ID 
                                                @if(auth()->user()->role === 'reseller')
                                                + Trade License
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // File upload preview for images
    $('.file-upload-preview').change(function() {
        const input = $(this);
        const preview = $(this).data('preview');
        const file = input[0].files[0];
        
        if (file) {
            // Validate file size (2MB)
            if (file.size > 2 * 1024 * 1024) {
                toastr.error('File size must be less than 2MB');
                input.val('');
                return;
            }
            
            // Check if it's an image
            if (file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $(preview).attr('src', e.target.result).removeClass('d-none');
                }
                reader.readAsDataURL(file);
            } else if (file.type === 'application/pdf') {
                // For PDF files, show PDF icon
                $(preview).removeClass('d-none').html(`
                    <i class="fas fa-file-pdf fa-3x text-danger"></i>
                    <p class="mt-2">${file.name}</p>
                `);
            }
        }
    });

    // Form submission
    $('#kycForm').submit(function(e) {
        const voterFront = $('#voter_id_front')[0].files[0];
        const voterBack = $('#voter_id_back')[0].files[0];
        
        if (!voterFront || !voterBack) {
            e.preventDefault();
            toastr.error('Please upload both front and back sides of Voter ID');
            return false;
        }
        
        $('#submitBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Uploading...');
    });
});
</script>
@endpush

@push('styles')
<style>
.progress-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 0 auto;
    max-width: 600px;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    height: 2px;
    background: #dee2e6;
    z-index: 1;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
    border: 3px solid white;
}

.step.active .step-number {
    background: #007bff;
    color: white;
}

.step-label {
    font-size: 14px;
    color: #6c757d;
    text-align: center;
}

.step.active .step-label {
    color: #007bff;
    font-weight: bold;
}

.document-section {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

.section-title {
    margin: 0;
    font-weight: 600;
    color: #495057;
}

.file-upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-upload-area:hover {
    border-color: #007bff;
    background: #f0f8ff;
}

.file-upload-area.dragover {
    border-color: #007bff;
    background: #e7f3ff;
}
</style>
@endpush