{{-- resources/views/ats/dashboard.blade.php --}}
@extends('layouts.app')

@section('title', 'Dashboard - ATS Score Checker')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
@endpush

@section('content')
<!-- Dashboard Content -->
<div class="dashboard-container">
    <!-- Dashboard Header -->
    <div class="dashboard-header">
        <div class="dashboard-title-section">
            <h1 class="dashboard-title">Candidate Dashboard</h1>
            <p class="dashboard-subtitle">
                CV analysis, job matches, ATS scoring, and career
                insights
            </p>
        </div>

        {{-- <div class="dashboard-actions">
            <button class="btn-secondary">
                <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <polygon
                        points="22,3 2,3 10,12.46 10,19 14,21 14,12.46"
                    />
                </svg>
                Advanced Filters
            </button>
            <button class="btn-primary">
                <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <line x1="12" y1="5" x2="12" y2="19" />
                    <line x1="5" y1="12" x2="19" y2="12" />
                </svg>
                Add Candidate
            </button>
        </div> --}}
    </div>

    <!-- Stats Section -->
    <div class="stats-section">
        <!-- Total Candidates -->
        <div class="stat-card">
            <div class="stat-icon candidates">
                <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path
                        d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
                    />
                    <circle cx="12" cy="7" r="4" />
                </svg>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ $totalAnalyses }}</div>
                <div class="stat-label">Total Candidates</div>
                <div class="stat-progress">
                    <div
                        class="stat-progress-bar green"
                        style="width: 100%"
                    ></div>
                </div>
            </div>
        </div>

        <!-- Analyzed -->
        <div class="stat-card">
            <div class="stat-icon analyzed">
                <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <polyline
                        points="22,12 18,12 15,21 9,3 6,12 2,12"
                    />
                </svg>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ $totalAnalyses }}</div>
                <div class="stat-label">Analyzed</div>
                <div class="stat-progress">
                    <div
                        class="stat-progress-bar green"
                        style="width: 100%"
                    ></div>
                </div>
                <div class="stat-status">100.0% Complete</div>
            </div>
        </div>

        <!-- Pending Analysis -->
        <div class="stat-card">
            <div class="stat-icon pending">
                <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path
                        d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
                    />
                    <polyline points="14,2 14,8 20,8" />
                    <line x1="16" y1="13" x2="8" y2="13" />
                    <line x1="16" y1="17" x2="8" y2="17" />
                    <polyline points="10,9 9,9 8,9" />
                </svg>
            </div>
            <div class="stat-content">
                <div class="stat-value">0</div>
                <div class="stat-label">Pending Analysis</div>
                <div class="stat-time">
                    <svg
                        width="12"
                        height="12"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <circle cx="12" cy="12" r="10" />
                        <polyline points="12,6 12,12 16,14" />
                    </svg>
                    Est. 2-5 mins
                </div>
            </div>
        </div>

        <!-- Average Match Score -->
        <div class="stat-card">
            <div class="stat-icon score">
                <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <polygon
                        points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"
                    />
                </svg>
            </div>
            <div class="stat-content">

        <div class="stat-value">{{ rtrim(rtrim(number_format($averageScore, 2, '.', ''), '0'), '.') }}
            %</div>
                <div class="stat-label">Average Match Score</div>
                <div class="stat-badge">
                    <svg
                        width="12"
                        height="12"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <polygon
                            points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"
                        />
                    </svg>
                    Career Progress
                </div>
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <form method="GET" action="{{ route('dashboard') }}" class="filters-section mb-4">
        <div class="filters-grid">
            <div class="filter-group">
                <label>Search Candidates</label>
                <input
                    type="text"
                    name="search"
                    class="filter-input"
                    placeholder="Search by name, email, or skills..."
                    value="{{ request('search') }}"
                />
            </div>
            {{-- <div class="filter-group">
                <label>Status</label>
                <select name="status" class="filter-select">
                    <option {{ request('status') == 'All Status' ? 'selected' : '' }}>All Status</option>
                    <option {{ request('status') == 'Completed' ? 'selected' : '' }}>Completed</option>
                    <option {{ request('status') == 'Pending' ? 'selected' : '' }}>Pending</option>
                    <option {{ request('status') == 'In Review' ? 'selected' : '' }}>In Review</option>
                </select>
            </div> --}}
            <div class="filter-group">
                <label>Sort By</label>
                <select name="sort_by" class="filter-select">
                    <option {{ request('sort_by') == 'Highest Score' ? 'selected' : '' }}>Highest Score</option>
                    <option {{ request('sort_by') == 'Lowest Score' ? 'selected' : '' }}>Lowest Score</option>
                    <option {{ request('sort_by') == 'Recent' ? 'selected' : '' }}>Recent</option>
                    <option {{ request('sort_by') == 'Alphabetical' ? 'selected' : '' }}>Alphabetical</option>
                </select>
            </div>
            <div class="filter-group">
                <label>Min Score</label>
                <input
                    type="number"
                    name="min_score"
                    class="filter-input"
                    placeholder="0"
                    min="0"
                    max="100"
                    value="{{ request('min_score') }}"
                />
            </div>
            <div>
                <button type="submit" class="btn-filter-apply">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46"/>
                    </svg>
                    Filter
                </button>
            </div>
        </div>
    </form>

    <!-- Candidate List -->
    <div class="candidates-table">

        <div class="table-header">
            <div>Candidate</div>
            <div>Overall Score</div>
            <div>Skills Breakdown</div>
            <div>Status</div>
            <div>Uploaded</div>
            <div>Actions</div>
        </div>

        @if(isset($candidates) && count($candidates) > 0)

            @foreach($candidates as $candidate)
                @php

                    $analysis = $candidate->analysis_data ?? [];
                    $skills = [
                        'Technical' => $candidate->analysis_data['content_score'] ?? 0, // Replace with dynamic if available
                        'Experience' => $candidate['ats_score'] ?? 0, // Replace with dynamic if available
                        'Education' => $candidate->analysis_data['keyword_density_score'] ?? 0, // Replace with dynamic if available
                    ];
                    // If you have these scores in $analysis, use them instead.
                    if(isset($analysis['skills_breakdown'])) {
                        $skills = $analysis['skills_breakdown'];
                    }
                    $uploaded = \Carbon\Carbon::parse($candidate->created_at)->format('M d, Y');
                    $email = $candidate->email ?? ($analysis['email'] ?? null);
                @endphp

                <div class="candidate-row">
                    <div class="candidate-info">
                        <div class="candidate-avatar">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                                <circle cx="12" cy="7" r="4" />
                            </svg>
                        </div>
                        <div class="candidate-details">
                            <h4>{{ $candidate->candidate_name }}</h4>
                            <p>{{ $email ?? 'No email provided' }}</p>
                        </div>
                    </div>
                    <div class="score-container">
                        <span class="score-value">{{ number_format($candidate->ats_score, 1) }}%</span>
                        <div class="score-bar">
                            <div class="score-fill" style="width: {{ $candidate->ats_score }}%"></div>
                        </div>
                    </div>
                    <div class="skills-breakdown">
                        @foreach($skills as $label => $score)
                            <div>{{ $label }}: <strong>{{ number_format($score, 1) }}%</strong></div>
                        @endforeach
                    </div>
                    <div>
                        <span class="status-badge">
                            @if(isset($candidate->status))
                                {{ $candidate->status }}
                            @else
                                ✓ Completed
                            @endif
                        </span>
                    </div>
                    <div class="upload-date">{{ $uploaded }}</div>
                    <div>
                        <a href="{{ route('results', ['id' => $candidate->id]) }}" class="action-btn">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                <circle cx="12" cy="12" r="3" />
                            </svg>
                        </a>
                    </div>
                </div>
            @endforeach
        @else
            <div class="candidate-row"><center>No Candidate data found</center></div>
        @endif

        {{ $candidates->links() }}
    </div>

</div>
@endsection