@extends('layouts.admin')

@section('title', __('company.about.title'))
@section('content')
    @php
        $about = $profile->aboutData();
    @endphp

    <x-admin.page-header
        :title="__('company.about.title')"
        :description="__('company.about.description')"
        :eyebrow="__('company.eyebrow')"
    />

    <form class="panel form-stack" method="POST" action="{{ route('admin.company.about.update') }}">
        @csrf
        @method('PUT')
        <input type="hidden" name="lock_version" value="{{ $profile->lock_version }}">

        <!-- 1. Hero & Story / Vision & Mission -->
        <fieldset class="permission-group">
            <legend>{{ __('company.about.sections.hero') }}</legend>
            <div class="form-grid">
                <div class="field">
                    <label>{{ __('company.about.fields.section_title') }}</label>
                    <input name="about_content[hero][title]" value="{{ old('about_content.hero.title', $about['hero']['title'] ?? 'من نحن') }}" required>
                </div>
                <div class="field">
                    <label>{{ __('company.about.fields.section_subtitle') }}</label>
                    <input name="about_content[hero][subtitle]" value="{{ old('about_content.hero.subtitle', $about['hero']['subtitle'] ?? '') }}">
                </div>

                <div class="field full">
                    <label>{{ __('company.about.fields.story_paragraphs') }}</label>
                    <p class="muted" style="font-size: 0.8rem; margin-top: -0.25rem; margin-bottom: 0.5rem;">أدخل فقرات قصة البداية والتطور (4 فقرات):</p>
                    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                        @for($i = 0; $i < 4; $i++)
                            <textarea name="about_content[hero][story_paragraphs][]" rows="2" placeholder="الفقرة {{ $i + 1 }}...">{{ old("about_content.hero.story_paragraphs.{$i}", $about['hero']['story_paragraphs'][$i] ?? '') }}</textarea>
                        @endfor
                    </div>
                </div>

                <div class="field full">
                    <label>{{ __('company.about.fields.story_quote') }}</label>
                    <textarea name="about_content[hero][story_quote]" rows="2">{{ old('about_content.hero.story_quote', $about['hero']['story_quote'] ?? '') }}</textarea>
                </div>

                <div class="field full">
                    <label>{{ __('company.about.fields.story_image') }}</label>
                    <x-admin.media-picker
                        name="about_content[hero][story_image]"
                        id="hero_story_img_input"
                        value-mode="url"
                        :selected="old('about_content.hero.story_image', $about['hero']['story_image'] ?? '')"
                    />
                </div>

                <div class="field">
                    <div class="panel form-stack" style="background: var(--surface-soft); border: 1px solid var(--border); padding: 1rem;">
                        <div class="field">
                            <label>{{ __('company.about.fields.vision_title') }}</label>
                            <input name="about_content[hero][vision_title]" value="{{ old('about_content.hero.vision_title', $about['hero']['vision_title'] ?? 'الرؤية') }}">
                        </div>
                        <div class="field">
                            <label>{{ __('company.about.fields.vision_text') }}</label>
                            <textarea name="about_content[hero][vision_text]" rows="3">{{ old('about_content.hero.vision_text', $about['hero']['vision_text'] ?? '') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="field">
                    <div class="panel form-stack" style="background: var(--surface-soft); border: 1px solid var(--border); padding: 1rem;">
                        <div class="field">
                            <label>{{ __('company.about.fields.mission_title') }}</label>
                            <input name="about_content[hero][mission_title]" value="{{ old('about_content.hero.mission_title', $about['hero']['mission_title'] ?? 'الرسالة') }}">
                        </div>
                        <div class="field">
                            <label>{{ __('company.about.fields.mission_text') }}</label>
                            <textarea name="about_content[hero][mission_text]" rows="3">{{ old('about_content.hero.mission_text', $about['hero']['mission_text'] ?? '') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions" style="margin-top: 1.25rem; display: flex; justify-content: flex-end;">
                <button class="button" type="submit">💾 {{ __('company.save') }}</button>
            </div>
        </fieldset>

        <!-- 2. Timeline / Milestones -->
        <fieldset class="permission-group">
            <legend>{{ __('company.about.sections.timeline') }}</legend>
            <div class="form-grid">
                <div class="field full">
                    <label for="about_timeline_title">{{ __('company.about.fields.timeline_title') }}</label>
                    <input id="about_timeline_title" name="about_content[timeline][title]" value="{{ old('about_content.timeline.title', $about['timeline']['title'] ?? 'رحلة تتطور مع احتياجات الأعمال') }}" required>
                </div>

                <div class="field full">
                    <p class="muted" style="margin-bottom: 0.75rem;">المراحل الزمنية للتطور (5 مراحل):</p>
                    <div style="display: flex; flex-direction: column; gap: 1rem;">
                        @foreach($about['timeline']['items'] ?? [] as $index => $item)
                            <div class="panel form-stack" style="background: var(--surface-soft); border: 1px solid var(--border); padding: 1rem;">
                                <div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
                                <strong>المرحلة #{{ $index + 1 }}</strong>
                                <input type="hidden" name="about_content[timeline][items][{{ $index }}][step]" value="{{ $item['step'] ?? ($index + 1) }}">
                            </div>
                            <div class="form-grid">
                                <div class="field">
                                    <label>{{ __('company.about.fields.step_title') }}</label>
                                    <input name="about_content[timeline][items][{{ $index }}][title]" value="{{ old("about_content.timeline.items.{$index}.title", $item['title'] ?? '') }}">
                                </div>
                                <div class="field">
                                    <label>{{ __('company.about.fields.step_subtitle') }}</label>
                                    <input name="about_content[timeline][items][{{ $index }}][subtitle]" value="{{ old("about_content.timeline.items.{$index}.subtitle", $item['subtitle'] ?? '') }}">
                                </div>
                                <div class="field full">
                                    <label>{{ __('company.about.fields.step_desc') }}</label>
                                    <textarea name="about_content[timeline][items][{{ $index }}][description]" rows="2">{{ old("about_content.timeline.items.{$index}.description", $item['description'] ?? '') }}</textarea>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>
            </div>
            <div class="form-actions" style="margin-top: 1.25rem; display: flex; justify-content: flex-end;">
                <button class="button" type="submit">💾 {{ __('company.save') }}</button>
            </div>
        </fieldset>

        <!-- 3. CEO Message -->
        <fieldset class="permission-group">
            <legend>{{ __('company.about.sections.ceo') }}</legend>
            <div class="form-grid">
                <div class="field full">
                    <label>{{ __('company.about.fields.ceo_title') }}</label>
                    <input name="about_content[ceo][title]" value="{{ old('about_content.ceo.title', $about['ceo']['title'] ?? 'كلمة الرئيس التنفيذي') }}" required>
                </div>

                <div class="field full">
                    <label>{{ __('company.about.fields.ceo_paragraphs') }}</label>
                    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                        @for($i = 0; $i < 4; $i++)
                            <textarea name="about_content[ceo][paragraphs][]" rows="2" placeholder="الفقرة {{ $i + 1 }}...">{{ old("about_content.ceo.paragraphs.{$i}", $about['ceo']['paragraphs'][$i] ?? '') }}</textarea>
                        @endfor
                    </div>
                </div>

                <div class="field full">
                    <label>{{ __('company.about.fields.ceo_quote') }}</label>
                    <textarea name="about_content[ceo][highlight_quote]" rows="2">{{ old('about_content.ceo.highlight_quote', $about['ceo']['highlight_quote'] ?? '') }}</textarea>
                </div>

                <div class="field full">
                    <label>{{ __('company.about.fields.ceo_footer_note') }}</label>
                    <textarea name="about_content[ceo][footer_note]" rows="2">{{ old('about_content.ceo.footer_note', $about['ceo']['footer_note'] ?? '') }}</textarea>
                </div>

                <div class="field">
                    <label>{{ __('company.about.fields.ceo_image') }}</label>
                    <x-admin.media-picker
                        name="about_content[ceo][image]"
                        id="ceo_img_input"
                        value-mode="url"
                        :selected="old('about_content.ceo.image', $about['ceo']['image'] ?? '')"
                    />
                </div>

                <div class="field">
                    <label>{{ __('company.about.fields.ceo_name') }}</label>
                    <input name="about_content[ceo][name]" value="{{ old('about_content.ceo.name', $about['ceo']['name'] ?? 'الرئيس التنفيذي') }}">
                    <label style="margin-top: 0.5rem;">{{ __('company.about.fields.ceo_role') }}</label>
                    <input name="about_content[ceo][role]" value="{{ old('about_content.ceo.role', $about['ceo']['role'] ?? 'CEO & Founder') }}">
                </div>
            </div>
            <div class="form-actions" style="margin-top: 1.25rem; display: flex; justify-content: flex-end;">
                <button class="button" type="submit">💾 {{ __('company.save') }}</button>
            </div>
        </fieldset>

        <!-- 4. Team: Human + AI Synergy -->
        <fieldset class="permission-group">
            <legend>{{ __('company.about.sections.team') }}</legend>
            <div class="form-grid">
                <div class="field">
                    <label>{{ __('company.about.fields.team_title') }}</label>
                    <input name="about_content[team][title]" value="{{ old('about_content.team.title', $about['team']['title'] ?? 'فريق واحد... بقدرات تتضاعف بالذكاء') }}" required>
                </div>
                <div class="field">
                    <label>{{ __('company.about.fields.team_subtitle') }}</label>
                    <input name="about_content[team][subtitle]" value="{{ old('about_content.team.subtitle', $about['team']['subtitle'] ?? '') }}">
                </div>

                <!-- Center Graphic Hub -->
                <div class="field full panel" style="background: var(--surface-soft); border: 1px solid var(--border);">
                    <h3>{{ __('company.about.fields.center_title') }}</h3>
                    <div class="form-grid">
                        <div class="field">
                            <label>{{ __('company.about.fields.center_title') }}</label>
                            <input name="about_content[team][center_title]" value="{{ old('about_content.team.center_title', $about['team']['center_title'] ?? 'الإنسان + الذكاء الاصطناعي فريق') }}">
                        </div>
                        <div class="field">
                            <label>{{ __('company.about.fields.center_subtitle') }}</label>
                            <input name="about_content[team][center_subtitle]" value="{{ old('about_content.team.center_subtitle', $about['team']['center_subtitle'] ?? 'نكمل بعضنا لنبتكر معاً.') }}">
                        </div>
                        <div class="field full">
                            <label>{{ __('company.about.fields.center_image') }}</label>
                            <x-admin.media-picker
                                name="about_content[team][center_image]"
                                id="team_center_img_input"
                                value-mode="url"
                                :selected="old('about_content.team.center_image', $about['team']['center_image'] ?? '')"
                            />
                        </div>
                    </div>
                </div>

                <!-- Two Columns: Human Team vs AI Team -->
                <div class="field">
                    <div style="border: 1px solid var(--border); border-radius: 8px; padding: 1rem; background: var(--surface-soft);">
                        <h4 style="color: var(--accent); margin-bottom: 0.25rem;">{{ __('company.about.fields.human_team_title') }}</h4>
                        <input name="about_content[team][human_team_title]" value="{{ old('about_content.team.human_team_title', $about['team']['human_team_title'] ?? 'الفريق البشري') }}" style="margin-bottom: 0.5rem;">
                        <input name="about_content[team][human_team_subtitle]" value="{{ old('about_content.team.human_team_subtitle', $about['team']['human_team_subtitle'] ?? 'الإبداع • الخبرة • الشغف') }}" placeholder="الشعار الفرعي">

                        <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem;">
                            @foreach($about['team']['human_members'] ?? [] as $idx => $member)
                                <div style="background: var(--surface); padding: 0.75rem; border-radius: 6px; border: 1px solid var(--border);">
                                    <div style="display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.35rem;">
                                        <input name="about_content[team][human_members][{{ $idx }}][title]" value="{{ old("about_content.team.human_members.{$idx}.title", $member['title'] ?? '') }}" placeholder="المسمى الوظيفي" style="font-weight: 600;">
                                    </div>
                                    <textarea name="about_content[team][human_members][{{ $idx }}][description]" rows="1" placeholder="الوصف والمهام">{{ old("about_content.team.human_members.{$idx}.description", $member['description'] ?? '') }}</textarea>
                                    <x-admin.media-picker
                                        name="about_content[team][human_members][{{ $idx }}][image]"
                                        :id="'human_m_'.$idx.'_input'"
                                        value-mode="url"
                                        :selected="old("about_content.team.human_members.{$idx}.image", $member['image'] ?? '')"
                                    />
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="field">
                    <div style="border: 1px solid var(--border); border-radius: 8px; padding: 1rem; background: var(--surface-soft);">
                        <h4 style="color: var(--accent); margin-bottom: 0.25rem;">{{ __('company.about.fields.ai_team_title') }}</h4>
                        <input name="about_content[team][ai_team_title]" value="{{ old('about_content.team.ai_team_title', $about['team']['ai_team_title'] ?? 'فريق Agentic AI') }}" style="margin-bottom: 0.5rem;">
                        <input name="about_content[team][ai_team_subtitle]" value="{{ old('about_content.team.ai_team_subtitle', $about['team']['ai_team_subtitle'] ?? 'ذكاء ذاتي • أتمتة • أداء مستمر') }}" placeholder="الشعار الفرعي">

                        <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem;">
                            @foreach($about['team']['ai_members'] ?? [] as $idx => $member)
                                <div style="background: var(--surface); padding: 0.75rem; border-radius: 6px; border: 1px solid var(--border);">
                                    <div style="display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.35rem;">
                                        <input name="about_content[team][ai_members][{{ $idx }}][title]" value="{{ old("about_content.team.ai_members.{$idx}.title", $member['title'] ?? '') }}" placeholder="المسمى الوظيفي" style="font-weight: 600;">
                                    </div>
                                    <textarea name="about_content[team][ai_members][{{ $idx }}][description]" rows="1" placeholder="الوصف والمهام">{{ old("about_content.team.ai_members.{$idx}.description", $member['description'] ?? '') }}</textarea>
                                    <x-admin.media-picker
                                        name="about_content[team][ai_members][{{ $idx }}][image]"
                                        :id="'ai_m_'.$idx.'_input'"
                                        value-mode="url"
                                        :selected="old("about_content.team.ai_members.{$idx}.image", $member['image'] ?? '')"
                                    />
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions" style="margin-top: 1.25rem; display: flex; justify-content: flex-end;">
                <button class="button" type="submit">💾 {{ __('company.save') }}</button>
            </div>
        </fieldset>

        <!-- 5. CTA Section -->
        <fieldset class="permission-group">
            <legend>{{ __('company.about.sections.cta') }}</legend>
            <div class="form-grid">
                <div class="field">
                    <label>{{ __('company.about.fields.cta_title') }}</label>
                    <input name="about_content[cta][title]" value="{{ old('about_content.cta.title', $about['cta']['title'] ?? 'مشروعك الجاي ممكن يبدأ من رسالة') }}" required>
                </div>
                <div class="field">
                    <label>{{ __('company.about.fields.cta_subtitle') }}</label>
                    <input name="about_content[cta][subtitle]" value="{{ old('about_content.cta.subtitle', $about['cta']['subtitle'] ?? 'احكيلنا إنت عايز توصل لإيه، وإحنا نساعدك تحدد التكنولوجيا اللي توصلك.') }}">
                </div>
                <div class="field">
                    <label>{{ __('company.about.fields.cta_button_text') }}</label>
                    <input name="about_content[cta][button_text]" value="{{ old('about_content.cta.button_text', $about['cta']['button_text'] ?? 'ابدأ المحادثة ←') }}">
                </div>
                <div class="field">
                    <label>{{ __('company.about.fields.cta_button_url') }}</label>
                    <input name="about_content[cta][button_url]" value="{{ old('about_content.cta.button_url', $about['cta']['button_url'] ?? '/contact') }}" placeholder="/contact أو رابط خارجي">
                </div>
            </div>
            <div class="form-actions" style="margin-top: 1.25rem; display: flex; justify-content: flex-end;">
                <button class="button" type="submit">💾 {{ __('company.save') }}</button>
            </div>
        </fieldset>

        <div class="form-actions" style="margin-top: 1.5rem; display: flex; justify-content: flex-end;">
            <button class="button" type="submit" style="min-width: 14rem; font-weight: 700;">💾 {{ __('company.save') }}</button>
        </div>
    </form>

    <script nonce="{{ request()->attributes->get('csp_nonce') }}">
        window.handleImageSelect = function (input, targetInputId, previewImgId) {
            if (input.files && input.files[0]) {
                const file = input.files[0];
                const targetInput = document.getElementById(targetInputId);
                const previewImg = previewImgId ? document.getElementById(previewImgId) : null;

                // Create a temporary data URL or asset path
                const reader = new FileReader();
                reader.onload = function (e) {
                    if (targetInput) {
                        targetInput.value = e.target.result;
                    }
                    if (previewImg) {
                        previewImg.src = e.target.result;
                        previewImg.style.display = 'block';
                    }
                };
                reader.readAsDataURL(file);
            }
        };
    </script>
@endsection