@extends('admin.master')

@section('content')
<div class="mx-auto max-w-4xl">
    <div class="bg-white border border-gray-300 rounded-md p-4 sm:p-5">
        <div class="mb-5">
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-800">Edit Hero Section</h2>
            <p class="mt-1 text-sm text-gray-600">Update hero section information and images</p>
        </div>

        <form action="{{ route('admin.hero-sections.update', $heroSection->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Title <span class="text-red-500">*</span>
                    </label>

                    <input type="text"
                           name="title"
                           value="{{ old('title', $heroSection->title) }}"
                           class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-1 focus:ring-black"
                           placeholder="Enter title">

                    @error('title')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Subtitle</label>

                    <textarea name="subtitle"
                              rows="4"
                              class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-1 focus:ring-black"
                              placeholder="Enter subtitle">{{ old('subtitle', $heroSection->subtitle) }}</textarea>

                    @error('subtitle')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Add New Phone Images
                    </label>

                    <input type="file"
                           name="phone_images[]"
                           multiple
                           accept="image/*"
                           class="w-full border border-gray-300 rounded px-4 py-2 bg-white">

                    <p class="text-xs text-gray-500 mt-1">
                        Select multiple images to add more phone images.
                    </p>

                    @error('phone_images')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror

                    @error('phone_images.*')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror

                    @php
                        $phoneImages = is_array($heroSection->phone_images) ? $heroSection->phone_images : [];
                    @endphp

                    @if(count($phoneImages) > 0)
                        <div class="mt-4">
                            <p class="text-sm font-medium text-gray-700 mb-3">
                                Current Phone Images
                            </p>

                            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                                @foreach($phoneImages as $image)
                                    <div class="border border-gray-300 rounded p-2 bg-white">
                                        <img src="{{ asset($image) }}"
                                             alt="phone image"
                                             class="h-24 w-full rounded object-contain bg-gray-50 border border-gray-200 p-1">

                                        <label class="mt-2 flex items-center gap-2 text-sm text-red-600 cursor-pointer">
                                            <input type="checkbox"
                                                   name="remove_phone_images[]"
                                                   value="{{ $image }}"
                                                   class="h-4 w-4 border-gray-300 rounded">

                                            Delete
                                        </label>
                                    </div>
                                @endforeach
                            </div>

                            <p class="text-xs text-gray-500 mt-2">
                                Delete করতে image select করে Update button চাপুন।
                            </p>
                        </div>
                    @else
                        <p class="text-sm text-gray-500 mt-2">No phone images uploaded.</p>
                    @endif
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Badge Image</label>

                    <input type="file"
                           name="badge_image"
                           accept="image/*"
                           class="w-full border border-gray-300 rounded px-4 py-2 bg-white">

                    @if($heroSection->badge_image)
                        <img src="{{ asset($heroSection->badge_image) }}"
                             alt="badge image"
                             class="mt-2 h-20 w-20 rounded border border-gray-300 object-contain bg-white p-1">
                    @endif

                    @error('badge_image')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center gap-2">
                    <input type="checkbox"
                           name="is_active"
                           id="is_active"
                           value="1"
                           {{ old('is_active', $heroSection->is_active) ? 'checked' : '' }}
                           class="h-4 w-4 text-black border-gray-300 rounded">

                    <label for="is_active" class="text-sm font-medium text-gray-700">Active</label>
                </div>
            </div>

            <div class="mt-6 flex flex-col sm:flex-row gap-3">
                <button type="submit"
                        class="bg-black text-white px-5 py-2 rounded text-sm sm:text-base">
                    Update
                </button>

                <a href="{{ route('admin.hero-sections.index') }}"
                   class="text-center bg-gray-200 text-gray-800 px-5 py-2 rounded text-sm sm:text-base">
                    Back
                </a>
            </div>
        </form>
    </div>
</div>
@endsection