@extends('user.layout.app')
@section('title', 'Dashboard')
@section('content')

<!-- Welcome Section -->
<div class="user-profile-section">
    <div class="row align-items-center">
        <div class="col-md-8">
            <h2 class="mb-2">Welcome back, {{ Auth::user()->name }}! 👋</h2>
            <p class="mb-0 opacity-75">Ready to create your next professional resume?</p>
        </div>
        <div class="col-md-4 text-md-end">
            <img src="{{ asset('assets/admin/img/user.png') }}" alt="User Avatar" class="user-avatar">
        </div>
    </div>
</div>

<!-- Quick Stats -->
<div class="row mb-4">
    <div class="col-lg-4 col-md-6 mb-3">
        <div class="stat-card">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                    <div class="quick-action-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h4 class="mb-1">{{ auth()->user()->resumes()->count() }}</h4>
                    <p class="text-muted mb-0">Total Resumes</p>
                </div>
            </div>
        </div>
    </div>
    {{-- <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                    <div class="quick-action-icon">
                        <i class="fas fa-download"></i>
                    </div>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h4 class="mb-1">{{ auth()->user()->resumes()->sum('download_count') ?: 0 }}</h4>
                    <p class="text-muted mb-0">Downloads</p>
                </div>
            </div>
        </div>
    </div> --}}
    <div class="col-lg-4 col-md-6 mb-3">
        <div class="stat-card">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                    <div class="quick-action-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h4 class="mb-1">{{ auth()->user()->resumes()->latest()->first()?->updated_at?->diffForHumans() ?? 'Never' }}</h4>
                    <p class="text-muted mb-0">Last Updated</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 mb-3">
        <div class="stat-card">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                    <div class="quick-action-icon">
                        <i class="fas fa-crown"></i>
                    </div>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h4 class="mb-1">{{ auth()->user()->subscription ? 'Active' : 'Free' }}</h4>
                    <p class="text-muted mb-0">Premium Status</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0"><i class="fas fa-bolt text-primary me-2"></i>Quick Actions</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <div class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-plus"></i>
                            </div>
                            <h5 class="mb-2">Create New Resume</h5>
                            <p class="text-muted mb-3">Start building a professional resume from scratch</p>
                            <a href="{{ route('user.resumes.create') }}" class="btn btn-primary btn-sm">
                                <i class="fas fa-plus me-1"></i>Create Resume
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-copy"></i>
                            </div>
                            <h5 class="mb-2">Duplicate Resume</h5>
                            <p class="text-muted mb-3">Create a copy of an existing resume</p>
                            <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#duplicateModal">
                                <i class="fas fa-copy me-1"></i>Duplicate
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-upload"></i>
                            </div>
                            <h5 class="mb-2">Import Resume</h5>
                            <p class="text-muted mb-3">Upload and convert existing resume</p>
                            <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#importModal">
                                <i class="fas fa-upload me-1"></i>Import
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Resumes -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0"><i class="fas fa-file-text text-primary me-2"></i>Recent Resumes</h4>
                <a href="{{ route('user.resumes.index') }}" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-eye me-1"></i>View All
                </a>
            </div>
            <div class="card-body">
                @php
                    $recentResumes = auth()->user()->resumes()->latest()->take(5)->get();
                @endphp

                @if($recentResumes->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Resume Name</th>
                                    <th>Last Updated</th>
                                    <th>Downloads</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentResumes as $resume)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-file-alt text-primary me-2"></i>
                                            <div>
                                                <h6 class="mb-0">{{ $resume->name }}</h6>
                                                <small class="text-muted">{{ $resume->email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $resume->updated_at->diffForHumans() }}</td>
                                    <td>
                                        <span class="badge bg-light text-dark">{{ $resume->download_count ?? 0 }}</span>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{{ route('user.resumes.edit', $resume) }}" class="btn btn-outline-primary" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="{{ route('user.resumes.download', $resume) }}" class="btn btn-outline-success" title="Download">
                                                <i class="fas fa-download"></i>
                                            </a>
                                            <button type="button" class="btn btn-outline-danger" title="Delete" onclick="deleteResume({{ $resume->id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No resumes yet</h5>
                        <p class="text-muted">Create your first resume to get started</p>
                        <a href="{{ route('user.resumes.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i>Create Resume
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Popular Templates -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0"><i class="fas fa-palette text-primary me-2"></i>Popular Templates</h4>
                <a href="{{ route('user.templates.index') }}" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-eye me-1"></i>View All Templates
                </a>
            </div>
            <div class="card-body">
                <div class="row">
                    @php
                        $templates = \App\Models\Template::where('status', 'active')
                            ->where('is_featured', true)
                            ->limit(4)
                            ->get();
                    @endphp

                    @forelse($templates as $template)
                        <div class="col-md-6 col-lg-3 mb-3">
                            <div class="template-card h-100">
                                <div class="template-preview mb-3" style="height: 150px; background: white; border: 1px solid #e9ecef; border-radius: 10px; position: relative; overflow: hidden;">
                                    <div class="template-preview-content" style="padding: 12px; height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
                                        <!-- Header -->
                                        <div class="template-header" style="border-bottom: 2px solid #667eea; padding-bottom: 8px; margin-bottom: 8px;">
                                            <h5 style="margin: 0; color: #667eea; font-weight: 600; font-size: 0.9rem;">{{ $template->name }}</h5>
                                            <p style="margin: 3px 0 0 0; color: #6c757d; font-size: 0.7rem;">Software Engineer</p>
                                        </div>

                                        <!-- Content -->
                                        <div class="template-content" style="flex: 1;">
                                            <div class="template-section">
                                                <h6 style="margin: 0 0 3px 0; color: #495057; font-size: 0.6rem; text-transform: uppercase; font-weight: 600;">Experience</h6>
                                                <div style="background: #f8f9fa; padding: 6px; border-radius: 3px; border-left: 2px solid #667eea;">
                                                    <p style="margin: 0; font-size: 0.6rem; color: #495057;"><strong>Senior Developer</strong></p>
                                                    <p style="margin: 1px 0 0 0; font-size: 0.5rem; color: #6c757d;">Tech Corp • 2020-Present</p>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Footer -->
                                        <div class="template-footer" style="border-top: 1px solid #e9ecef; padding-top: 6px; margin-top: 6px;">
                                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                                <span style="font-size: 0.5rem; color: #6c757d;">{{ $template->category }}</span>
                                                <span style="font-size: 0.5rem; color: #667eea; font-weight: 600;">{{ strtoupper($template->type) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="template-info p-3">
                                    <h6 class="mb-2">{{ $template->name }}</h6>
                                    <p class="text-muted small mb-3">{{ Str::limit($template->description, 60) }}</p>
                                    <div class="template-badges mb-3">
                                        @if($template->is_featured)
                                            <span class="badge bg-warning text-dark me-1">
                                                <i class="fas fa-star"></i> Featured
                                            </span>
                                        @endif
                                        @if($template->type === 'premium')
                                            <span class="badge bg-primary">
                                                <i class="fas fa-crown"></i> Premium
                                            </span>
                                        @endif
                                        <span class="badge bg-info">{{ $template->category }}</span>
                                    </div>
                                    <div class="template-actions">
                                        <a href="{{ route('user.templates.options', $template->id) }}" class="btn btn-outline-primary btn-sm btn-block">
                                            <i class="fas fa-edit me-1"></i>Use Template
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="text-center py-4">
                                <i class="fas fa-palette fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">No templates available</h5>
                                <p class="text-muted">Check back later for new templates</p>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Duplicate Resume Modal -->
<div class="modal fade" id="duplicateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Duplicate Resume</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Select a resume to duplicate:</p>
                <select class="form-control" id="resumeToDuplicate">
                    @foreach(auth()->user()->resumes as $resume)
                        <option value="{{ $resume->id }}">{{ $resume->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="duplicateResume()">Duplicate</button>
            </div>
        </div>
    </div>
</div>

<!-- Import Resume Modal -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import Resume</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="importForm" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Upload Resume File</label>
                        <input type="file" class="form-control" name="resume_file" accept=".pdf,.doc,.docx">
                        <small class="text-muted">Supported formats: PDF, DOC, DOCX (max 5MB)</small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="importResume()">Import</button>
            </div>
        </div>
    </div>
</div>

<script>
function deleteResume(resumeId) {
    if (confirm('Are you sure you want to delete this resume?')) {
        fetch(`/resumes/${resumeId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error deleting resume');
            }
        });
    }
}

function duplicateResume() {
    const resumeId = document.getElementById('resumeToDuplicate').value;
    if (resumeId) {
        window.location.href = `/resumes/${resumeId}/duplicate`;
    }
}

function importResume() {
    const form = document.getElementById('importForm');
    const formData = new FormData(form);

    fetch('/resumes/import', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error importing resume');
        }
    });
}
</script>

@endsection