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

    <!-- Dashboard Title -->
    <div class="dashboard-title">
        <h2>Dashboard</h2>
    </div>

    <!-- Stats Cards -->
    <div class="cards-row">
        <div class="stats-card">
            <div class="card-icon">
                <i class="fas fa-file-alt"></i>
            </div>
            <div class="card-content">
                <div class="card-title">Total Resumes</div>
                <div class="card-value">{{ auth()->user()->resumes()->count() }}</div>
            </div>
        </div>

        <div class="stats-card">
            <div class="card-icon">
                <i class="fas fa-download"></i>
            </div>
            <div class="card-content">
                <div class="card-title">Last Updated</div>
                <div class="card-value">
                    {{ auth()->user()->resumes()->latest()->first()?->updated_at?->diffForHumans() ?? 'Never' }}</div>
                {{-- <div class="card-value">{{ auth()->user()->resumes()->sum('download_count') ?? 0 }}</div> --}}
            </div>
        </div>

        <div class="stats-card">
            <div class="card-icon">
                <i class="fas fa-copy"></i>
            </div>
            <div class="card-content">
                <div class="card-title">Total Templates</div>
                <div class="card-value">{{ \App\Models\Template::count() }}</div>
                {{-- <div class="card-value">{{ auth()->user()->resumes()->latest()->first()?->updated_at?->diffForHumans() ?? 'Never' }}</div> --}}
            </div>
        </div>
    </div>

    <!-- Recent Resumes Section -->
    <div class="section-container">
        <div class="section-header">
            <div class="section-title">Recent Resumes</div>
            <a href="{{ route('user.resumes.create') }}" style="text-decoration: none">
                <button class="create-new-btn">
                    <div class="btn-icon">
                        <div class="btn-icon-inner"><i class="far fa-edit"></i></div>
                    </div>
                    <div class="btn-text" style="display: flex; align-items: center;">Create New Resume</div>
                </button>
            </a>
        </div>

        <div class="resumes-table-container">
            @php
                $recentResumes = auth()->user()->resumes()->latest()->take(5)->get();
            @endphp

            @if ($recentResumes->count() > 0)
                <!-- Table Header -->
                <div class="table-header">
                    <div class="table-header-cell title-cell">Title</div>
                    <div class="table-header-cell update-cell">Last Update</div>
                    <div class="table-header-cell downloads-cell">Downloads</div>
                    <div class="table-header-cell actions-cell">Actions</div>
                </div>

                <!-- Table Rows -->
                @foreach ($recentResumes as $resume)
                    <div class="table-row">
                        <div class="table-cell title-cell">{{ $resume->name }} <br>
                            <small class="text-muted">{{ $resume->email }}</small>
                        </div>
                        <div class="table-cell update-cell">{{ $resume->updated_at->diffForHumans() }}</div>
                        <div class="table-cell downloads-cell">{{ $resume->download_count ?? 0 }}</div>
                        <div class="action-buttons">
                            <a href="{{ route('user.resumes.edit', $resume) }}">
                                <div class="action-btn edit-btn" style="background-color: #0B9E8C;">
                                    <div class="action-btn-icon">
                                        <div class="edit-icon"><i class="fas fa-pen" style="color: #FFFFFF;"></i></div>
                                    </div>
                                </div>
                            </a>
                            <a href="{{ route('user.resumes.download', $resume) }}">
                                <div class="action-btn download-btn">
                                    <div class="action-btn-icon">
                                        <i class="fas fa-download"></i>
                                    </div>
                                </div>
                            </a>

                            <div class="action-btn delete-btn button" title="Delete"
                                onclick="deleteResume({{ $resume->id }})">
                                <div class="action-btn-icon">
                                    <i class="far fa-trash-alt"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @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"
                        style="background: #0B9E8C;
                        border: 2px solid #585858;">
                        <i class="fas fa-plus me-1"></i>Create Resume
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Popular Templates Section -->
    <div class="section-container">
        <div class="section-header">
            <div class="section-title">Popular Templates</div>
            <a href="{{ route('user.templates.index') }}" style="text-decoration: none">
                <button class="create-new-btn">
                    <div class="btn-icon">
                        <i class="far fa-eye"></i>
                    </div>
                    <div class="btn-text">View All Templates</div>
                </button>
            </a>
        </div>

        <div class="templates-grid">
            @php
                $templates = \App\Models\Template::where('status', 'active')
                    ->where('is_featured', true)
                    ->limit(4)
                    ->get();
            @endphp

            @forelse($templates->take(3) as $template)
                <!-- Template Card 1 -->
                <div class="template-card">
                    <div class="template-image"><img src="{{ asset('assets/user/assets/images/resume/resume-1.png') }}"
                            alt=""></div>
                    <div class="template-body">
                        <div class="template-info">
                            <div class="template-name">{{ $template->name }}</div>
                            <div class="template-description">{{ Str::limit($template->description, 60) }}</div>
                        </div>

                        <div class="template-tags">
                            @if ($template->is_featured)
                                <div class="tag featured-tag">
                                    <div class="tag-icon">
                                        <img src="{{ asset('assets/user/assets/images/icon/featured-icon.png') }}" alt="">
                                        <!-- <div class="star-icon"></div> -->
                                    </div>
                                    <div class="tag-text">Featured</div>
                                </div>
                            @endif
                            @if ($template->type === 'premium')
                                <div class="tag premium-tag">
                                    <div class="tag-icon">
                                        <img src="{{ asset('assets/user/assets/images/icon/premium-icon.png') }}" alt="">
                                    </div>
                                    <div class="premium-tag-text">Premium</div>
                                </div>
                            @endif
                            @if ($template->type === 'free')
                                <div class="tag executive-tag">
                                    <div class="tag-icon">
                                        <img src="{{ asset('assets/user/assets/images/icon/executive-icon.png') }}" alt="">
                                    </div>
                                    <div class="executive-tag-text">Executive</div>
                                </div>
                            @endif
                        </div>

                        <div class="template-stats">
                            <div class="star-download">
                                <div class="download-stat">
                                    <i class="fas fa-download" style="color: #AEAEAE;"></i>
                                    <!-- <img src="" alt=""> -->
                                    <div class="stat-text">200</div>
                                </div>
                                <div class="download-stat">
                                    <i class="far fa-star" style="color: #AEAEAE;"></i>
                                    <!-- <img src="" alt=""> -->
                                    <div class="stat-text">3.5</div>
                                </div>
                            </div>
                            <div class="free-badge">{{ strtoupper($template->type) }}</div>
                        </div>

                        <div class="template-actions">
                            <a href="{{ route('user.templates.options', $template->id) }}" style="text-decoration: none">
                                <button class="use-template-btn">
                                    Use Template
                                </button>
                            </a>
                            <div class="action-icons">
                                <div class="action-icon">
                                    <i class="far fa-copy"></i>
                                </div>
                                <div class="action-icon">
                                    <i class="far fa-eye"></i>
                                </div>
                            </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>

    <!-- Template Preview Modal -->
    <div class="modal fade" id="templatePreviewModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Template Preview</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="templatePreviewContent" class="text-center">
                        <div class="template-preview-large"
                            style="height: 400px; background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%), linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f8f9fa 75%), linear-gradient(-45deg, transparent 75%, #f8f9fa 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; display: flex; align-items: center; justify-content: center;">
                            <div class="text-center">
                                <i class="fas fa-file-alt fa-5x text-muted"></i>
                                <p class="mt-3 text-muted">Template Preview</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex align-items-center w-100">
                    <div class="me-auto d-flex align-items-center" style="gap: 8px;">
                        <label class="mb-0">Accent</label>
                        <input type="color" id="modalAccentColor" value="#667eea"
                            style="width: 36px; height: 36px; border: none; background: none;">
                    </div>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="useTemplateBtn">Use This Template</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