@extends('layouts.admin')

@section('title', isset($contact_section) ? 'Edit Contact Section' : 'Add Contact Section')

@section('admin_content')
    <div class="mb-10">
        <a href="{{ route('admin.contact_sections.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 Sections
        </a>
        <h3 class="text-2xl font-bold">{{ isset($contact_section) ? 'Edit Contact Section' : 'Create New Contact Section' }}</h3>
        <p class="text-secondary text-sm">Configure dynamic content sections for the Contact Us page.</p>
    </div>

    <div class="admin-card rounded-[2rem] p-8 max-w-4xl" x-data="{ type: '{{ old('type', $contact_section->type ?? 'header') }}' }">
        <form action="{{ isset($contact_section) ? route('admin.contact_sections.update', $contact_section) : route('admin.contact_sections.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @if(isset($contact_section))
                @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">Section Type</label>
                        <select name="type" x-model="type" 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" required>
                            <option value="header" class="bg-[#1a1a1a]">Page Header</option>
                            <option value="team_heading" class="bg-[#1a1a1a]">Team Category Heading (e.g. Our Marketing Team)</option>
                            <option value="team_member" class="bg-[#1a1a1a]">Team Member (Executive Style)</option>
                            <option value="marketing_member" class="bg-[#1a1a1a]">Marketing Member (Text Style)</option>
                            <option value="section_heading" class="bg-[#1a1a1a]">Section Heading (e.g. For General Enquiries)</option>
                            <option value="address" class="bg-[#1a1a1a]">Address / Location</option>
                            <option value="contact_info" class="bg-[#1a1a1a]">General Contact Info (Phone/Email)</option>
                            <option value="social_media" class="bg-[#1a1a1a]">Social Media Link</option>
                            <option value="map" class="bg-[#1a1a1a]">Google Map Embed URL</option>
                        </select>
                        @error('type') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div x-show="type !== 'contact_info'">
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">
                            <span x-show="type === 'header' || type === 'team_member' || type === 'marketing_member' || type === 'team_heading' || type === 'section_heading'">Name / Title</span>
                            <span x-show="type === 'address'">Office / Factory Name</span>
                            <span x-show="type === 'social_media'">Social Platform Name</span>
                            <span x-show="type === 'map'">Location Name</span>
                        </label>
                        <input type="text" name="title" value="{{ old('title', $contact_section->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="type === 'team_member' || type === 'marketing_member' ? 'e.g. Asef Kamal Pasha' : (type === 'team_heading' ? 'e.g. Our Marketing Team' : 'e.g. Head Office')" :required="type !== 'contact_info'">
                        @error('title') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div x-show="type === 'team_member' || type === 'marketing_member' || type === 'contact_info'">
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">
                            <span x-show="type === 'team_member' || type === 'marketing_member'">Designation</span>
                            <span x-show="type === 'contact_info'">Category (e.g. Phone, Email)</span>
                        </label>
                        <input type="text" name="subtitle" value="{{ old('subtitle', $contact_section->subtitle ?? '') }}" 
                            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="type === 'team_member' || type === 'marketing_member' ? 'e.g. Managing Director' : 'e.g. Phone'">
                        @error('subtitle') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div x-show="type === 'team_member' || type === 'marketing_member' || type === 'address'">
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Email Address</label>
                        <input type="email" name="email" value="{{ old('email', $contact_section->email ?? '') }}" 
                            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="e.g. info@setaragroup.com">
                        @error('email') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div x-show="type === 'team_member' || type === 'marketing_member'">
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Phone Number</label>
                        <input type="text" name="phone" value="{{ old('phone', $contact_section->phone ?? '') }}" 
                            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="e.g. +880123456789">
                        @error('phone') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div x-show="type === 'address' || type === 'social_media'">
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Icon (FontAwesome)</label>
                        <input type="text" name="icon" value="{{ old('icon', $contact_section->icon ?? '') }}" 
                            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="e.g. fas fa-map-marker-alt">
                        @error('icon') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div x-show="type === 'social_media' || type === 'map'">
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">
                            <span x-show="type === 'social_media'">Profile Link</span>
                            <span x-show="type === 'map'">Embed URL (src)</span>
                        </label>
                        <input type="text" name="link" value="{{ old('link', $contact_section->link ?? '') }}" 
                            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="https://...">
                        @error('link') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div class="space-y-6">
                    <div x-show="type === 'team_member'">
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Profile Photo (Optional)</label>
                        <div class="relative group">
                            <input type="file" name="image" id="image_input" class="hidden" accept="image/*">
                            <label for="image_input" class="cursor-pointer block">
                                <div class="w-full aspect-square 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($contact_section) && $contact_section->image)
                                        <img src="{{ asset('storage/' . $contact_section->image) }}" class="w-full h-full object-cover">
                                    @else
                                        <i class="fas fa-user-circle 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>
                                    @endif
                                </div>
                            </label>
                        </div>
                        @error('image') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div x-show="type !== 'social_media' && type !== 'map' && type !== 'team_heading' && type !== 'section_heading'">
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">
                            <span x-show="type === 'header' || type === 'team_member' || type === 'marketing_member'">Info / Bio / Contact Details</span>
                            <span x-show="type === 'address'">Full Address</span>
                            <span x-show="type === 'contact_info'">Phone/Email List (HTML allowed)</span>
                        </label>
                        <textarea name="description" 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="Details...">{{ old('description', $contact_section->description ?? '') }}</textarea>
                        @error('description') <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">Display Order</label>
                            <input type="number" name="order" value="{{ old('order', $contact_section->order ?? 0) }}" 
                                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"
                                required>
                            @error('order') <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">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', $contact_section->status ?? 1) == 1 ? 'selected' : '' }} class="bg-[#1a1a1a]">Active</option>
                                <option value="0" {{ old('status', $contact_section->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>

                    <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($contact_section) ? 'Update Section' : 'Create Section' }}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    @push('scripts')
    <script>
        document.getElementById('image_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 = `<img src="${event.target.result}" class="w-full h-full object-cover">`;
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
    @endpush
@endsection