@extends('admin.layouts.app')

@section('title', 'Success Stories CMS')

@section('content')
<div class="max-w-6xl mx-auto">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Success Stories CMS</h1>
        <p class="text-sm text-gray-500 mt-1">Control all texts and images for `/success-stories` page.</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.success-stories.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6" data-ai-form="true" data-ai-context="Success Stories 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

        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h2 class="text-lg font-semibold mb-4">Hero</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-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 text</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>
        </section>

        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h2 class="text-lg font-semibold mb-4">Intro + Mid CTA</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="text-sm font-medium">Intro title</label><input name="intro_title" value="{{ old('intro_title', $content['intro']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Intro highlight</label><input name="intro_highlight" value="{{ old('intro_highlight', $content['intro']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Intro text</label><textarea name="intro_text" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('intro_text', $content['intro']['text']) }}</textarea></div>

                <div><label class="text-sm font-medium">Mid CTA title</label><input name="mid_cta_title" value="{{ old('mid_cta_title', $content['mid_cta']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Mid CTA button</label><input name="mid_cta_button" value="{{ old('mid_cta_button', $content['mid_cta']['button']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Mid CTA text</label><textarea name="mid_cta_text" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('mid_cta_text', $content['mid_cta']['text']) }}</textarea></div>
            </div>
        </section>

        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h2 class="text-lg font-semibold mb-4">Testimonials</h2>
            <p class="text-xs text-gray-500 mb-2">Format each line: `INITIALS|NAME|META|QUOTE`</p>
            <textarea name="testimonials_json" rows="8" class="w-full rounded border-gray-300">@foreach(($content['testimonials'] ?? []) as $item){{ ($item['initials'] ?? '').'|'.($item['name'] ?? '').'|'.($item['meta'] ?? '').'|'.($item['quote'] ?? '') }}
@endforeach</textarea>
        </section>

        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h2 class="text-lg font-semibold mb-4">Featured Stories (Slider)</h2>
            <p class="text-xs text-gray-500 mb-2">Optional quick text format per line: `TITLE|PROGRAM|UNIVERSITY|COUNTRY|DESCRIPTION`</p>
            <textarea name="featured_json" rows="4" class="w-full rounded border-gray-300">@foreach(($content['featured'] ?? []) as $item){{ ($item['title'] ?? '').'|'.($item['program'] ?? '').'|'.($item['university'] ?? '').'|'.($item['country'] ?? '').'|'.($item['description'] ?? '') }}
@endforeach</textarea>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                @for($i=1; $i<=3; $i++)
                    <div class="md:col-span-2 border border-gray-200 rounded-lg p-4">
                        <h3 class="text-sm font-semibold mb-3">Featured item {{ $i }}</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div><label class="text-xs font-medium">Title</label><input name="featured_{{ $i }}_title" value="{{ old('featured_'.$i.'_title', $content['featured'][$i-1]['title'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                            <div><label class="text-xs font-medium">Program</label><input name="featured_{{ $i }}_program" value="{{ old('featured_'.$i.'_program', $content['featured'][$i-1]['program'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                            <div><label class="text-xs font-medium">University</label><input name="featured_{{ $i }}_university" value="{{ old('featured_'.$i.'_university', $content['featured'][$i-1]['university'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                            <div><label class="text-xs font-medium">Country</label><input name="featured_{{ $i }}_country" value="{{ old('featured_'.$i.'_country', $content['featured'][$i-1]['country'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                            <div class="md:col-span-2"><label class="text-xs font-medium">Description</label><textarea name="featured_{{ $i }}_description" rows="2" class="w-full mt-1 rounded border-gray-300">{{ old('featured_'.$i.'_description', $content['featured'][$i-1]['description'] ?? '') }}</textarea></div>
                            <div class="md:col-span-2">
                                <label class="text-xs font-medium">Image upload</label>
                                <input type="file" name="featured_{{ $i }}_image" class="w-full mt-1 text-sm">
                                @php
                                    $featuredImageRaw = old('featured_'.$i.'_image', $content['featured'][$i-1]['image'] ?? '');
                                    $featuredImagePreview = $toPreview($featuredImageRaw);
                                @endphp
                                @if($featuredImagePreview)
                                    <img src="{{ $featuredImagePreview }}" alt="Featured item {{ $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: {{ $featuredImageRaw }}</p>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </section>

        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h2 class="text-lg font-semibold mb-4">Videos + Final CTA</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="text-sm font-medium">Videos title</label><input name="videos_title" value="{{ old('videos_title', $content['videos']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Videos highlight</label><input name="videos_highlight" value="{{ old('videos_highlight', $content['videos']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Videos text</label><textarea name="videos_text" rows="2" class="w-full mt-1 rounded border-gray-300">{{ old('videos_text', $content['videos']['text']) }}</textarea></div>

                @for($i=1; $i<=4; $i++)
                    <div><label class="text-sm font-medium">Video {{ $i }} title</label><input name="video_{{ $i }}_title" value="{{ old('video_'.$i.'_title', $content['videos']['items'][$i-1]['title'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                    <div>
                        <label class="text-sm font-medium">Video {{ $i }} image upload</label>
                        <input type="file" name="video_{{ $i }}_image" class="w-full mt-1 text-sm">
                        @php
                            $videoImageRaw = old('video_'.$i.'_image', $content['videos']['items'][$i-1]['image'] ?? '');
                            $videoImagePreview = $toPreview($videoImageRaw);
                        @endphp
                        @if($videoImagePreview)
                            <img src="{{ $videoImagePreview }}" alt="Video {{ $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: {{ $videoImageRaw }}</p>
                    </div>
                @endfor

                <div><label class="text-sm font-medium">Final 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">Final 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">Final CTA text</label><textarea name="final_cta_text" rows="2" class="w-full mt-1 rounded border-gray-300">{{ old('final_cta_text', $content['final_cta']['text']) }}</textarea></div>
                <div>
                    <label class="text-sm font-medium">Final CTA image upload</label>
                    <input type="file" name="final_cta_image" class="w-full mt-1 text-sm">
                    @if($finalCtaImagePreview)
                        <img src="{{ $finalCtaImagePreview }}" alt="Final CTA 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: {{ $finalCtaImageRaw }}</p>
                </div>
                <div><label class="text-sm font-medium">Sticky button text</label><input name="sticky_button" value="{{ old('sticky_button', $content['sticky_button']) }}" class="w-full mt-1 rounded border-gray-300"></div>
            </div>
        </section>

        <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 Success Stories Content
            </button>
        </div>
    </form>
</div>
@endsection