@extends('layouts.admin')

@section('title', 'Tahapan Seleksi: ' . $job->title)

@section('content')
<div class="max-w-5xl">
    {{-- Header --}}
    <div class="mb-6">
        <a href="{{ route('admin.jobs.edit', $job) }}" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">← Kembali ke Lowongan</a>
        <h2 class="text-xl font-bold text-gray-800 mt-2">Tahapan Seleksi</h2>
        <p class="text-sm text-gray-500">{{ $job->title }} — {{ $job->company }}</p>
    </div>

    {{-- Flow Visualization --}}
    <div class="bg-white rounded-xl border border-gray-100 p-5 mb-6">
        <div class="flex items-center flex-wrap gap-1.5">
            <div class="px-3 py-1.5 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">Lamaran Masuk</div>
            @foreach($job->stages as $stage)
            <span class="text-gray-300 text-xs">→</span>
            <div class="px-3 py-1.5 {{ $stage->is_active ? 'bg-indigo-100 text-indigo-700' : 'bg-gray-100 text-gray-400 line-through' }} text-xs font-medium rounded-full">
                {{ $stage->stage_number }}. {{ $stage->name }}
                @if($stage->form_fields && count($stage->form_fields) > 0)
                    <span class="opacity-60">({{ count($stage->form_fields) }} field)</span>
                @endif
            </div>
            @endforeach
            <span class="text-gray-300 text-xs">→</span>
            <div class="px-3 py-1.5 bg-green-100 text-green-700 text-xs font-medium rounded-full">Keputusan Akhir</div>
        </div>
    </div>

    {{-- Info Banner --}}
    <div class="bg-indigo-50 border border-indigo-100 rounded-xl p-4 mb-6 flex items-start space-x-3">
        <svg class="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <div class="text-sm text-indigo-700">
            <p class="font-medium">5 tahapan seleksi tetap</p>
            <p class="mt-0.5 text-indigo-600">Klik <strong>Edit</strong> untuk mengubah nama, deskripsi, dan mengatur formulir tiap tahap. Tahapan tidak bisa ditambah atau dihapus.</p>
        </div>
    </div>

    {{-- Stages List --}}
    @if($job->stages->count() > 0)
    <div class="space-y-4">
        @foreach($job->stages as $stage)
        <div class="bg-white rounded-xl border {{ $stage->is_active ? 'border-gray-100 hover:border-gray-200' : 'border-red-200' }} transition-colors">
            <div class="p-5">
                <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
                    {{-- Stage Info --}}
                    <div class="flex items-start space-x-4 flex-1 min-w-0">
                        <div class="w-11 h-11 rounded-xl {{ $stage->is_active ? 'bg-indigo-100 text-indigo-700' : 'bg-red-100 text-red-400' }} flex items-center justify-center font-bold text-lg flex-shrink-0">
                            {{ $stage->stage_number }}
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="flex items-center gap-2 flex-wrap">
                                <h4 class="text-base font-semibold {{ $stage->is_active ? 'text-gray-800' : 'text-gray-400 line-through' }}">{{ $stage->name }}</h4>
                                @if(!$stage->is_active)
                                    <span class="px-2 py-0.5 text-[10px] font-medium bg-red-100 text-red-600 rounded-full uppercase tracking-wide">Nonaktif</span>
                                @endif
                            </div>
                            @if($stage->description)
                                <p class="text-sm text-gray-500 mt-1">{{ $stage->description }}</p>
                            @endif
                        </div>
                    </div>

                    {{-- Actions --}}
                    <div class="flex items-center gap-2 flex-shrink-0">
                        <a href="{{ route('admin.jobs.stages.edit', [$job, $stage]) }}"
                            class="inline-flex items-center bg-indigo-50 text-indigo-600 px-3.5 py-2 rounded-lg text-sm font-medium hover:outline hover:outline-2 hover:outline-indigo-300 transition-all">
                            <svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            Edit
                        </a>
                        <form action="{{ route('admin.jobs.stages.toggle', [$job, $stage]) }}" method="POST" class="inline">
                            @csrf @method('PATCH')
                            <button type="submit" class="inline-flex items-center px-3.5 py-2 rounded-lg text-sm font-medium transition-all {{ $stage->is_active ? 'bg-yellow-50 text-yellow-600 hover:outline hover:outline-2 hover:outline-yellow-300' : 'bg-green-50 text-green-600 hover:outline hover:outline-2 hover:outline-green-300' }}">
                                @if($stage->is_active)
                                    <svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                                    Nonaktifkan
                                @else
                                    <svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    Aktifkan
                                @endif
                            </button>
                        </form>
                    </div>
                </div>

                {{-- Form Fields Preview --}}
                @if($stage->is_active)
                <div class="mt-4 pt-4 border-t border-gray-50">
                    @if($stage->form_fields && count($stage->form_fields) > 0)
                    <div class="flex items-center gap-2 mb-2.5">
                        <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        <span class="text-xs font-medium text-gray-600">{{ count($stage->form_fields) }} Field Formulir</span>
                    </div>
                    <div class="flex flex-wrap gap-1.5">
                        @foreach($stage->form_fields as $field)
                        <span class="inline-flex items-center px-2.5 py-1 text-xs bg-gray-50 border border-gray-100 text-gray-600 rounded-lg">
                            {{ $field['label'] ?? $field['name'] ?? 'N/A' }}
                            <span class="text-gray-400 ml-1">({{ $field['type'] ?? 'text' }})</span>
                            @if(!empty($field['required'])) <span class="text-red-400 ml-0.5">*</span> @endif
                        </span>
                        @endforeach
                    </div>
                    @else
                    <div class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span class="text-xs text-gray-400 italic">Tanpa formulir — pelamar otomatis lanjut setelah diloloskan admin</span>
                    </div>
                    @endif
                </div>
                @endif
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="bg-white rounded-xl border border-gray-100 p-12 text-center">
        <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
        <h3 class="text-lg font-semibold text-gray-700 mb-1">Belum ada tahapan seleksi</h3>
        <p class="text-sm text-gray-400">Tahapan akan otomatis dibuat saat lowongan disimpan.</p>
    </div>
    @endif
</div>
@endsection