@extends('admin.layout')

@section('content')
<div class="mb-12">
    <a href="{{ route('admin.services.index') }}" class="text-[10px] font-black uppercase tracking-widest text-[#CC2128] hover:text-gray-900 transition-colors mb-4 inline-block">← Back to List</a>
    <h1 class="text-4xl font-black text-gray-900 tracking-tighter uppercase mb-2 block">Create New <span class="text-[#CC2128]">Service</span></h1>
</div>

<form action="{{ route('admin.services.store') }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
    @csrf

    <!-- Settings Sidebar -->
    <div class="lg:col-span-4 space-y-8 sticky top-24">
        <div class="bg-white p-10 shadow-3xl border-t-8 border-[#CC2128]">
            <h4 class="text-xs font-black uppercase tracking-[0.3em] text-[#CC2128] mb-8">Service Settings</h4>
            
            <div class="space-y-8">
                <div>
                    <label class="block text-[10px] font-black uppercase tracking-widest text-gray-400 mb-3 ml-1">Icon Representation</label>
                    <select name="icon" class="w-full px-5 py-4 bg-gray-50 border-2 border-gray-100 focus:border-[#CC2128] outline-none transition-all font-bold text-sm uppercase tracking-tight">
                        <option value="cog">Standard Service (Cog)</option>
                        <option value="pipeline">Pipeline (Lightning)</option>
                        <option value="rms">RMS (Metering)</option>
                    </select>
                </div>

                <div>
                    <label class="block text-[10px] font-black uppercase tracking-widest text-gray-400 mb-3 ml-1">Hero Cover Image</label>
                    <div class="space-y-4">
                        <div id="image-preview" class="relative h-40 w-full mb-4 hidden">
                            <img id="image-preview-img" src="" class="w-full h-full object-cover border-2 border-[#CC2128] shadow-lg">
                        </div>
                        <div class="relative group">
                            <input type="file" name="image" onchange="previewImage(this)" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                            <div id="upload-placeholder" class="px-5 py-8 bg-gray-50 border-2 border-dashed border-gray-200 group-hover:border-[#CC2128] transition-all text-center">
                                <svg class="w-8 h-8 text-gray-300 mx-auto mb-3 group-hover:text-[#CC2128]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                <span class="text-[10px] font-black uppercase tracking-widest text-gray-400 group-hover:text-[#CC2128]">Upload Cover</span>
                            </div>
                            @error('image')
                                <p class="text-[#CC2128] text-[10px] font-black mt-2 uppercase tracking-widest">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="pt-8 border-t border-gray-100">
                    <button type="submit" class="w-full py-5 bg-gray-900 text-white font-black uppercase tracking-widest text-xs hover:bg-[#CC2128] transition-all transform hover:-translate-y-1 shadow-2xl">
                        Create Service
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Content Area -->
    <div class="lg:col-span-8 flex flex-col space-y-8">
        <div x-data="{ tab: 'en' }" class="bg-white p-10 shadow-3xl border border-gray-100 min-h-[800px]">
            <div class="flex space-x-2 border-b-2 border-gray-100 mb-12 overflow-x-auto pb-1">
                @foreach(['en' => 'English', 'bn' => 'Bangla', 'cn' => 'Chinese', 'korean' => 'Korean', 'japan' => 'Japanese'] as $code => $name)
                    <button type="button" 
                            @click="tab = '{{ $code }}'" 
                            :class="tab === '{{ $code }}' ? 'bg-[#CC2128] text-white' : 'bg-gray-50 text-gray-400 hover:bg-gray-100'"
                            class="px-6 py-3 text-[10px] font-black uppercase tracking-widest transition-all whitespace-nowrap">
                        {{ $name }}
                    </button>
                @endforeach
            </div>

            @foreach(['en', 'bn', 'cn', 'korean', 'japan'] as $code)
                <div x-show="tab === '{{ $code }}'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" class="space-y-10">
                    <div>
                        <label class="block text-[10px] font-black uppercase tracking-widest text-[#CC2128] mb-4">Headline / Title ({{ strtoupper($code) }})</label>
                        <input type="text" name="title_{{ $code }}" value="{{ old('title_'.$code) }}" class="w-full px-8 py-6 bg-gray-50 border-2 border-transparent focus:border-[#CC2128] focus:bg-white outline-none transition-all font-black text-2xl uppercase tracking-tighter placeholder-gray-200" placeholder="ENTER TITLE...">
                    </div>
                    
                    <div>
                        <label class="block text-[10px] font-black uppercase tracking-widest text-gray-400 mb-4">Brief Summary ({{ strtoupper($code) }})</label>
                        <textarea name="description_{{ $code }}" class="w-full px-8 py-6 bg-gray-50 border-2 border-transparent focus:border-[#CC2128] focus:bg-white outline-none transition-all font-bold text-sm min-h-[120px] leading-relaxed" placeholder="Short description for the service card...">{{ old('description_'.$code) }}</textarea>
                    </div>

                    <div>
                        <label class="block text-[10px] font-black uppercase tracking-widest text-gray-400 mb-4">Detailed Content ({{ strtoupper($code) }})</label>
                        <textarea name="content_{{ $code }}" class="w-full px-8 py-6 bg-gray-50 border-2 border-transparent focus:border-[#CC2128] focus:bg-white outline-none transition-all font-bold text-sm min-h-[400px] leading-relaxed" placeholder="Full technical details, specifications, and overview...">{{ old('content_'.$code) }}</textarea>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
function previewImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('image-preview-img').src = e.target.result;
            document.getElementById('image-preview').classList.remove('hidden');
            document.getElementById('upload-placeholder').classList.add('hidden');
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush