@extends('admin.layout')
@section('title', 'Edit Hero')
@section('page-title', 'Edit Hero Section')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-6">
        <form action="{{ route('admin.hero.update', $hero) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="space-y-5">
                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Company Name *</label>
                    <input type="text" name="company_name" value="{{ old('company_name', $hero->company_name) }}" required
                        class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20">
                    @error('company_name') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Tagline *</label>
                    <input type="text" name="tagline" value="{{ old('tagline', $hero->tagline) }}" required
                        class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20">
                    @error('tagline') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Description *</label>
                    <textarea name="description" rows="3" required
                        class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 resize-none">{{ old('description', $hero->description) }}</textarea>
                    @error('description') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Primary Button Text</label>
                        <input type="text" name="primary_btn_text" value="{{ old('primary_btn_text', $hero->primary_btn_text) }}"
                            class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Primary Button Link</label>
                        <input type="text" name="primary_btn_link" value="{{ old('primary_btn_link', $hero->primary_btn_link) }}"
                            class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Secondary Button Text</label>
                        <input type="text" name="secondary_btn_text" value="{{ old('secondary_btn_text', $hero->secondary_btn_text) }}"
                            class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Secondary Button Link</label>
                        <input type="text" name="secondary_btn_link" value="{{ old('secondary_btn_link', $hero->secondary_btn_link) }}"
                            class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Video URL</label>
                    <input type="url" name="video_url" value="{{ old('video_url', $hero->video_url) }}" placeholder="https://youtube.com/..."
                        class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Background Image</label>
                    @if($hero->background_image)
                        <div class="mb-3">
                            <img src="{{ Storage::url($hero->background_image) }}" class="w-40 h-24 object-cover rounded-lg border border-gray-700">
                        </div>
                    @endif
                    <input type="file" name="background_image" accept="image/*"
                        class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm file:mr-4 file:py-1 file:px-3 file:rounded-lg file:border-0 file:bg-indigo-600 file:text-white file:text-xs file:font-semibold">
                </div>
            </div>

            @include('admin.partials.form-actions', ['submitText' => 'Update Hero', 'cancelRoute' => route('admin.hero.index')])
        </form>
    </div>
</div>
@endsection