@extends('admin.layouts.app')

@section('title', 'Edit Visa Success Story')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="mb-6 flex items-center gap-3">
        <a href="{{ route('admin.visa-stories.index') }}" class="text-sm text-blue-600 hover:underline">← Back</a>
        <h1 class="text-xl font-bold text-gray-800">Edit Visa Success Story</h1>
    </div>

    @if($errors->any())
        <div class="mb-4 rounded-lg bg-red-100 border border-red-300 text-red-700 px-4 py-3 text-sm">
            <ul class="list-disc list-inside space-y-1">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form action="{{ route('admin.visa-stories.update', $visaStory) }}" method="POST" enctype="multipart/form-data" class="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
        @csrf
        @method('PUT')
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="md:col-span-2">
                <label class="text-sm font-medium text-gray-700">Story Title <span class="text-red-500">*</span></label>
                <input name="title" value="{{ old('title', $visaStory->title) }}" required class="w-full mt-1 rounded-lg border-gray-300 text-sm">
            </div>
            <div>
                <label class="text-sm font-medium text-gray-700">Student Name</label>
                <input name="student_name" value="{{ old('student_name', $visaStory->student_name) }}" class="w-full mt-1 rounded-lg border-gray-300 text-sm">
            </div>
            <div>
                <label class="text-sm font-medium text-gray-700">Program</label>
                <input name="program" value="{{ old('program', $visaStory->program) }}" class="w-full mt-1 rounded-lg border-gray-300 text-sm">
            </div>
            <div>
                <label class="text-sm font-medium text-gray-700">University</label>
                <input name="university" value="{{ old('university', $visaStory->university) }}" class="w-full mt-1 rounded-lg border-gray-300 text-sm">
            </div>
            <div>
                <label class="text-sm font-medium text-gray-700">Country</label>
                <input name="country_name" value="{{ old('country_name', $visaStory->country_name) }}" class="w-full mt-1 rounded-lg border-gray-300 text-sm">
            </div>
            <div class="md:col-span-2">
                <label class="text-sm font-medium text-gray-700">Description</label>
                <textarea name="description" rows="3" class="w-full mt-1 rounded-lg border-gray-300 text-sm">{{ old('description', $visaStory->description) }}</textarea>
            </div>
            <div>
                <label class="text-sm font-medium text-gray-700">Replace Image</label>
                <input type="file" name="image" accept="image/*" class="w-full mt-1 text-sm" id="visa-story-image-input">
                @if($visaStory->image_url)
                    <div class="mt-2">
                        <img src="{{ $visaStory->image_url }}" alt="Current" class="h-20 rounded-lg object-cover border border-gray-200" id="visa-story-image-preview">
                        <p class="text-xs text-gray-400 mt-1">Current image</p>
                    </div>
                @else
                    <img src="" alt="Selected image preview" class="mt-2 h-20 rounded-lg object-cover border border-gray-200 hidden" id="visa-story-image-preview">
                @endif
            </div>
            <div>
                <label class="text-sm font-medium text-gray-700">Sort Order</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', $visaStory->sort_order) }}" min="0" class="w-full mt-1 rounded-lg border-gray-300 text-sm">
            </div>
            <div class="flex items-center gap-2 mt-2">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', $visaStory->is_active ? '1' : '0') == '1' ? 'checked' : '' }} class="rounded border-gray-300">
                <label for="is_active" class="text-sm font-medium text-gray-700">Active (show on website)</label>
            </div>
        </div>
        <div class="flex gap-3 pt-2">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2.5 rounded-lg text-sm">Update Story</button>
            <a href="{{ route('admin.visa-stories.index') }}" class="px-6 py-2.5 rounded-lg text-sm border border-gray-300 text-gray-600 hover:bg-gray-50">Cancel</a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
(() => {
    const input = document.getElementById('visa-story-image-input');
    const preview = document.getElementById('visa-story-image-preview');
    if (!input || !preview) return;

    input.addEventListener('change', () => {
        const file = input.files && input.files[0];
        if (!file) return;
        preview.src = URL.createObjectURL(file);
        preview.classList.remove('hidden');
    });
})();
</script>
@endpush