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


  <!-- My Resumes -->
            <div class="section-container">
                <div class="section-header">
                    <div class="section-title">MY Resumes</div>
                    <div class="header-actions">
                        <a href="{{ route('user.resumes.upload.form') }}" style="text-decoration: none; margin-right: 10px;">
                            <button class="create-new-btn upload-resume-btn">
                                <div class="btn-icon">
                                    <div class="btn-icon-inner"><i class="fas fa-upload"></i></div>
                                </div>
                                <div class="btn-text" style="display: flex;">Upload Resume</div>
                            </button>
                        </a>
                        <button class="create-new-btn">
                            <div class="btn-icon">
                                <div class="btn-icon-inner"><i class="far fa-edit"></i></div>
                            </div>
                            <a href="{{ route('user.resumes.create') }}" style="text-decoration: none;">
                            <div class="btn-text" style="align-items: center; display: flex;">Create New Resume</div>
                            </a>
                        </button>
                    </div>
                </div>


            @if(Auth::user()->resumes()->count() > 0)
                <div class="my-resumes-grid">
                    @foreach(Auth::user()->resumes as $resume)
                    <!-- Resume Card 1 -->
                    <div class="resume-card">
                        <div class="resume-card-header">
                            <div class="resume-title">{{ $resume->name }}</div>
                            <div class="resume-description">{{ Str::limit($resume->summary, 100) }}</div>
                        </div>
                        <div class="resume-card-body">
                            <div class="resume-contact">
                                <div class="contact-item">
                                    <i class="fas fa-envelope"></i>
                                    <div class="contact-item-text">{{ $resume->email }}</div>
                                </div>
                                <div class="contact-item">
                                    <i class="fas fa-phone"></i>
                                    <div class="contact-item-text">{{ $resume->phone }}</div>
                                </div>
                                <div class="contact-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <div class="contact-item-text">{{ $resume->location }}</div>
                                </div>
                            </div>

                            <div class="stats-section">
                                <div class="stat-item">
                                    <div class="stat-icon" style="background: #FFC107;">
                                        <i class="fas fa-briefcase" style="color: black; font-size: 14px;"></i>
                                    </div>
                                    <div class="stat-text">{{ $resume->experiences()->count() }} Experience</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon" style="background: #0B9E8C;">
                                        <i class="fas fa-graduation-cap" style="color: white; font-size: 14px;"></i>
                                    </div>
                                    <div class="stat-text">{{ $resume->educations()->count() }} Education</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon" style="background: #0DCAF0;">
                                        <i class="fas fa-star" style="color: white; font-size: 14px;"></i>
                                    </div>
                                    <div class="stat-text">{{ $resume->skills()->count() }} Skills</div>
                                </div>
                            </div>
                            <div class="resume-card-footer">
                                <div class="last-updated">
                                    <i class="far fa-clock"></i>
                                    <span>{{ $resume->updated_at->diffForHumans() }}</span>
                                </div>
                                <div class="resume-actions">
                                    @if($resume->isUploaded())
                                        <a href="{{ route('user.resumes.view-uploaded', $resume->id) }}" class="resume-action-btn" aria-label="View Resume"><i class="far fa-eye"></i></a>
                                        <a href="{{ route('user.resumes.edit', $resume->id) }}" class="resume-action-btn" aria-label="Edit Resume"><i class="far fa-edit"></i></a>
                                        <a href="{{ route('user.resumes.download.uploaded', $resume->id) }}" class="resume-action-btn" aria-label="Download Original Resume" title="Download Original File"><i class="fas fa-download"></i></a>
                                    @else
                                        <a href="{{ route('user.resumes.show', $resume->id) }}" class="resume-action-btn" aria-label="View Resume"><i class="far fa-eye"></i></a>
                                        <a href="{{ route('user.resumes.edit', $resume->id) }}" class="resume-action-btn" aria-label="Edit Resume"><i class="far fa-edit"></i></a>
                                        <button onclick="showDownloadModal({{ $resume->id }}, '{{ $resume->name }}')" class="resume-action-btn" aria-label="Download Resume" style="border: none;"><i class="fas fa-download"></i></button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach

                    {{-- <!-- Repeat Resume Card for demonstration -->
                    <div class="resume-card">
                        <div class="resume-card-header">
                            <div class="resume-title">Creative Designer</div>
                            <div class="resume-description">Innovative designer with a passion for user-centric
                                solutions and a strong portfolio of successful projects.</div>
                        </div>
                        <div class="resume-card-body">
                            <div class="resume-contact">
                                <div class="contact-item"><i class="fas fa-envelope"></i>
                                    <div class="contact-item-text">designer@example.com</div>
                                </div>
                                <div class="contact-item"><i class="fas fa-phone"></i>
                                    <div class="contact-item-text">+098 765 4321</div>
                                </div>
                                <div class="contact-item"><i class="fas fa-map-marker-alt"></i>
                                    <div class="contact-item-text">San Francisco, USA</div>
                                </div>
                            </div>
                            <div class="resume-stats">
                                <div class="stat-item">
                                    <div class="stat-icon experience"><i class="fas fa-briefcase"></i></div>
                                    <div class="stat-text">5 Experiences</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon education"><i class="fas fa-graduation-cap"></i></div>
                                    <div class="stat-text">1 Education</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon skills"><i class="fas fa-cogs"></i></div>
                                    <div class="stat-text">12 Skills</div>
                                </div>
                            </div>
                            <div class="resume-card-footer">
                                <div class="last-updated"><i class="far fa-clock"></i><span>3 hours ago</span></div>
                                <div class="resume-actions">
                                    <a href="#" class="resume-action-btn" aria-label="Edit Resume"><i
                                            class="far fa-edit"></i></a>
                                    <a href="#" class="resume-action-btn" aria-label="Download Resume"><i
                                            class="fas fa-download"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="resume-card">
                        <div class="resume-card-header">
                            <div class="resume-title">Software Engineer</div>
                            <div class="resume-description">Detail-oriented software engineer specializing in backend
                                development and cloud infrastructure.</div>
                        </div>
                        <div class="resume-card-body">
                            <div class="resume-contact">
                                <div class="contact-item"><i class="fas fa-envelope"></i>
                                    <div class="contact-item-text">dev@example.com</div>
                                </div>
                                <div class="contact-item"><i class="fas fa-phone"></i>
                                    <div class="contact-item-text">+555 123 9876</div>
                                </div>
                                <div class="contact-item"><i class="fas fa-map-marker-alt"></i>
                                    <div class="contact-item-text">Austin, USA</div>
                                </div>
                            </div>
                            <div class="resume-stats">
                                <div class="stat-item">
                                    <div class="stat-icon experience"><i class="fas fa-briefcase"></i></div>
                                    <div class="stat-text">3 Experiences</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon education"><i class="fas fa-graduation-cap"></i></div>
                                    <div class="stat-text">2 Educations</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon skills"><i class="fas fa-cogs"></i></div>
                                    <div class="stat-text">15 Skills</div>
                                </div>
                            </div>
                            <div class="resume-card-footer">
                                <div class="last-updated"><i class="far fa-clock"></i><span>1 day ago</span></div>
                                <div class="resume-actions">
                                    <a href="#" class="resume-action-btn" aria-label="Edit Resume"><i
                                            class="far fa-edit"></i></a>
                                    <a href="#" class="resume-action-btn" aria-label="Download Resume"><i
                                            class="fas fa-download"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Resume Card 4 -->
                    <div class="resume-card">
                        <div class="resume-card-header">
                            <div class="resume-title">Marketing Specialist</div>
                            <div class="resume-description">Results-driven marketing specialist with experience in
                                digital campaigns and market analysis.</div>
                        </div>
                        <div class="resume-card-body">
                            <div class="resume-contact">
                                <div class="contact-item">
                                    <i class="fas fa-envelope"></i>
                                    <div class="contact-item-text">marketing@example.com</div>
                                </div>
                                <div class="contact-item">
                                    <i class="fas fa-phone"></i>
                                    <div class="contact-item-text">+111 222 3333</div>
                                </div>
                                <div class="contact-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <div class="contact-item-text">Chicago, USA</div>
                                </div>
                            </div>
                            <div class="resume-stats">
                                <div class="stat-item">
                                    <div class="stat-icon experience"><i class="fas fa-briefcase"></i></div>
                                    <div class="stat-text">4 Experiences</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon education"><i class="fas fa-graduation-cap"></i></div>
                                    <div class="stat-text">1 Education</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon skills"><i class="fas fa-cogs"></i></div>
                                    <div class="stat-text">10 Skills</div>
                                </div>
                            </div>
                            <div class="resume-card-footer">
                                <div class="last-updated">
                                    <i class="far fa-clock"></i>
                                    <span>2 days ago</span>
                                </div>
                                <div class="resume-actions">
                                    <a href="#" class="resume-action-btn" aria-label="Edit Resume"><i
                                            class="far fa-edit"></i></a>
                                    <a href="#" class="resume-action-btn" aria-label="Download Resume"><i
                                            class="fas fa-download"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Resume Card 5 -->
                    <div class="resume-card">
                        <div class="resume-card-header">
                            <div class="resume-title">Data Analyst</div>
                            <div class="resume-description">Analytical and detail-oriented data analyst with a knack for
                                turning data into actionable insights.</div>
                        </div>
                        <div class="resume-card-body">
                            <div class="resume-contact">
                                <div class="contact-item"><i class="fas fa-envelope"></i>
                                    <div class="contact-item-text">analyst@example.com</div>
                                </div>
                                <div class="contact-item"><i class="fas fa-phone"></i>
                                    <div class="contact-item-text">+444 555 6666</div>
                                </div>
                                <div class="contact-item"><i class="fas fa-map-marker-alt"></i>
                                    <div class="contact-item-text">Seattle, USA</div>
                                </div>
                            </div>
                            <div class="resume-stats">
                                <div class="stat-item">
                                    <div class="stat-icon experience"><i class="fas fa-briefcase"></i></div>
                                    <div class="stat-text">2 Experiences</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon education"><i class="fas fa-graduation-cap"></i></div>
                                    <div class="stat-text">2 Educations</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon skills"><i class="fas fa-cogs"></i></div>
                                    <div class="stat-text">11 Skills</div>
                                </div>
                            </div>
                            <div class="resume-card-footer">
                                <div class="last-updated"><i class="far fa-clock"></i><span>5 days ago</span></div>
                                <div class="resume-actions">
                                    <a href="#" class="resume-action-btn" aria-label="Edit Resume"><i
                                            class="far fa-edit"></i></a>
                                    <a href="#" class="resume-action-btn" aria-label="Download Resume"><i
                                            class="fas fa-download"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Resume Card 6 -->
                    <div class="resume-card">
                        <div class="resume-card-header">
                            <div class="resume-title">Project Manager</div>
                            <div class="resume-description">Experienced Project Manager with a proven track record of
                                leading teams to success.</div>
                        </div>
                        <div class="resume-card-body">
                            <div class="resume-contact">
                                <div class="contact-item"><i class="fas fa-envelope"></i>
                                    <div class="contact-item-text">pm@example.com</div>
                                </div>
                                <div class="contact-item"><i class="fas fa-phone"></i>
                                    <div class="contact-item-text">+777 888 9999</div>
                                </div>
                                <div class="contact-item"><i class="fas fa-map-marker-alt"></i>
                                    <div class="contact-item-text">Boston, USA</div>
                                </div>
                            </div>
                            <div class="resume-stats">
                                <div class="stat-item">
                                    <div class="stat-icon experience"><i class="fas fa-briefcase"></i></div>
                                    <div class="stat-text">6 Experiences</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon education"><i class="fas fa-graduation-cap"></i></div>
                                    <div class="stat-text">1 Education</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon skills"><i class="fas fa-cogs"></i></div>
                                    <div class="stat-text">14 Skills</div>
                                </div>
                            </div>
                            <div class="resume-card-footer">
                                <div class="last-updated"><i class="far fa-clock"></i><span>1 week ago</span></div>
                                <div class="resume-actions">
                                    <a href="#" class="resume-action-btn" aria-label="Edit Resume"><i
                                            class="far fa-edit"></i></a>
                                    <a href="#" class="resume-action-btn" aria-label="Download Resume"><i
                                            class="fas fa-download"></i></a>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    <!-- Add more resume cards as needed -->
                </div>
                  @else
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body text-center py-5">
                                <div class="mb-4">
                                    <i class="fas fa-file-alt text-muted" style="font-size: 4rem;"></i>
                                </div>
                                <h4 class="text-muted mb-3">No resumes yet</h4>
                                <p class="text-muted mb-4">Create your first professional resume to get started</p>
                                <a href="{{ route('user.resumes.create') }}" class="btn btn-primary btn-lg" style="background-color: #0B9E8C; border: none;">
                                    <i class="fas fa-plus mr-2"></i>
                                    Create Your First Resume
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            </div>

            <style>
                .header-actions {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }

                @media (max-width: 768px) {
                    .header-actions {
                        flex-direction: column;
                        width: 100%;
                    }

                    .header-actions a {
                        width: 100%;
                    }

                    .upload-resume-btn,
                    .create-new-btn {
                        width: 100%;
                        justify-content: center;
                    }
                }
            </style>

@endsection