@extends('layouts.admin')

@section('title', __('business.partners.title'))
@section('content')
    <x-admin.page-header
        :title="__('business.partners.title')"
        :description="__('business.partners.description')"
        :eyebrow="__('business.partners.eyebrow')"
    />

    {{-- SECTION 1: مقدمة صفحة شركاؤنا (Hero / Intro Section) --}}
    <section class="panel form-stack">
        <div class="section-heading">
            <div>
                <h2>1. مقدمة صفحة شركاؤنا (Hero / Intro)</h2>
                <p class="field-hint">تحكم في العنوان الرئيسي والوصف الظاهرين في أعلى صفحة الشركاء بالـ Frontend.</p>
            </div>
        </div>
        <form class="form-grid" method="POST" action="{{ route('admin.portfolio.settings.partners.update') }}">
            @csrf @method('PUT')
            <input type="hidden" name="lock_version" value="{{ $partnersSetting->lock_version }}">

            <div class="field full">
                <label for="partners_hero_title">العنوان الرئيسي (Hero Title)</label>
                <input id="partners_hero_title" name="hero[title]" value="{{ old('hero.title', $partnersData['hero']['title'] ?? 'تكنولوجيا أقوى تبدأ بشراكات أقوى') }}" required>
            </div>

            <div class="field full">
                <label for="partners_hero_desc">وصف الصفحة (Hero Description)</label>
                <textarea id="partners_hero_desc" name="hero[description]" rows="3" required>{{ old('hero.description', $partnersData['hero']['description'] ?? '') }}</textarea>
            </div>

            <div class="form-actions full">
                <button type="submit" class="button">حفظ مقدمة الصفحة</button>
            </div>
        </form>
    </section>

    {{-- SECTION 2: بيانات كارت شركاؤنا وتقنياتنا (Card Info & Count) --}}
    <section class="panel form-stack">
        <div class="section-heading">
            <div>
                <h2>2. بيانات قسم شركاؤنا وتقنياتنا (Card Header & Count Badge)</h2>
                <p class="field-hint">تحكم في النص التمهيدي والعنوان والوصف والعداد الخاص بالـ Card الكبيرة في المعرض.</p>
            </div>
        </div>
        <form class="form-grid" method="POST" action="{{ route('admin.portfolio.settings.partners.update') }}">
            @csrf @method('PUT')
            <input type="hidden" name="lock_version" value="{{ $partnersSetting->lock_version }}">

            <div class="field">
                <label for="section_card_label">النص الصغير أعلى العنوان (Label)</label>
                <input id="section_card_label" name="section_card[section_label]" value="{{ old('section_card.section_label', $partnersData['section_card']['section_label'] ?? 'OUR TECHNOLOGY STACK') }}" required>
            </div>

            <div class="field">
                <label for="section_card_title">عنوان القسم (Section Title)</label>
                <input id="section_card_title" name="section_card[section_title]" value="{{ old('section_card.section_title', $partnersData['section_card']['section_title'] ?? 'شركاؤنا وتقنياتنا الموثوقة') }}" required>
            </div>

            <div class="field full">
                <label for="section_card_desc">وصف القسم (Section Description)</label>
                <textarea id="section_card_desc" name="section_card[section_description]" rows="2">{{ old('section_card.section_description', $partnersData['section_card']['section_description'] ?? '') }}</textarea>
            </div>

            <div class="field">
                <label for="count_mode_select">طريقة حساب عداد الشركاء (Badge Count)</label>
                <select id="count_mode_select" name="section_card[count_mode]" data-ui-change="count-mode" data-ui-arg1="custom_count_wrapper">
                    <option value="auto" @selected(($partnersData['section_card']['count_mode'] ?? 'auto') === 'auto')>
                        حساب تلقائي حسب عدد الشركاء النشطين (العدد الحالي: {{ $partners->where('status.value', 'published')->count() }})
                    </option>
                    <option value="custom" @selected(($partnersData['section_card']['count_mode'] ?? 'auto') === 'custom')>
                        قيمة مخصصة يدويًا
                    </option>
                </select>
            </div>

            <div id="custom_count_wrapper" class="field" style="display: {{ ($partnersData['section_card']['count_mode'] ?? 'auto') === 'custom' ? 'block' : 'none' }};">
                <label for="custom_count_val">الرقم المخصص للعداد</label>
                <input id="custom_count_val" type="number" name="section_card[custom_count]" value="{{ old('section_card.custom_count', $partnersData['section_card']['custom_count'] ?? 16) }}" min="1">
            </div>

            <div class="form-actions full">
                <button type="submit" class="button">حفظ بيانات قسم الشركاء</button>
            </div>
        </form>
    </section>

    {{-- SECTION 3: الشركاء والتقنيات (Logos Grid / Dynamic List) --}}
    <section class="panel form-stack">
        <div class="section-heading" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
            <div>
                <h2>3. قائمة الشركاء والتقنيات ({{ $partners->count() }} شريك/تقنية)</h2>
                <p class="field-hint">إدارة شبكة الـ Logos (4 أعمدة × 4 صفوف وما فوق) مع دعم تغيير الشعار، الرابط، الترتيب، والإضافة.</p>
            </div>
            <button type="button" class="button" data-ui-action="toggle-target" data-ui-arg1="create-partner-panel">
                + إضافة شريك / تقنية جديدة
            </button>
        </div>

        {{-- Add Partner Panel (Collapsible) --}}
        <div id="create-partner-panel" class="panel form-stack hidden" style="background: rgba(255, 120, 30, 0.03); border: 1px dashed var(--accent, #f97316); border-radius: 12px; padding: 1.5rem;">
            <h3>{{ __('business.partners.create') }}</h3>
            @include('admin.business.partials.portfolio-form', ['type' => 'partner'])
        </div>

        {{-- Partners Grid Cards --}}
        <div class="partner-logo-only-grid">
            @forelse($partners as $index => $record)
                <article class="partner-logo-only-card">
                    <form method="POST" action="{{ route('admin.portfolio.update', ['type' => 'partner', 'record' => $record->public_id]) }}">
                        @csrf @method('PUT')
                        <input type="hidden" name="type" value="partner">
                        <input type="hidden" name="lock_version" value="{{ $record->lock_version }}">
                        <x-admin.media-picker
                            name="logo_url"
                            :id="'partner_logo_input_'.$record->id"
                            value-mode="url"
                            :selected="old('logo_url', $record->logo_url)"
                            change-label="تغيير صورة الشريك"
                            compact
                            auto-submit
                        />
                    </form>

                    <form method="POST" action="{{ route('admin.trash.destroy', ['entity' => 'partners', 'record' => $record->public_id]) }}" class="partner-logo-only-card__delete">
                        @csrf
                        @method('DELETE')
                        <button type="submit" title="نقل إلى سلة المحذوفات" aria-label="نقل صورة الشريك إلى سلة المحذوفات">
                            <svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="m19 6-1 14H6L5 6"/><path d="M10 11v5M14 11v5"/></svg>
                        </button>
                    </form>
                </article>
            @empty
                <div class="empty-state full">{{ __('business.partners.empty') }}</div>
            @endforelse
        </div>
    </section>

    <script nonce="{{ request()->attributes->get('csp_nonce') }}">
        function updatePartnerPreview(url, previewImgId) {
            const el = document.getElementById(previewImgId);
            if (!el) return;
            if (el.tagName.toLowerCase() === 'img') {
                el.src = url;
                el.style.display = 'block';
            } else {
                const image = document.createElement('img');
                image.src = url;
                image.alt = '';
                image.style.maxHeight = '60px';
                image.style.maxWidth = '90%';
                image.style.objectFit = 'contain';
                el.replaceChildren(image);
            }
        }

        function handleDirectImageUpload(fileInput, targetInputId, previewImgId) {
            if (!fileInput.files || !fileInput.files[0]) return;
            const file = fileInput.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                const targetInput = document.getElementById(targetInputId);
                if (targetInput) targetInput.value = e.target.result;
                if (previewImgId) {
                    updatePartnerPreview(e.target.result, previewImgId);
                }
            };
            reader.readAsDataURL(file);
        }
    </script>
@endsection