@extends('layouts.admin')

@section('title', 'KYC Timeline - ' . $seller->company_name)

@section('admin-content')
<style>
    .timeline { position: relative; padding-left: 2rem; }
    .timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: #e5e7eb; }
    .timeline-item { position: relative; padding-bottom: 1.5rem; }
    .timeline-item:last-child { padding-bottom: 0; }
    .timeline-icon { position: absolute; left: -2rem; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
    .timeline-content { background: #fff; border-radius: 12px; padding: 1rem 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-left: 0.5rem; }
    
    .seller-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 16px; padding: 2rem; }
    .seller-avatar { width: 80px; height: 80px; border-radius: 16px; object-fit: cover; border: 4px solid rgba(255,255,255,0.3); }
    .seller-initials-lg { width: 80px; height: 80px; border-radius: 16px; background: rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; }
    
    .doc-card { background: #fff; border-radius: 12px; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 0.2s; }
    .doc-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
    .doc-preview { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; }
</style>

<div class="kyc-detail-page">
    <!-- Back Button -->
    <div class="mb-4">
        <a href="{{ route('admin.kyc.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i>Back to KYC List
        </a>
    </div>

    <!-- Seller Header -->
    <div class="seller-header mb-4">
        <div class="d-flex align-items-center gap-4">
            @if($seller->photo)
                <img src="{{ asset('storage/' . $seller->photo) }}" class="seller-avatar" alt="Seller Photo">
            @else
                <div class="seller-initials-lg">{{ strtoupper(substr($seller->company_name ?? 'S', 0, 2)) }}</div>
            @endif
            <div>
                <h3 class="fw-bold mb-1">{{ $seller->company_name }}</h3>
                <p class="mb-2 opacity-75">{{ $seller->user->name ?? 'N/A' }} • {{ $seller->user->email ?? '' }}</p>
                <div class="d-flex gap-2">
                    <span class="badge bg-white bg-opacity-20 text-white">
                        <i class="bi bi-{{ $seller->subscription_id ? 'gem' : 'person' }} me-1"></i>
                        {{ $seller->plan->name ?? 'Free Plan' }}
                    </span>
                    @if($seller->is_verified)
                        <span class="badge bg-success"><i class="bi bi-patch-check-fill me-1"></i>KYC Verified</span>
                    @else
                        <span class="badge bg-warning text-dark"><i class="bi bi-clock me-1"></i>Pending Verification</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Left: Documents -->
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-header bg-white border-0 pt-4 px-4">
                    <h5 class="fw-bold mb-0"><i class="bi bi-file-earmark-text me-2 text-primary"></i>Uploaded Documents</h5>
                </div>
                <div class="card-body p-4">
                    @forelse($documents as $doc)
                        @php
                            $isImage = preg_match('/\.(jpg|jpeg|png|webp)$/i', $doc->file_path);
                            $docLabels = [
                                'gst' => 'GST Certificate',
                                'pan' => 'PAN Card',
                                'aadhar' => 'Aadhar Card',
                                'incorporation' => 'Incorporation Certificate'
                            ];
                        @endphp
                        <div class="doc-card mb-3 d-flex align-items-center gap-3">
                            @if($isImage)
                                <img src="{{ asset('storage/' . $doc->file_path) }}" class="doc-preview" alt="Document">
                            @else
                                <div class="doc-preview bg-light d-flex align-items-center justify-content-center">
                                    <i class="bi bi-file-earmark-pdf fs-2 text-danger"></i>
                                </div>
                            @endif
                            <div class="flex-grow-1">
                                <h6 class="fw-bold mb-1">{{ $docLabels[$doc->document_type] ?? ucfirst($doc->document_type) }}</h6>
                                <small class="text-muted">Uploaded {{ $doc->created_at->format('d M Y, h:i A') }}</small>
                                <div class="mt-2">
                                    @if($doc->status == 'pending')
                                        <span class="badge bg-warning text-dark"><i class="bi bi-clock me-1"></i>Pending</span>
                                    @elseif($doc->status == 'approved')
                                        <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Approved</span>
                                    @else
                                        <span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i>Rejected</span>
                                    @endif
                                </div>
                            </div>
                            <a href="{{ asset('storage/' . $doc->file_path) }}" target="_blank" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-eye"></i>
                            </a>
                        </div>
                    @empty
                        <div class="text-center py-4 text-muted">
                            <i class="bi bi-inbox fs-1 opacity-50 d-block mb-2"></i>
                            No documents uploaded yet.
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Seller Details -->
            <div class="card border-0 shadow-sm rounded-4 mt-4">
                <div class="card-header bg-white border-0 pt-4 px-4">
                    <h5 class="fw-bold mb-0"><i class="bi bi-person-lines-fill me-2 text-primary"></i>Seller Details</h5>
                </div>
                <div class="card-body p-4">
                    <table class="table table-borderless small mb-0">
                        <tr>
                            <td class="text-muted" style="width: 40%;">PAN Number</td>
                            <td class="fw-medium">{{ $seller->pan_number ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">GST Number</td>
                            <td class="fw-medium">{{ $seller->gst ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Udyam Number</td>
                            <td class="fw-medium">{{ $seller->udyam_number ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">City</td>
                            <td class="fw-medium">{{ $seller->city ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">State</td>
                            <td class="fw-medium">{{ $seller->state ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Joined</td>
                            <td class="fw-medium">{{ $seller->created_at->format('d M Y') }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- Right: Timeline -->
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-header bg-white border-0 pt-4 px-4">
                    <h5 class="fw-bold mb-0"><i class="bi bi-clock-history me-2 text-primary"></i>Activity Timeline</h5>
                </div>
                <div class="card-body p-4">
                    @if($activities->count() > 0)
                        <div class="timeline">
                            @foreach($activities as $activity)
                                <div class="timeline-item">
                                    <div class="timeline-icon">
                                        <i class="bi {{ $activity->action_icon }}"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <div class="d-flex justify-content-between align-items-start mb-1">
                                            <h6 class="fw-bold mb-0">{{ $activity->action_label }}</h6>
                                            <small class="text-muted">{{ $activity->created_at->diffForHumans() }}</small>
                                        </div>
                                        <p class="text-muted small mb-1">
                                            @if($activity->document)
                                                {{ ucfirst($activity->document->document_type) }} document
                                            @endif
                                        </p>
                                        @if($activity->notes)
                                            <div class="bg-light rounded-2 p-2 small">
                                                <i class="bi bi-quote me-1 text-muted"></i>{{ $activity->notes }}
                                            </div>
                                        @endif
                                        <div class="mt-2 small">
                                            <span class="badge bg-{{ $activity->actor_type == 'admin' ? 'primary' : 'secondary' }} bg-opacity-10 text-{{ $activity->actor_type == 'admin' ? 'primary' : 'secondary' }}">
                                                <i class="bi bi-{{ $activity->actor_type == 'admin' ? 'shield-check' : 'person' }} me-1"></i>
                                                {{ $activity->actor->name ?? 'System' }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4 text-muted">
                            <i class="bi bi-clock-history fs-1 opacity-50 d-block mb-2"></i>
                            No activity recorded yet.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
