@extends('Component.layout')

@section('title', 'CMS Management - Iqra Admin')
@section('breadcrumb', 'CMS Management')

@section('content')
<div class="space-y-6">

    {{-- Page Header --}}
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-slate-800">CMS Management</h1>
            <p class="text-xs text-slate-500 font-medium mt-1">Manage and translate frontpage sections directly.</p>
        </div>
        <a href="{{ route(Auth::user()->role === 'super_admin' ? 'superadmin.dashboard' : 'admin.dashboard') }}" class="px-4 py-2.5 bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 text-xs font-bold rounded-full transition-all flex items-center gap-2 shadow-sm">
            <svg class="w-3.5 h-3.5 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/></svg>
            Back to Dashboard
        </a>
    </div>

    {{-- Success Alert --}}
    @if(session('success'))
        <div id="successAlert" class="flex items-center gap-3 bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold px-4 py-3.5 rounded-2xl">
            <svg class="w-4 h-4 text-emerald-600 fill-none stroke-current shrink-0" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            {{ session('success') }}
        </div>
    @endif

    {{-- Main Grid --}}
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">

        {{-- Left Column: Tab Menu --}}
        <div class="lg:col-span-1">
            <div class="bg-white border border-slate-100 rounded-3xl p-3 shadow-sm space-y-1 sticky top-6">
                
                <div class="px-3 pt-2 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-400">Pages</div>

                @foreach($pageLabels as $pageKey => $pageLabel)
                    <a href="{{ route(Auth::user()->role === 'super_admin' ? 'superadmin.cms.index' : 'admin.cms.index', ['tab' => $pageKey]) }}"
                        class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl font-semibold text-xs transition-all {{ $activeTab === $pageKey ? 'bg-cyan-600 text-white' : 'text-slate-500 hover:bg-slate-50 hover:text-slate-800' }}">
                        <svg class="w-4 h-4 fill-none stroke-current shrink-0" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
                        </svg>
                        {{ $pageLabel }}
                    </a>
                @endforeach

            </div>
        </div>

        {{-- Right Column: Active Tab Editor Form --}}
        <div class="lg:col-span-3 space-y-6">
            @if(isset($groupedContents[$activeTab]))
                <form action="{{ route(Auth::user()->role === 'super_admin' ? 'superadmin.cms.update' : 'admin.cms.update', $activeTab) }}" method="POST" class="space-y-6">
                    @csrf

                    @foreach($groupedContents[$activeTab] as $section => $fields)
                        <div class="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm space-y-6">
                            
                            {{-- Section Title --}}
                            <div class="border-b border-slate-100 pb-3 flex items-center justify-between">
                                <h3 class="text-base font-bold text-slate-800 capitalize">
                                    Section: {{ str_replace('_', ' ', $section) }}
                                </h3>
                                <span class="px-2.5 py-1 bg-slate-50 text-slate-400 font-bold text-[9px] rounded-lg uppercase tracking-wider">
                                    {{ count($fields) }} Field(s)
                                </span>
                            </div>

                            {{-- Fields list --}}
                            <div class="space-y-8">
                                @foreach($fields as $field)
                                    <div class="border-b border-slate-50 last:border-b-0 pb-6 last:pb-0">
                                        {{-- Field label --}}
                                        <label class="block text-xs font-bold text-slate-700 uppercase mb-3">
                                            {{ str_replace('_', ' ', $field->key) }}
                                            <span class="text-[9px] text-slate-400 font-semibold italic lowercase">(key: {{ $field->key }})</span>
                                        </label>

                                        {{-- Three Languages Grid --}}
                                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                            
                                            {{-- English --}}
                                            <div>
                                                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">English</div>
                                                @if($field->type === 'textarea')
                                                    <textarea name="content[{{ $field->id }}][en]" rows="3"
                                                        class="w-full text-xs font-medium px-4 py-3 rounded-xl border border-slate-200 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/20 outline-none transition-all"
                                                        required>{{ $field->value['en'] ?? '' }}</textarea>
                                                @else
                                                    <input type="text" name="content[{{ $field->id }}][en]" value="{{ $field->value['en'] ?? '' }}"
                                                        class="w-full text-xs font-medium px-4 py-3 rounded-xl border border-slate-200 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/20 outline-none transition-all"
                                                        required>
                                                @endif
                                            </div>

                                            {{-- Hindi --}}
                                            <div>
                                                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">हिन्दी</div>
                                                @if($field->type === 'textarea')
                                                    <textarea name="content[{{ $field->id }}][hi]" rows="3"
                                                        class="w-full text-xs font-medium px-4 py-3 rounded-xl border border-slate-200 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/20 outline-none transition-all"
                                                        required>{{ $field->value['hi'] ?? '' }}</textarea>
                                                @else
                                                    <input type="text" name="content[{{ $field->id }}][hi]" value="{{ $field->value['hi'] ?? '' }}"
                                                        class="w-full text-xs font-medium px-4 py-3 rounded-xl border border-slate-200 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/20 outline-none transition-all"
                                                        required>
                                                @endif
                                            </div>

                                            {{-- Gujarati --}}
                                            <div>
                                                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">ગુજરાતી</div>
                                                @if($field->type === 'textarea')
                                                    <textarea name="content[{{ $field->id }}][gu]" rows="3"
                                                        class="w-full text-xs font-medium px-4 py-3 rounded-xl border border-slate-200 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/20 outline-none transition-all"
                                                        required>{{ $field->value['gu'] ?? '' }}</textarea>
                                                @else
                                                    <input type="text" name="content[{{ $field->id }}][gu]" value="{{ $field->value['gu'] ?? '' }}"
                                                        class="w-full text-xs font-medium px-4 py-3 rounded-xl border border-slate-200 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/20 outline-none transition-all"
                                                        required>
                                                @endif
                                            </div>

                                        </div>
                                    </div>
                                @endforeach
                            </div>

                        </div>
                    @endforeach

                    {{-- Actions Bar --}}
                    <div class="flex justify-end gap-3 sticky bottom-6 z-10 bg-slate-50/80 backdrop-blur-md p-4 border border-slate-100 rounded-3xl shadow-sm">
                        <button type="submit" class="px-8 py-3 bg-cyan-600 hover:bg-cyan-700 text-white font-bold text-xs rounded-xl shadow-md shadow-cyan-500/20 transition-all">
                            Save All Changes
                        </button>
                    </div>

                </form>
            @else
                <div class="bg-white border border-slate-100 rounded-3xl p-12 shadow-sm text-center">
                    <p class="text-slate-400 text-sm font-semibold">No content blocks found for this page.</p>
                </div>
            @endif
        </div>

    </div>

</div>
@endsection