@extends('layouts.admin')

@section('title', isset($banner) ? 'Edit Banner' : 'Add Banner')

@section('admin_content')
    <div class="mb-10">
        <a href="{{ route('admin.banners.index') }}" class="text-secondary hover:text-primary transition-colors flex items-center text-sm mb-4">
            <i class="fas fa-arrow-left mr-2 text-[10px]"></i> Back to Banners
        </a>
        <h3 class="text-2xl font-bold">{{ isset($banner) ? 'Edit Banner' : 'Create New Banner' }}</h3>
        <p class="text-secondary text-sm">Configure your homepage hero section content.</p>
    </div>

    <div class="admin-card rounded-[2rem] p-8 max-w-4xl">
        <form action="{{ isset($banner) ? route('admin.banners.update', $banner) : route('admin.banners.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @if(isset($banner))
                @method('PUT')
            @endif

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="space-y-6">
                    <div>
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Badge Text</label>
                        <input type="text" name="badge" value="{{ old('badge', $banner->badge ?? 'PROUDLY MADE IN BANGLADESH') }}" 
                            class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all"
                            placeholder="PROUDLY MADE IN BANGLADESH">
                        @error('badge') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Title</label>
                        <input type="text" name="title" value="{{ old('title', $banner->title ?? '') }}" 
                            class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all"
                            placeholder="Redefining Garment Manufacturing">
                        <p class="text-[10px] text-secondary mt-1">Note: 'Garment' will be automatically highlighted with a gradient.</p>
                        @error('title') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Subtitle</label>
                        <textarea name="subtitle" rows="4" 
                            class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all resize-none"
                            placeholder="Enter a brief description for the hero section...">{{ old('subtitle', $banner->subtitle ?? '') }}</textarea>
                        @error('subtitle') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Button Text</label>
                            <input type="text" name="button_text" value="{{ old('button_text', $banner->button_text ?? 'View Projects') }}" 
                                class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all"
                                placeholder="View Projects">
                            @error('button_text') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                        </div>
                        <div>
                            <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Button Link</label>
                            <input type="text" name="button_link" value="{{ old('button_link', $banner->button_link ?? '/projects') }}" 
                                class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all"
                                placeholder="/projects">
                            @error('button_link') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                        </div>
                    </div>
                </div>

                <div class="space-y-6">
                    <div>
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Background Media (Image or Video)</label>
                        <div class="relative group">
                            <input type="file" name="image" id="media_input" class="hidden" accept="image/*,video/mp4,video/webm,video/ogg">
                            <label for="media_input" class="cursor-pointer block">
                                <div class="w-full aspect-video rounded-2xl border-2 border-dashed border-white/10 bg-white/5 flex flex-col items-center justify-center group-hover:bg-white/[0.07] group-hover:border-primary/30 transition-all overflow-hidden" id="preview_container">
                                    @if(isset($banner) && $banner->image)
                                        @php 
                                            $ext = pathinfo($banner->image, PATHINFO_EXTENSION); 
                                            $isStorage = str_contains($banner->image, '/');
                                            $mediaPath = $isStorage ? asset('storage/' . $banner->image) : asset($banner->image);
                                        @endphp
                                        @if(in_array(strtolower($ext), ['mp4', 'webm', 'ogg']))
                                            <div class="flex flex-col items-center">
                                                <i class="fas fa-video text-3xl text-primary mb-2"></i>
                                                <span class="text-[10px] text-secondary">Current: {{ basename($banner->image) }}</span>
                                            </div>
                                        @else
                                            <img src="{{ $mediaPath }}" class="w-full h-full object-cover">
                                        @endif
                                    @else
                                        <i class="fas fa-cloud-upload-alt text-3xl text-secondary mb-3 group-hover:text-primary transition-colors"></i>
                                        <span class="text-sm font-bold text-foreground">Click to upload</span>
                                        <span class="text-[10px] text-secondary mt-1">JPG, PNG, WEBP or MP4 (Max 20MB)</span>
                                    @endif
                                </div>
                            </label>
                        </div>
                        @error('image') <span class="text-red-400 text-[10px] mt-1 text-center block">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Status</label>
                        <select name="status" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all appearance-none">
                            <option value="1" {{ old('status', $banner->status ?? 1) == 1 ? 'selected' : '' }} class="bg-[#1a1a1a]">Active</option>
                            <option value="0" {{ old('status', $banner->status ?? 1) == 0 ? 'selected' : '' }} class="bg-[#1a1a1a]">Inactive</option>
                        </select>
                        @error('status') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div class="pt-4">
                        <button type="submit" class="w-full py-4 bg-primary text-black font-bold rounded-xl hover:translate-y-[-2px] transition-all shadow-lg shadow-primary/10">
                            {{ isset($banner) ? 'Update Banner' : 'Create Banner' }}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    @push('scripts')
    <script>
        document.getElementById('media_input').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const container = document.getElementById('preview_container');
            
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    container.innerHTML = '';
                    if (file.type.startsWith('image/')) {
                        const img = document.createElement('img');
                        img.src = event.target.result;
                        img.className = 'w-full h-full object-cover';
                        container.appendChild(img);
                    } else if (file.type.startsWith('video/')) {
                        const div = document.createElement('div');
                        div.className = 'flex flex-col items-center';
                        div.innerHTML = `<i class="fas fa-video text-3xl text-primary mb-2"></i><span class="text-[10px] text-secondary font-semibold">Ready: ${file.name}</span>`;
                        container.appendChild(div);
                    }
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
    @endpush
@endsection