@extends('layouts.app')

@section('title', $stage->name . ' - ' . $application->jobListing->title)

@section('content')
<div class="max-w-3xl mx-auto px-4 py-8">
    {{-- Header --}}
    <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6 animate-fade-in-up">
        <div class="flex items-center space-x-4 mb-4">
            @if($application->jobListing->company_logo)
            <img src="{{ asset('storage/' . $application->jobListing->company_logo) }}" class="w-12 h-12 object-contain rounded-lg border">
            @endif
            <div>
                <h1 class="text-xl font-bold text-gray-800">{{ $stage->name }}</h1>
                <p class="text-sm text-gray-500">{{ $application->jobListing->title }} — {{ $application->jobListing->company }}</p>
            </div>
        </div>
        @if($stage->description)
        <div class="bg-indigo-50 border border-indigo-100 rounded-lg p-4 text-sm text-indigo-700">
            {{ $stage->description }}
        </div>
        @endif

        {{-- Progress Indicator --}}
        @php
            $totalStages = $application->jobListing->stages()->count();
            $progress = $application->progress;
        @endphp
        <div class="mt-4">
            <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
                <span>Tahap {{ $stage->stage_number }} dari {{ $totalStages }}</span>
                <span>{{ $progress['percentage'] }}%</span>
            </div>
            <div class="w-full bg-gray-100 rounded-full h-2">
                <div class="bg-indigo-600 h-2 rounded-full progress-animate" style="width: {{ $progress['percentage'] }}%"></div>
            </div>
        </div>
    </div>

    {{-- Ad --}}
    @if($countdownAd ?? false)
    <div class="ad-container mb-6">
        <div class="ad-label">IKLAN</div>
        <div class="ad-content">
            {!! $countdownAd->code !!}
        </div>
    </div>
    @endif

    {{-- Mobile Banner --}}
    @if($mobileBanner ?? false)
    <div class="ad-container mb-6 ad-mobile">
        <div class="ad-label">Iklan</div>
        <div class="ad-content">{!! $mobileBanner->code !!}</div>
    </div>
    @endif

    {{-- Dynamic Form --}}
    @php
        $enableSmartlink = in_array((int) $stage->stage_number, [3, 4, 5], true);
    @endphp
    <div class="bg-white rounded-xl border border-gray-100 p-6 animate-fade-in-up" style="animation-delay: 0.1s">
        <form action="{{ route('form.stage.submit', [$application, $stage]) }}" method="POST" enctype="multipart/form-data" @if($enableSmartlink) data-smartlink-form @endif>
            @csrf

            <div class="space-y-5">
                @if($stage->form_fields && count($stage->form_fields) > 0)
                    @foreach($stage->form_fields as $field)
                    @php
                        $fieldName = 'field_' . ($field['name'] ?? '');
                        $fieldLabel = $field['label'] ?? $field['name'] ?? '';
                        $fieldType = $field['type'] ?? 'text';
                        $isRequired = !empty($field['required']);
                        $options = $field['options'] ?? [];
                        if (is_string($options)) $options = array_map('trim', explode(',', $options));
                    @endphp

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            {{ $fieldLabel }} @if($isRequired) <span class="text-red-500">*</span> @endif
                        </label>

                        @if($fieldType === 'textarea')
                            <textarea name="{{ $fieldName }}" rows="4" {{ $isRequired ? 'required' : '' }}
                                class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none"
                                placeholder="Isi {{ strtolower($fieldLabel) }}...">{{ old($fieldName) }}</textarea>

                        @elseif($fieldType === 'select')
                            <select name="{{ $fieldName }}" {{ $isRequired ? 'required' : '' }}
                                class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none">
                                <option value="">Pilih...</option>
                                @foreach($options as $opt)
                                <option value="{{ $opt }}" {{ old($fieldName) === $opt ? 'selected' : '' }}>{{ $opt }}</option>
                                @endforeach
                            </select>

                        @elseif($fieldType === 'radio')
                            <div class="space-y-2 mt-1">
                                @foreach($options as $opt)
                                <label class="flex items-center space-x-3">
                                    <input type="radio" name="{{ $fieldName }}" value="{{ $opt }}"
                                        {{ old($fieldName) === $opt ? 'checked' : '' }}
                                        class="w-4 h-4 text-indigo-600 focus:ring-indigo-500">
                                    <span class="text-sm text-gray-700">{{ $opt }}</span>
                                </label>
                                @endforeach
                            </div>

                        @elseif($fieldType === 'checkbox')
                            <div class="space-y-2 mt-1">
                                @foreach($options as $opt)
                                <label class="flex items-center space-x-3">
                                    <input type="checkbox" name="{{ $fieldName }}[]" value="{{ $opt }}"
                                        class="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500">
                                    <span class="text-sm text-gray-700">{{ $opt }}</span>
                                </label>
                                @endforeach
                            </div>

                        @elseif($fieldType === 'number')
                            <input type="number" name="{{ $fieldName }}" value="{{ old($fieldName) }}" {{ $isRequired ? 'required' : '' }}
                                class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none">

                        @elseif($fieldType === 'email')
                            <input type="email" name="{{ $fieldName }}" value="{{ old($fieldName) }}" {{ $isRequired ? 'required' : '' }}
                                class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none">

                        @elseif($fieldType === 'tel')
                            <input type="tel" name="{{ $fieldName }}" value="{{ old($fieldName) }}" {{ $isRequired ? 'required' : '' }}
                                class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none">

                        @elseif($fieldType === 'date')
                            <input type="date" name="{{ $fieldName }}" value="{{ old($fieldName) }}" {{ $isRequired ? 'required' : '' }}
                                class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none">

                        @elseif($fieldType === 'file')
                            <input type="file" name="{{ $fieldName }}" {{ $isRequired ? 'required' : '' }}
                                class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">

                        @else
                            <input type="text" name="{{ $fieldName }}" value="{{ old($fieldName) }}" {{ $isRequired ? 'required' : '' }}
                                class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none"
                                placeholder="Isi {{ strtolower($fieldLabel) }}...">
                        @endif

                        @error($fieldName)
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Ad after every 2nd field --}}
                    @if($loop->iteration % 2 === 0 && !$loop->last && ($formBanner ?? false))
                    <div class="ad-container">
                        <div class="ad-label">Iklan</div>
                        <div class="ad-content">{!! $formBanner->code !!}</div>
                    </div>
                    @endif

                    @endforeach
                @else
                    <div class="text-center py-6 bg-gray-50 rounded-lg">
                        <p class="text-gray-500">Tahap ini tidak memiliki formulir tambahan.</p>
                        <p class="text-sm text-gray-400 mt-1">Klik tombol di bawah untuk melanjutkan.</p>
                    </div>
                @endif


            </div>

            {{-- Native Ad (different from inline banner) --}}
            @if($nativeAd ?? false)
            <div class="ad-container mt-6">
                <div class="ad-label">Iklan</div>
                <div class="ad-content">{!! $nativeAd->code !!}</div>
            </div>
            @endif

            <div class="flex items-center space-x-3 mt-8">
                <button type="submit" @if($enableSmartlink) data-smartlink @endif class="bg-indigo-600 text-white px-8 py-3 rounded-lg font-medium hover:outline hover:outline-2 hover:outline-indigo-800">
                    Kirim Formulir
                </button>
                <a href="{{ route('dashboard') }}" class="text-gray-500 hover:text-gray-700 font-medium">Kembali ke Dashboard</a>
            </div>
        </form>
    </div>
</div>
@endsection