@extends('layouts.admin')

@section('content')
<div class="max-w-xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg p-8">
    <h1 class="text-2xl font-semibold mb-6 text-gray-900 dark:text-white">{{ __('admin.edit_hero_image') }}</h1>
    <form action="{{ route('admin.hero-images.update', $heroImage) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf
        @method('PUT')
        <div>
            <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">{{ __('admin.hero_image_current_image') }}</label>
            <img src="{{ asset('storage/' . $heroImage->image_path) }}" alt="" class="h-32 w-auto mb-2 rounded">
        </div>
        <div x-data="{ fileName: '', mobileFileName: '' }">
            <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">{{ __('admin.hero_image_change_image') }}</label>
            <div class="relative">
                <input type="file" id="image-upload" name="image" class="hidden" accept="image/*" @change="fileName = $event.target.files[0] ? $event.target.files[0].name : ''">
                <label for="image-upload" class="inline-block cursor-pointer bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-4 rounded-md shadow-sm mr-2">{{ __('admin.hero_image_choose_file') }}</label>
                <span class="text-gray-500 align-middle" x-text="fileName || '{{ __('admin.no_file_chosen') }}'"></span>
            </div>
            @error('image') <div class="text-red-500 text-sm mt-1">{{ $message }}</div> @enderror
        </div>
        <div>
            <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">{{ __('admin.hero_image_current_mobile_image') }}</label>
            @if($heroImage->mobile_image_path)
                <img src="{{ asset('storage/' . $heroImage->mobile_image_path) }}" alt="" class="h-32 w-auto mb-2 rounded">
            @else
                <span class="text-gray-400 text-sm">{{ __('admin.hero_image_no_image') }}</span>
            @endif
        </div>
        <div x-data="{ mobileFileName: '' }">
            <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">{{ __('admin.hero_image_change_mobile_image') }} <span class="text-xs text-gray-400">({{ __('admin.hero_image_mobile_upload_hint') }})</span></label>
            <div class="relative">
                <input type="file" id="mobile-image-upload" name="mobile_image" class="hidden" accept="image/*" @change="mobileFileName = $event.target.files[0] ? $event.target.files[0].name : ''">
                <label for="mobile-image-upload" class="inline-block cursor-pointer bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-4 rounded-md shadow-sm mr-2">{{ __('admin.hero_image_choose_file') }}</label>
                <span class="text-gray-500 align-middle" x-text="mobileFileName || '{{ __('admin.no_file_chosen') }}'"></span>
            </div>
            @error('mobile_image') <div class="text-red-500 text-sm mt-1">{{ $message }}</div> @enderror
        </div>
        <div>
            <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">{{ __('admin.order') }}</label>
            <input type="number" name="order" class="block w-full text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg p-2" value="{{ old('order', $heroImage->order) }}">
            @error('order') <div class="text-red-500 text-sm mt-1">{{ $message }}</div> @enderror
        </div>
        <div>
            <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">Link</label>
            <input type="text" name="link" class="block w-full text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg p-2" value="{{ old('link', $heroImage->link) }}">
            @error('link') <div class="text-red-500 text-sm mt-1">{{ $message }}</div> @enderror
        </div>
        <div class="flex items-center">
            <input type="checkbox" name="is_active" id="is_active" class="mr-2" value="1" {{ $heroImage->is_active ? 'checked' : '' }}>
            <label for="is_active" class="text-gray-700 dark:text-gray-200">{{ __('admin.hero_image_is_active') }}</label>
        </div>
        <div class="flex space-x-4 mt-6">
            <button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-lg transition duration-200">{{ __('admin.hero_image_update') }}</button>
            <a href="{{ route('admin.hero-images.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg transition duration-200">{{ __('admin.cancel') }}</a>
        </div>
    </form>
</div>
@endsection