@extends('layouts.admin')

@section('title', __('admin.add_new_image'))

@section('content')
<div class="container mx-auto px-6 py-8">
    <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.add_new_image') }}</h1>
        <form action="{{ route('admin.hero-images.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            <div x-data="{ fileName: '', mobileFileName: '' }">
                <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">{{ __('admin.image') }} <span class="text-red-500">*</span></label>
                <label for="image-upload" class="flex items-center cursor-pointer bg-gray-100 dark:bg-gray-900 border border-dashed border-gray-400 dark:border-gray-600 rounded-lg px-4 py-3 hover:bg-gray-200 dark:hover:bg-gray-800 transition">
                    <svg class="w-6 h-6 text-gray-500 dark:text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12" /></svg>
                    <span class="text-gray-700 dark:text-gray-200 font-semibold">{{ __('admin.choose_file') }}</span>
                    <input id="image-upload" name="image" type="file" class="hidden" accept="image/*" required @change="fileName = $event.target.files[0] ? $event.target.files[0].name : ''">
                </label>
                <template x-if="fileName">
                    <div class="mt-2 text-sm text-gray-600 dark:text-gray-300">{{ __('admin.selected_file') }}: <span x-text="fileName"></span></div>
                </template>
                @error('image') <div class="text-red-500 text-sm mt-1">{{ $message }}</div> @enderror

                <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1 mt-4">Mobile Image <span class="text-xs text-gray-400">({{ __('Optional, for mobile view') }})</span></label>
                <label for="mobile-image-upload" class="flex items-center cursor-pointer bg-gray-100 dark:bg-gray-900 border border-dashed border-gray-400 dark:border-gray-600 rounded-lg px-4 py-3 hover:bg-gray-200 dark:hover:bg-gray-800 transition">
                    <svg class="w-6 h-6 text-gray-500 dark:text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12" /></svg>
                    <span class="text-gray-700 dark:text-gray-200 font-semibold">Choose Mobile File</span>
                    <input id="mobile-image-upload" name="mobile_image" type="file" class="hidden" accept="image/*" @change="mobileFileName = $event.target.files[0] ? $event.target.files[0].name : ''">
                </label>
                <template x-if="mobileFileName">
                    <div class="mt-2 text-sm text-gray-600 dark:text-gray-300">Selected Mobile File: <span x-text="mobileFileName"></span></div>
                </template>
                @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') }}">
                @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">{{ __('admin.title') }}</label>
                <input type="text" name="title" 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('title') }}">
                @error('title') <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" checked>
                <label for="is_active" class="text-gray-700 dark:text-gray-200">{{ __('admin.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.add_image') }}</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>
</div>
@endsection