@extends('layouts.admin')

@section('title', 'Job Management')

@section('content')
    <header class="page-header">
        <div>
            <p class="eyebrow">Hiring</p>
            <h1>Job Management</h1>
            <p class="muted">Create and manage job postings</p>
        </div>
    </header>

    @php
        $statIcons = [
            'briefcase' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2" /><path d="M8 7V4h8v3" /><path d="M12 12v3" /></svg>',
            '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>',
            '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>',
            '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>',
        ];
        $jobDepartments = collect($jobs)->pluck('department')->unique()->values();
    @endphp

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

    <section class="toolbar toolbar--filters toolbar--jobs">
        <div class="toolbar__search">
            <input type="search" placeholder="Search jobs..." class="input">
        </div>
        <div class="toolbar__filters">
            <div class="select-wrapper">
                <select class="select">
                    <option>All Locations</option>
                    @foreach ($jobLocations as $location)
                        <option>{{ $location }}</option>
                    @endforeach
                </select>
                <span class="select-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </span>
            </div>
            <div class="select-wrapper">
                <select class="select">
                    @foreach ($jobStatuses as $status)
                        <option>{{ $status }}</option>
                    @endforeach
                </select>
                <span class="select-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </span>
            </div>
        </div>
        <div class="toolbar__actions">
            <button class="ghost-btn ghost-btn--icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                    <polyline points="7 10 12 15 17 10" />
                    <line x1="12" y1="15" x2="12" y2="3" />
                </svg>
                Export
            </button>
            <button class="primary-btn js-open-post-job" style="display: inline-flex; align-items: center; gap: 6px;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                    <line x1="12" y1="5" x2="12" y2="19" />
                    <line x1="5" y1="12" x2="19" y2="12" />
                </svg>
                Post New Job
            </button>
        </div>
    </section>

    <section class="stack-grid">
        @foreach ($jobs as $job)
            <article class="job-card">
                <div class="job-card__header">
                    <div>
                        <h3>{{ $job['title'] }}</h3>
                        <p class="muted">{{ $job['location'] }} · {{ $job['type'] }}</p>
                    </div>
                    <span class="job-status job-status--{{ \Illuminate\Support\Str::slug($job['status']) }}">{{ $job['status'] }}</span>
                </div>
                <div class="job-card__meta">
                    <div>
                        <p class="muted">Department</p>
                        <p>{{ $job['department'] }}</p>
                    </div>
                    <div>
                        <p class="muted">Salary</p>
                        <p>{{ $job['salary'] }}</p>
                    </div>
                    <div>
                        <p class="muted">Experience</p>
                        <p>{{ $job['experience'] }}</p>
                    </div>
                    <div>
                        <p class="muted">Posted</p>
                        <p>{{ $job['posted'] }}</p>
                    </div>
                </div>
                <div class="job-card__footer">
                    <p class="muted">{{ $job['applicants'] }} applicants</p>
                    <div class="job-card__actions">
                        <button class="ghost-btn small">View</button>
                        <button class="ghost-btn small">Edit</button>
                        <button class="ghost-btn small danger">Close</button>
                    </div>
                </div>
            </article>
        @endforeach
    </section>

    <div class="modal" id="postJobModal" role="dialog" aria-modal="true" aria-labelledby="postJobModalTitle" aria-hidden="true">
        <div class="modal__overlay" data-modal-close></div>
        <div class="modal__content">
            <div class="modal__header">
                <h2 id="postJobModalTitle">Post New Job</h2>
                <button class="icon-btn icon-btn--ghost" aria-label="Close modal" data-modal-close>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18">
                        <line x1="18" y1="6" x2="6" y2="18" />
                        <line x1="6" y1="6" x2="18" y2="18" />
                    </svg>
                </button>
            </div>
            <form class="form-grid">
                <label class="field">
                    <span>Job Title *</span>
                    <input type="text" class="input" placeholder="e.g., Security Guard">
                </label>
                <label class="field">
                    <span>Department *</span>
                    <select class="select">
                        <option>Select department</option>
                        @foreach ($jobDepartments as $department)
                            <option>{{ $department }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="field">
                    <span>Location *</span>
                    <input type="text" class="input" placeholder="e.g., London">
                </label>
                <label class="field">
                    <span>Job Type *</span>
                    <select class="select">
                        <option>Full-time</option>
                        <option>Part-time</option>
                        <option>Contract</option>
                    </select>
                </label>
                <label class="field">
                    <span>Experience Required *</span>
                    <input type="text" class="input" placeholder="e.g., 1-2 years">
                </label>
                <label class="field">
                    <span>Salary Range *</span>
                    <input type="text" class="input" placeholder="e.g., £25,000 - £28,000">
                </label>
                <label class="field full">
                    <span>Job Description</span>
                    <textarea class="input" rows="3" placeholder="Describe the role, responsibilities, and requirements..."></textarea>
                </label>
                <label class="field full">
                    <span>Required Skills (comma separated)</span>
                    <input type="text" class="input" placeholder="e.g., SIA License, First Aid, Communication">
                </label>
                <label class="field">
                    <span>Status</span>
                    <select class="select">
                        <option>Active</option>
                        <option>Draft</option>
                        <option>Closed</option>
                    </select>
                </label>
                <div class="form-actions">
                    <button type="button" class="ghost-btn" data-modal-close>Cancel</button>
                    <button type="submit" class="primary-btn">Post Job</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const modal = document.getElementById('postJobModal');
            if (!modal) return;

            const openButtons = document.querySelectorAll('.js-open-post-job');
            const closeElements = modal.querySelectorAll('[data-modal-close]');

            const openModal = () => {
                modal.setAttribute('aria-hidden', 'false');
                modal.classList.add('is-visible');
                document.body.classList.add('modal-open');
            };

            const closeModal = () => {
                modal.setAttribute('aria-hidden', 'true');
                modal.classList.remove('is-visible');
                document.body.classList.remove('modal-open');
            };

            openButtons.forEach((btn) => btn.addEventListener('click', openModal));
            closeElements.forEach((el) => el.addEventListener('click', closeModal));
            modal.addEventListener('click', (event) => {
                if (event.target === modal) {
                    closeModal();
                }
            });
        });
    </script>
@endpush