@extends('admin.layouts.app')

@section('title', 'Import External Jobs')

@section('content')
<div class="space-y-6">
    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <div class="bg-white border border-slate-200 rounded-lg p-5">
            <div class="text-sm font-medium text-slate-500">Total Jobs</div>
            <div class="mt-2 text-3xl font-bold text-slate-900">{{ $stats['total_jobs'] }}</div>
        </div>
        <div class="bg-white border border-slate-200 rounded-lg p-5">
            <div class="text-sm font-medium text-slate-500">External Jobs</div>
            <div class="mt-2 text-3xl font-bold text-indigo-600">{{ $stats['external_jobs'] }}</div>
        </div>
        <div class="bg-white border border-slate-200 rounded-lg p-5">
            <div class="text-sm font-medium text-slate-500">Last Import</div>
            <div class="mt-2 text-lg font-semibold text-slate-900">
                {{ $stats['last_import'] ?? 'Never' }}
            </div>
        </div>
    </div>

    <!-- Main Import Card -->
    <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h1 class="text-xl font-bold text-slate-900">Bulk Import External Jobs</h1>
                <p class="text-sm text-slate-600 mt-1">Upload Excel or CSV file to add external job postings (apply externally via URL).</p>
            </div>
        </div>

        <!-- Download Template Section -->
        <div class="mb-6 p-5 rounded-lg bg-indigo-50 border border-indigo-200">
            <h3 class="text-base font-semibold text-indigo-900 mb-3">Step 1: Download Template</h3>
            <p class="text-sm text-indigo-700 mb-4">Choose your preferred format:</p>
            <div class="flex flex-wrap gap-3">
                <a href="{{ route('admin.jobs.import.template', ['format' => 'xlsx']) }}" 
                   class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-semibold rounded-lg hover:bg-indigo-700 transition">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M12.9,14.5L15.8,19H14L12,15.6L10,19H8.2L11.1,14.5L8.2,10H10L12,13.4L14,10H15.8L12.9,14.5Z"/>
                    </svg>
                    Excel Template (.xlsx)
                </a>
                <a href="{{ route('admin.jobs.import.template', ['format' => 'csv']) }}" 
                   class="inline-flex items-center px-4 py-2 bg-slate-600 text-white text-sm font-semibold rounded-lg hover:bg-slate-700 transition">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M10,19L12,15L14,19H10M11,13V10H13V13H11Z"/>
                    </svg>
                    CSV Template (.csv)
                </a>
            </div>
            <p class="text-xs text-indigo-600 mt-3">
                <strong>Recommended:</strong> Excel template includes instructions, descriptions, and formatting.
            </p>
        </div>

        <!-- Instructions -->
        <div class="mb-6 p-4 rounded-lg bg-amber-50 border border-amber-200">
            <h4 class="text-sm font-semibold text-amber-900 mb-2">How to Import:</h4>
            <ol class="text-xs text-amber-800 space-y-1 list-decimal list-inside">
                <li>Download the Excel or CSV template above</li>
                <li>Fill in job details (use sample rows as a guide)</li>
                <li>Ensure <strong>external_application_url</strong> is filled for each job</li>
                <li>Save and upload the file below</li>
                <li>Review the import summary</li>
            </ol>
        </div>

        <div class="mt-4 p-4 rounded-lg bg-slate-50 border border-slate-200">
            <p class="text-sm text-slate-700 font-semibold">Template includes {{ count($columns) }} fields:</p>
            <p class="text-xs text-slate-600 mt-2">
                {{ implode(', ', $columns) }}
            </p>
        </div>

        <!-- Upload Form -->
        <form method="POST" action="{{ route('admin.jobs.import.store') }}" enctype="multipart/form-data" class="mt-6 space-y-5">
            @csrf
            
            <div>
                <h3 class="text-base font-semibold text-slate-800 mb-3">Step 2: Upload File</h3>
                
                @if ($errors->any())
                    <div class="mb-4 p-4 rounded-lg bg-red-50 border border-red-200">
                        <h4 class="text-sm font-semibold text-red-900">Import failed:</h4>
                        <ul class="mt-2 text-sm text-red-700 list-disc list-inside">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if(session('status'))
                    <div class="mb-4 p-4 rounded-lg bg-green-50 text-green-800 text-sm border border-green-200 flex items-start">
                        <svg class="w-5 h-5 mr-2 text-green-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                        </svg>
                        {{ session('status') }}
                    </div>
                @endif

                <label class="text-sm font-semibold text-slate-800 block mb-2">Import File</label>
                <div class="relative">
                    <input type="file" name="file" accept=".csv,.xlsx,.xls,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" 
                           class="block w-full text-sm text-slate-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 border border-slate-300 rounded-lg cursor-pointer" required>
                </div>
                <p class="text-xs text-slate-500 mt-2">
                    Accepted formats: .xlsx, .xls, .csv (Max size: 10MB)
                </p>
                @error('file') <p class="text-sm text-red-600 mt-2">{{ $message }}</p> @enderror
            </div>

            <div class="pt-4 border-t border-slate-200 flex items-center justify-between">
                <a href="{{ route('admin.jobs.index') }}" class="text-sm text-slate-600 hover:text-slate-800 font-medium">
                    ← Back to Jobs
                </a>
                <button type="submit" class="admin-btn admin-btn-primary inline-flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                    </svg>
                    Import Jobs
                </button>
            </div>
        </form>

        <!-- Info Box -->
        <div class="mt-6 p-4 rounded-lg bg-blue-50 border border-blue-200">
            <h4 class="text-sm font-semibold text-blue-900 mb-2">What happens during import?</h4>
            <ul class="text-xs text-blue-800 space-y-1">
                <li class="flex items-start">
                    <svg class="w-3 h-3 mr-2 text-blue-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    <span>File validated for correct format and required fields</span>
                </li>
                <li class="flex items-start">
                    <svg class="w-3 h-3 mr-2 text-blue-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    <span>Employers automatically created if they don't exist</span>
                </li>
                <li class="flex items-start">
                    <svg class="w-3 h-3 mr-2 text-blue-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    <span>Jobs created with "Apply Externally" enabled</span>
                </li>
                <li class="flex items-start">
                    <svg class="w-3 h-3 mr-2 text-blue-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    <span>External application URLs configured for each job</span>
                </li>
            </ul>
        </div>
    </div>
</div>
@endsection