@extends('layouts.admin')
@php
    use Illuminate\Support\Str;
@endphp

@section('title', 'Applications')

@section('content')
    <header class="page-header">
        <div>
            <p class="eyebrow">Talent</p>
            <h1>Application Tracking</h1>
            <p class="muted">Monitor and manage job applications</p>
        </div>
    </header>

    @php
        $statIcons = [
            'inbox' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2" /><path d="M2 13h5l2 3h6l2-3h5" /></svg>',
            'paper-plane' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z" /><path d="M22 2 11 13" /></svg>',
            'star' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><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 12 2" /></svg>',
            'chat' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5Z" /></svg>',
            'check' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>',
        ];
    @endphp

    <section class="card-grid five-col">
        @foreach ($applicationCards as $card)
            <article class="stat-card compact stat-card--metric"
                style="--card-accent-soft: {{ $card['accent_soft'] ?? 'var(--accent-soft)' }}; --card-accent: {{ $card['accent'] ?? 'var(--accent)' }};">
                <div class="stat-card__icon" aria-hidden="true">
                    {!! $statIcons[$card['icon']] ?? '' !!}
                </div>
                <div class="stat-card__content">
                    <p class="muted">{{ $card['label'] }}</p>
                    <h3>{{ $card['value'] }}</h3>
                    @isset($card['meta'])
                        <p class="stat-meta">{{ $card['meta'] }}</p>
                    @endisset
                </div>
            </article>
        @endforeach
    </section>

    <section class="toolbar toolbar--filters toolbar--applications">
        <div class="toolbar__search full">
            <input type="search" placeholder="Search by name, job or location..." class="input">
        </div>
        <div class="tabs">
            @foreach ($applicationFilters as $filter)
                <button class="tab {{ $filter['active'] ? 'active' : '' }}">
                    {{ $filter['label'] }}
                    <span class="tab__count">{{ $filter['count'] }}</span>
                </button>
            @endforeach
        </div>
    </section>

    <section class="panel panel--table">
        <div class="panel__body">
            <table class="data-table data-table--applications">
                <thead>
                    <tr>
                        <th>Applicant</th>
                        <th>Contact</th>
                        <th>Job Position</th>
                        <th>Experience</th>
                        <th>Location</th>
                        <th>Applied Date</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($applications as $application)
                        <tr>
                            <td>
                                <div class="table-person">
                                    <span class="avatar small">{{ $application['initials'] }}</span>
                                    <div>
                                        <p>{{ $application['name'] }}</p>
                                        <span class="muted">{{ $application['code'] }}</span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <p>{{ $application['email'] }}</p>
                                <span class="muted">{{ $application['phone'] }}</span>
                            </td>
                            <td>{{ $application['position'] }}</td>
                            <td>{{ $application['experience'] }}</td>
                            <td>{{ $application['location'] }}</td>
                            <td><span class="table-date">{{ $application['date'] }}</span></td>
                            <td>
                                <span class="pill pill--status pill--{{ Str::slug($application['status']) }}">{{ $application['status'] }}</span>
                            </td>
                            <td>
                                <div class="table-actions table-actions--stacked">
                                    <button class="icon-btn icon-btn--round" aria-label="View application">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <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>
                                    </button>
                                    <button class="icon-btn icon-btn--round" aria-label="Send message">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5Z" />
                                        </svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>
@endsection

