@extends('admin.layouts.app')

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

@section('content')
<div class="space-y-6">
    <div class="bg-white border border-slate-200 rounded-xl shadow-sm">
        <div class="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
            <div>
                <h1 class="text-lg font-bold text-slate-900">Add Job</h1>
                <p class="text-sm text-slate-600">Publish or draft a job on behalf of an employer.</p>
            </div>
            <a href="{{ route('admin.jobs.index') }}" class="text-sm text-blue-600 hover:text-blue-700 font-semibold">Back to list</a>
        </div>

        <form method="POST" action="{{ route('admin.jobs.store') }}" class="p-6 space-y-6">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Employer</label>
                    <select name="employer_id" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select employer</option>
                        @foreach($employers as $employer)
                            <option value="{{ $employer->id }}" @selected(old('employer_id') == $employer->id)>{{ $employer->company_name ?? 'Employer #'.$employer->id }}</option>
                        @endforeach
                    </select>
                    @error('employer_id') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Job Title</label>
                    <input type="text" name="title" value="{{ old('title') }}" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                    @error('title') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Country</label>
                    @php $countryOptions = ($countries ?? collect())->filter()->all(); @endphp
                    <select name="location_country" id="admin-location-country" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select country</option>
                        @foreach($countryOptions as $countryOption)
                            <option value="{{ $countryOption }}" @selected(old('location_country') === $countryOption)>{{ $countryOption }}</option>
                        @endforeach
                        <option value="Other" @selected(old('location_country') === 'Other' || (!in_array(old('location_country'), array_merge(['', 'Other'], $countryOptions))))>Other</option>
                    </select>
                    <input type="text" name="location_country_other" id="admin_location_country_other" value="{{ (!in_array(old('location_country'), array_merge(['', 'Other'], $countryOptions))) ? old('location_country') : '' }}" placeholder="Specify country" class="mt-2 w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500" style="display: {{ (!in_array(old('location_country'), array_merge(['', 'Other'], $countryOptions))) ? 'block' : 'none' }};">
                    @error('location_country') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">State / Province</label>
                    @php
                        $statesByCountry = $statesByCountry ?? [];
                        $selectedCountry = old('location_country');
                        $stateOptions = collect($statesByCountry[$selectedCountry] ?? [])->values()->all();
                    @endphp
                    <select name="location_state" id="admin-location-state" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select state/province</option>
                        @foreach($stateOptions as $stateOption)
                            <option value="{{ $stateOption }}" @selected(old('location_state') === $stateOption)>{{ $stateOption }}</option>
                        @endforeach
                        <option value="Other" @selected(old('location_state') === 'Other' || (!in_array(old('location_state'), array_merge(['', 'Other'], $stateOptions))))>Other</option>
                    </select>
                    <input type="text" name="location_state_other" id="admin_location_state_other" value="{{ (!in_array(old('location_state'), array_merge(['', 'Other'], $stateOptions))) ? old('location_state') : '' }}" placeholder="Specify state/province" class="mt-2 w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500" style="display: {{ (!in_array(old('location_state'), array_merge(['', 'Other'], $stateOptions))) ? 'block' : 'none' }};">
                    @error('location_state') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">City</label>
                    <input type="text" name="location_city" value="{{ old('location_city') }}" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                    @error('location_city') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Specialty</label>
                    <input type="text" name="required_specialty" list="specialty-options" value="{{ old('required_specialty') }}" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                    <datalist id="specialty-options">
                        @foreach($specialties as $specialty)
                            <option value="{{ $specialty }}">{{ $specialty }}</option>
                        @endforeach
                    </datalist>
                    @error('required_specialty') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Job Type</label>
                    <select name="employment_type" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                        @foreach(['full_time' => 'Full time', 'part_time' => 'Part time', 'contract' => 'Contract', 'per_diem' => 'Per diem'] as $value => $label)
                            <option value="{{ $value }}" @selected(old('employment_type') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('employment_type') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Work Mode / Shift</label>
                    <input type="text" name="work_mode" value="{{ old('work_mode') }}" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500" placeholder="Day, Night, Remote, On-site">
                    @error('work_mode') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Min Experience (years)</label>
                    <input type="number" name="required_experience_years" value="{{ old('required_experience_years') }}" min="0" step="1" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                    @error('required_experience_years') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="flex items-center gap-4">
                    <label class="inline-flex items-center gap-2 text-sm text-slate-800">
                        <input type="checkbox" name="visa_sponsorship" value="1" class="rounded border-slate-300" @checked(old('visa_sponsorship'))>
                        <span>Visa sponsorship</span>
                    </label>
                    <label class="inline-flex items-center gap-2 text-sm text-slate-800">
                        <input type="checkbox" name="relocation_package" value="1" class="rounded border-slate-300" @checked(old('relocation_package'))>
                        <span>Relocation support</span>
                    </label>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Summary</label>
                    <textarea name="summary" rows="2" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">{{ old('summary') }}</textarea>
                    @error('summary') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Salary Range</label>
                    <div class="flex gap-2">
                        <input type="number" name="salary_min" value="{{ old('salary_min') }}" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500" placeholder="Min">
                        <input type="number" name="salary_max" value="{{ old('salary_max') }}" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500" placeholder="Max">
                        <input type="text" name="salary_currency" value="{{ old('salary_currency', 'USD') }}" class="w-24 rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500" placeholder="USD">
                    </div>
                    @error('salary_min') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                    @error('salary_max') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="space-y-2">
                <label class="text-sm font-semibold text-slate-800">Job Description</label>
                <textarea name="description" rows="6" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">{{ old('description') }}</textarea>
                @error('description') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Status</label>
                    <select name="status" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                        @foreach(['open' => 'Open', 'published' => 'Published', 'active' => 'Active', 'closed' => 'Closed'] as $value => $label)
                            <option value="{{ $value }}" @selected(old('status','open') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('status') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="flex items-center justify-end">
                <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg">
                    Create Job
                </button>
            </div>
        </form>
    </div>
</div>
<script>
    function toggleOtherInput(selectEl, inputId) {
        const target = document.getElementById(inputId);
        if (!target) return;
        if (selectEl.value === 'Other') {
            target.style.display = 'block';
            target.focus();
        } else {
            target.style.display = 'none';
            target.value = '';
        }
    }

    (function setupAdminStateDropdown() {
        const stateOptionsByCountry = @json($statesByCountry ?? []);
        const countrySelect = document.getElementById('admin-location-country');
        const stateSelect = document.getElementById('admin-location-state');
        const stateOtherInput = document.getElementById('admin_location_state_other');
        const existingState = @json(old('location_state', ''));

        if (!countrySelect || !stateSelect) return;

        const renderStates = (country) => {
            const opts = stateOptionsByCountry[country] || [];
            const currentValue = stateSelect.value || existingState;
            stateSelect.innerHTML = '';
            stateSelect.insertAdjacentHTML('beforeend', '<option value=\"\">Select state/province</option>');
            opts.forEach(s => {
                const selected = currentValue === s ? 'selected' : '';
                stateSelect.insertAdjacentHTML('beforeend', `<option value=\"${s}\" ${selected}>${s}</option>`);
            });
            const otherSelected = currentValue && !opts.includes(currentValue);
            stateSelect.insertAdjacentHTML('beforeend', `<option value=\"Other\" ${currentValue === 'Other' ? 'selected' : ''}>Other</option>`);
            if (otherSelected && currentValue !== 'Other') {
                stateOtherInput.style.display = 'block';
                stateOtherInput.value = currentValue;
            } else {
                stateOtherInput.style.display = currentValue === 'Other' ? 'block' : 'none';
                if (currentValue !== 'Other') stateOtherInput.value = '';
            }
        };

        renderStates(countrySelect.value);
        countrySelect.addEventListener('change', () => {
            stateSelect.value = '';
            stateOtherInput.value = '';
            renderStates(countrySelect.value);
        });
        stateSelect.addEventListener('change', () => toggleOtherInput(stateSelect, 'admin_location_state_other'));
    })();
</script>
@endsection