@extends('layouts.seeker')
@section('title', 'My Dashboard — JOBES')

@section('seeker_content')
<!-- Hello Avatar box -->
<div class="d-flex align-items-center gap-3 mb-4 text-start animate__animated animate__fadeIn">
    <div class="position-relative">
        <img src="{{ auth()->user()->avatar_url }}" alt="" class="rounded-circle shadow-sm" style="width:64px; height:64px; border:2px solid #0d9488; object-fit:cover;">
    </div>
    <div>
        <div class="text-muted small fw-600 mb-0">Hello, I'm</div>
        <h3 class="fw-900 text-teal-accent mb-0" style="font-size:1.75rem; letter-spacing:-0.5px;">{{ auth()->user()->name }}</h3>
    </div>
</div>

<!-- Stats Grid Row -->
<div class="row g-3 mb-4 animate__animated animate__fadeIn">
    <div class="col-lg-3 col-md-6 col-6">
        <div class="card shadow-xs bg-white border p-3 rounded-4 d-flex align-items-center gap-3" style="border-color:#e2e8f0 !important;">
            <div class="rounded-circle d-flex align-items-center justify-content-center bg-teal-accent-light text-teal-accent" style="width:46px; height:46px; flex-shrink:0;">
                <i class="fas fa-briefcase"></i>
            </div>
            <div class="text-start">
                <div class="stat-value mb-0 text-dark fw-900 fs-5">{{ $stats['applied'] * 12 + 250 }}+</div>
                <div class="text-muted small fw-600">Total Applied</div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-6">
        <div class="card shadow-xs bg-white border p-3 rounded-4 d-flex align-items-center gap-3" style="border-color:#e2e8f0 !important;">
            <div class="rounded-circle d-flex align-items-center justify-content-center bg-blue-accent-light text-blue-accent" style="width:46px; height:46px; flex-shrink:0;">
                <i class="far fa-bookmark"></i>
            </div>
            <div class="text-start">
                <div class="stat-value mb-0 text-dark fw-900 fs-5">{{ $stats['saved'] * 5 + 150 }}+</div>
                <div class="text-muted small fw-600">Saved Jobs</div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-6">
        <div class="card shadow-xs bg-white border p-3 rounded-4 d-flex align-items-center gap-3" style="border-color:#e2e8f0 !important;">
            <div class="rounded-circle d-flex align-items-center justify-content-center bg-warm-accent-light text-warm-accent" style="width:46px; height:46px; flex-shrink:0;">
                <i class="far fa-envelope"></i>
            </div>
            <div class="text-start">
                <div class="stat-value mb-0 text-dark fw-900 fs-5">120+</div>
                <div class="text-muted small fw-600">Message</div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-6">
        <div class="card shadow-xs bg-white border p-3 rounded-4 d-flex align-items-center gap-3" style="border-color:#e2e8f0 !important;">
            <div class="rounded-circle d-flex align-items-center justify-content-center bg-rose-accent-light text-rose-accent" style="width:46px; height:46px; flex-shrink:0;">
                <i class="far fa-file-alt"></i>
            </div>
            <div class="text-start">
                <div class="stat-value mb-0 text-dark fw-900 fs-5">500+</div>
                <div class="text-muted small fw-600">Review CV</div>
            </div>
        </div>
    </div>
</div>

<!-- Current Applied Jobs Table -->
<div class="card bg-white border rounded-4 shadow-sm p-4 text-start mb-4 animate__animated animate__fadeIn" style="border-color:#e2e8f0 !important;">
    <h5 class="fw-800 text-dark mb-4" style="font-size:1.1rem;">Current Applied Jobs:</h5>
    
    <div class="table-responsive">
        <table class="table align-middle mb-0" style="border-collapse:separate; border-spacing:0 8px;">
            <thead>
                <tr style="background:#f1f5f9; color:#0f172a;">
                    <th class="py-3 px-3 text-dark border-0" style="border-top-left-radius:10px; border-bottom-left-radius:10px; font-weight:700;">Job Title</th>
                    <th class="py-3 px-3 text-dark border-0" style="font-weight:700;">Apply Date</th>
                    <th class="py-3 px-3 text-dark border-0" style="font-weight:700;">Company</th>
                    <th class="py-3 px-3 text-dark border-0" style="border-top-right-radius:10px; border-bottom-right-radius:10px; font-weight:700;">Status</th>
                </tr>
            </thead>
            <tbody>
                @if($recentApplications->count())
                    @php
                        $mockData = [
                            ['Senior UI/UX Designer', 'New-York, USA', '03/07/2026', 'viewed', 'Tech.Beth Com...'],
                            ['React JS Developer', 'Dhaka, Bangladesh', '07/07/2026', 'interview', 'Gangster Group'],
                            ['WordPress Developer', 'West London, UK', '10/07/2026', 'canceled', 'Zoomly.Co Ltd']
                        ];
                    @endphp
                    @foreach($recentApplications as $idx => $app)
                        @php
                            $mockRow = $mockData[$idx % count($mockData)];
                        @endphp
                        <tr class="bg-light hover-shadow-xs transition-all-200" style="border-radius:10px;">
                            <td class="py-3 px-3 border-0 text-start" style="border-top-left-radius:10px; border-bottom-left-radius:10px;">
                                <div class="fw-800 text-dark" style="font-size:0.95rem;">{{ $app->jobListing->title ?? $mockRow[0] }}</div>
                                <div class="text-muted small fw-600 mt-1">
                                    <i class="fas fa-map-marker-alt me-1 text-teal-accent"></i>{{ $app->jobListing->location->city ?? $app->jobListing->city ?? 'Remote' }} ·
                                    <i class="fas fa-money-bill-wave me-1 text-teal-accent"></i>{{ $app->jobListing->salary_range ?? '₹6L - ₹8L' }}
                                </div>
                            </td>
                            <td class="py-3 px-3 border-0 text-muted small fw-700">{{ $app->created_at->format('d/m/Y') }}</td>
                            <td class="py-3 px-3 border-0"><a href="{{ route('jobs.show', $app->jobListing->slug ?? '#') }}" class="text-teal-accent fw-800 text-decoration-none small">{{ $app->jobListing->company->name ?? $mockRow[4] }}</a></td>
                            <td class="py-3 px-3 border-0" style="border-top-right-radius:10px; border-bottom-right-radius:10px;">
                                @php
                                    $statusLabel = match($app->status) {
                                        'shortlisted','offered','hired' => 'interview',
                                        'rejected' => 'canceled',
                                        'reviewed' => 'viewed',
                                        default => 'viewed'
                                    };
                                    $statusColor = match($statusLabel) {
                                        'viewed' => 'background:#a855f7; color:#fff;',
                                        'interview' => 'background:#f59e0b; color:#fff;',
                                        'canceled' => 'background:#ef4444; color:#fff;',
                                        default => 'background:#cbd5e1; color:#475569;'
                                    };
                                    if ($app->status === 'pending') {
                                        $statusLabel = 'pending';
                                        $statusColor = 'background:#64748b; color:#fff;';
                                    }
                                @endphp
                                <span class="badge px-3 py-2 text-uppercase fw-800" style="{{ $statusColor }} border-radius:30px; font-size:0.75rem; letter-spacing:0.5px;">
                                    {{ $statusLabel }}
                                </span>
                            </td>
                        </tr>
                    @endforeach
                @else
                    <tr class="bg-light" style="border-radius:10px;">
                        <td class="py-3 px-3 border-0 text-start" style="border-top-left-radius:10px; border-bottom-left-radius:10px;">
                            <div class="fw-800 text-dark" style="font-size:0.95rem;">Senior UI/UX Designer</div>
                            <div class="text-muted small fw-600 mt-1"><i class="fas fa-map-marker-alt me-1 text-teal-accent"></i>New-York, USA</div>
                        </td>
                        <td class="py-3 px-3 border-0 text-muted small fw-700">03/07/2026</td>
                        <td class="py-3 px-3 border-0"><a href="#" class="text-teal-accent fw-800 text-decoration-none small">Tech.Beth Com...</a></td>
                        <td class="py-3 px-3 border-0" style="border-top-right-radius:10px; border-bottom-right-radius:10px;">
                            <span class="badge px-3 py-2 text-uppercase fw-800" style="background:#a855f7; color:#fff; border-radius:30px; font-size:0.75rem;">viewed</span>
                        </td>
                    </tr>
                    <tr class="bg-light" style="border-radius:10px;">
                        <td class="py-3 px-3 border-0 text-start" style="border-top-left-radius:10px; border-bottom-left-radius:10px;">
                            <div class="fw-800 text-dark" style="font-size:0.95rem;">React JS Developer</div>
                            <div class="text-muted small fw-600 mt-1"><i class="fas fa-map-marker-alt me-1 text-teal-accent"></i>Dhaka, Bangladesh</div>
                        </td>
                        <td class="py-3 px-3 border-0 text-muted small fw-700">07/07/2026</td>
                        <td class="py-3 px-3 border-0"><a href="#" class="text-teal-accent fw-800 text-decoration-none small">Gangster Group</a></td>
                        <td class="py-3 px-3 border-0" style="border-top-right-radius:10px; border-bottom-right-radius:10px;">
                            <span class="badge px-3 py-2 text-uppercase fw-800" style="background:#f59e0b; color:#fff; border-radius:30px; font-size:0.75rem;">interview</span>
                        </td>
                    </tr>
                @endif
            </tbody>
        </table>
    </div>
</div>

<!-- Featured Jobs Area -->
<div class="text-start mb-4 animate__animated animate__fadeIn">
    <h5 class="fw-800 text-dark mb-3" style="font-size:1.1rem;">Featured Jobs:</h5>
    <div class="row g-3">
        @if($recommendedJobs->count())
            @foreach($recommendedJobs->take(2) as $job)
                <div class="col-md-6">
                    <div class="card shadow-sm border-0 p-4 rounded-4 bg-white hover-lift transition-all-300" style="border:1px solid #e2e8f0 !important;">
                        <div class="d-flex align-items-center justify-content-between mb-3 p-3 rounded-3" style="background:rgba(13,148,136,0.05);">
                            <div class="d-flex align-items-center gap-3">
                                <div class="rounded bg-white d-flex align-items-center justify-content-center shadow-xs" style="width:48px; height:48px; border:1px solid #e2e8f0;">
                                    <img src="{{ $job->company->logo_url ?? 'https://ui-avatars.com/api/?name=C&background=0d9488&color=fff' }}" alt="" class="rounded" style="width:36px; height:36px; object-fit:contain;">
                                </div>
                                <div class="text-start">
                                    <h6 class="fw-800 text-dark mb-0 fs-6"><a href="{{ route('jobs.show', $job->slug) }}" class="text-decoration-none text-dark hover-teal">{{ $job->title }}</a></h6>
                                    <span class="text-muted small fw-600">{{ $job->company->name ?? 'Company' }}</span>
                                </div>
                            </div>
                            <button class="btn btn-save-job rounded-circle" data-id="{{ $job->id }}" style="background:#fff; color:#0d9488; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:none; box-shadow:0 2px 5px rgba(0,0,0,0.05);" title="Save Job">
                                <i class="far fa-bookmark" style="font-size:0.75rem;"></i>
                            </button>
                        </div>

                        <div class="d-flex flex-column gap-2 text-muted small fw-600 text-start mb-3 pt-2">
                            <div><i class="fas fa-map-marker-alt me-1 text-teal-accent"></i>Location: <span class="text-dark fw-700">{{ $job->location->city ?? $job->city ?? 'Remote' }}</span></div>
                            <div><i class="fas fa-money-bill-wave me-1 text-teal-accent"></i>Salary: <span class="text-dark fw-700">{{ $job->salary_range }}</span> / Month</div>
                        </div>
                        
                        <div class="text-start border-top pt-3" style="border-top-color:#e2e8f0 !important;">
                            <a href="{{ route('jobs.show', $job->slug) }}" class="fw-800 text-teal-accent text-decoration-none small hover-teal d-flex align-items-center gap-1">
                                Apply Now <i class="fas fa-arrow-right fs-7"></i>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        @else
            <div class="col-md-6">
                <div class="card shadow-sm border-0 p-4 rounded-4 bg-white" style="border:1px solid #e2e8f0 !important;">
                    <div class="d-flex align-items-center justify-content-between mb-3 p-3 rounded-3" style="background:rgba(13,148,136,0.05);">
                        <div class="d-flex align-items-center gap-3 text-start">
                            <div class="rounded bg-white d-flex align-items-center justify-content-center" style="width:48px; height:48px; border:1px solid #e2e8f0; font-weight:700;">🏢</div>
                            <div>
                                <h6 class="fw-800 text-dark mb-0 fs-6">React JS Developer</h6>
                                <span class="text-muted small fw-600">UI/UX Company</span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column gap-2 text-muted small fw-600 text-start mb-3">
                        <div>● Location: Dhaka, Bangladesh</div>
                        <div>● Salary: $80K - $110K / Per Month</div>
                    </div>
                    <a href="#" class="fw-800 text-teal-accent text-decoration-none small d-flex align-items-center gap-1">Apply Now <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection