@extends('admin.layouts.app')

@section('title', 'Services Page CMS')

@section('content')
<div class="max-w-6xl mx-auto">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Services Page CMS</h1>
        <p class="text-sm text-gray-500 mt-1">Control all content for <code>/services</code> page. Each section is inside dropdown panels.</p>
    </div>

    @if($errors->any())
        <div class="mb-4 rounded-lg bg-red-100 border border-red-300 text-red-700 px-4 py-3 text-sm">
            <ul class="list-disc list-inside space-y-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.services.update') }}" method="POST" enctype="multipart/form-data" class="space-y-4" data-ai-form="true" data-ai-context="Services CMS">
        @csrf
        @php
            $toPreview = function ($value) {
                if (empty($value)) return '';
                if (str_starts_with($value, 'http://') || str_starts_with($value, 'https://')) return $value;
                return asset('storage/' . ltrim($value, '/'));
            };
            $heroImageRaw = old('hero_image', $content['hero']['image'] ?? '');
            $heroImagePreview = $toPreview($heroImageRaw);
            $finalCtaImageRaw = old('final_cta_image', $content['final_cta']['image'] ?? '');
            $finalCtaImagePreview = $toPreview($finalCtaImageRaw);
        @endphp

        <details class="bg-white rounded-xl border border-gray-200 p-5" open>
            <summary class="font-semibold cursor-pointer">SEO Settings (Services page)</summary>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div><label class="text-sm font-medium">SEO Title</label><input name="seo_title" value="{{ old('seo_title', $content['seo']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">SEO Description</label><input name="seo_description" value="{{ old('seo_description', $content['seo']['description']) }}" class="w-full mt-1 rounded border-gray-300"></div>
            </div>
        </details>

        <details class="bg-white rounded-xl border border-gray-200 p-5" open>
            <summary class="font-semibold cursor-pointer">Hero Section (Services page)</summary>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div><label class="text-sm font-medium">Hero Title</label><textarea name="hero_title" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('hero_title', $content['hero']['title']) }}</textarea></div>
                <div><label class="text-sm font-medium">Hero Highlight</label><input name="hero_highlight" value="{{ old('hero_highlight', $content['hero']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Hero Button</label><input name="hero_button" value="{{ old('hero_button', $content['hero']['button']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div>
                    <label class="text-sm font-medium">Hero Image Upload</label>
                    <input type="file" name="hero_image" class="w-full mt-1 text-sm">
                    @if($heroImagePreview)
                        <img src="{{ $heroImagePreview }}" alt="Hero image" class="mt-2 h-24 rounded object-cover border border-gray-200">
                    @endif
                    <p class="text-xs text-gray-500 mt-1 break-all">Current: {{ $heroImageRaw }}</p>
                </div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Hero Text</label><textarea name="hero_text" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('hero_text', $content['hero']['text']) }}</textarea></div>
            </div>
        </details>

        <details class="bg-white rounded-xl border border-gray-200 p-5" open>
            <summary class="font-semibold cursor-pointer">Offer Section Heading (Services page)</summary>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div><label class="text-sm font-medium">Offer Title</label><input name="offer_title" value="{{ old('offer_title', $content['offer']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Offer Highlight</label><input name="offer_highlight" value="{{ old('offer_highlight', $content['offer']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Offer Text</label><textarea name="offer_text" rows="2" class="w-full mt-1 rounded border-gray-300">{{ old('offer_text', $content['offer']['text']) }}</textarea></div>
            </div>
        </details>

        @for($i = 1; $i <= 6; $i++)
            <details class="bg-white rounded-xl border border-gray-200 p-5" {{ $i === 1 ? 'open' : '' }}>
                <summary class="font-semibold cursor-pointer">Service Item {{ $i }} (Services page timeline)</summary>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div><label class="text-sm font-medium">Title</label><input name="service_{{ $i }}_title" value="{{ old('service_'.$i.'_title', $content['services'][$i-1]['title'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                    <div>
                        <label class="text-sm font-medium">Image Upload</label>
                        <input type="file" name="service_{{ $i }}_image" class="w-full mt-1 text-sm">
                        @php
                            $serviceImageRaw = old('service_'.$i.'_image', $content['services'][$i-1]['image'] ?? '');
                            $serviceImagePreview = $toPreview($serviceImageRaw);
                        @endphp
                        @if($serviceImagePreview)
                            <img src="{{ $serviceImagePreview }}" alt="Service {{ $i }} image" class="mt-2 h-20 rounded object-cover border border-gray-200">
                        @endif
                        <p class="text-xs text-gray-500 mt-1 break-all">Current: {{ $serviceImageRaw }}</p>
                    </div>
                    <div class="md:col-span-2"><label class="text-sm font-medium">Text</label><textarea name="service_{{ $i }}_text" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('service_'.$i.'_text', $content['services'][$i-1]['text'] ?? '') }}</textarea></div>
                </div>
            </details>
        @endfor

        <details class="bg-white rounded-xl border border-gray-200 p-5" open>
            <summary class="font-semibold cursor-pointer">Final CTA Section (Services page)</summary>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div><label class="text-sm font-medium">CTA Title</label><input name="final_cta_title" value="{{ old('final_cta_title', $content['final_cta']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">CTA Button</label><input name="final_cta_button" value="{{ old('final_cta_button', $content['final_cta']['button']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">CTA Text</label><textarea name="final_cta_text" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('final_cta_text', $content['final_cta']['text']) }}</textarea></div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">CTA Image Upload</label>
                    <input type="file" name="final_cta_image" class="w-full mt-1 text-sm">
                    @if($finalCtaImagePreview)
                        <img src="{{ $finalCtaImagePreview }}" alt="CTA image" class="mt-2 h-24 rounded object-cover border border-gray-200">
                    @endif
                    <p class="text-xs text-gray-500 mt-1 break-all">Current: {{ $finalCtaImageRaw }}</p>
                </div>
            </div>
        </details>

        <div class="sticky bottom-2 bg-white border border-gray-200 rounded-xl p-4 flex justify-end">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2.5 rounded-lg">Save Services Page Content</button>
        </div>
    </form>
</div>
@endsection