@extends('layouts.master')
@section('title', $settings['product_name'] ?? 'شراء النسخة')

@section('content')
<div style="max-width: 900px; margin: 0 auto;">

    {{-- Header --}}
    <div style="text-align: center; padding: 30px 15px; background: linear-gradient(135deg, #7777CC 0%, #5555AA 100%); color: #fff; margin: -20px -40px 25px; border-bottom: 3px solid #9999CC;">
        <h1 style="font-weight: 900; font-size: 2em; margin-bottom: 5px; color: #FFFFCC;">{{ $settings['product_name'] ?? 'سكريبت كلمات الأغاني' }}</h1>
        <p style="font-size: 1.1em; opacity: 0.9; margin-bottom: 10px; font-weight: 700;">{{ $settings['product_description'] ?? 'نظام متكامل لإدارة كلمات الأغاني والفنانين' }}</p>
        @if(!empty($settings['product_version']))
            <span style="background: rgba(255,255,255,0.2); padding: 4px 14px; border-radius: 20px; font-size: 0.85em;">الإصدار {{ $settings['product_version'] }}</span>
        @endif
        @if(!empty($settings['product_price']))
            <div style="margin-top: 15px; font-size: 2.2em; font-weight: 900; color: #FFFFCC;">{{ $settings['product_price'] }}</div>
        @endif
    </div>

    {{-- Flash messages --}}
    @if(session('verify_error'))
        <div class="alert alert-danger" style="text-align: center; font-weight: 700;">{{ session('verify_error') }}</div>
    @endif
    @if(session('verify_success'))
        <div class="alert alert-success" style="text-align: center;">
            <strong>تم التحقق بنجاح!</strong><br>
            مرحباً {{ session('license')->buyer_name }}، يمكنك تحميل النسخة الآن.
            <div style="margin-top: 10px;">
                <a href="/purchase/download?token={{ urlencode(session('download_token')) }}" class="btn btn-success" style="font-size: 1.1em; padding: 10px 30px;">
                    تحميل النسخة المرخصة
                </a>
            </div>
            <small style="color: #555; display: block; margin-top: 8px;">رابط التحميل صالح لمدة ساعة واحدة فقط</small>
        </div>
    @endif

    {{-- Features Section --}}
    @if(count($features) > 0)
    <div style="margin-bottom: 25px;">
        <h2 style="text-align: center; font-weight: 800; color: #333; margin-bottom: 20px;">مميزات النسخة</h2>
        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px;">
            @foreach($features as $feature)
            <div style="background: #bbbbd0; border: 2px solid #9999CC; padding: 15px; text-align: center;">
                @if(!empty($feature['icon']))
                    <div style="font-size: 2em; margin-bottom: 5px;">{{ $feature['icon'] }}</div>
                @endif
                <h4 style="font-weight: 700; color: #5555AA; margin-bottom: 5px;">{{ $feature['title'] }}</h4>
                @if(!empty($feature['desc']))
                    <p style="color: #555; font-size: 0.9em; margin: 0;">{{ $feature['desc'] }}</p>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Demo Preview --}}
    @if(!empty($settings['product_demo_url']))
    <div style="margin-bottom: 25px; background: #bbbbd0; border: 2px solid #9999CC; padding: 20px;">
        <h3 style="font-weight: 800; color: #333; margin-bottom: 10px; text-align: center;">معاينة تجريبية</h3>
        <p style="text-align: center; color: #666; margin-bottom: 15px;">شاهد النسخة التجريبية قبل الشراء</p>
        <div style="text-align: center;">
            <a href="{{ $settings['product_demo_url'] }}" target="_blank" class="btn btn-primary" style="padding: 10px 35px; font-size: 1.05em;">
                فتح المعاينة التجريبية
            </a>
        </div>
        <div style="margin-top: 15px; border: 2px solid #9999CC; background: #CCCCDD; overflow: hidden;">
            <iframe src="{{ $settings['product_demo_url'] }}" style="width: 100%; height: 400px; border: none;" loading="lazy"></iframe>
        </div>
    </div>
    @endif

    {{-- Requirements --}}
    @php
        $requirements = json_decode(\App\SiteSetting::get('product_requirements', '[]'), true) ?: [];
        $hosting = json_decode(\App\SiteSetting::get('product_hosting', '[]'), true) ?: [];
    @endphp
    @if(count($requirements) > 0 || count($hosting) > 0)
    <div style="margin-bottom: 25px; background: #bbbbd0; border: 2px solid #9999CC; padding: 20px;">
        <h3 style="font-weight: 800; color: #333; margin-bottom: 15px; text-align: center;">متطلبات التشغيل</h3>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
            @if(count($requirements) > 0)
            <div>
                <h5 style="font-weight: 700; color: #5555AA; margin-bottom: 8px;">متطلبات السيرفر</h5>
                <table style="width: 100%; font-size: 0.9em; border-collapse: collapse;">
                    @foreach($requirements as $i => $r)
                    <tr style="{{ $i < count($requirements) - 1 ? 'border-bottom: 1px solid #9999CC;' : '' }}"><td style="padding: 6px;">{{ $r['label'] }}</td><td style="padding: 6px; direction: ltr; font-weight: 700;">{{ $r['value'] }}</td></tr>
                    @endforeach
                </table>
            </div>
            @endif
            @if(count($hosting) > 0)
            <div>
                <h5 style="font-weight: 700; color: #5555AA; margin-bottom: 8px;">الاستضافات المدعومة</h5>
                <ul style="list-style: none; padding: 0; margin: 0; font-size: 0.9em;">
                    @foreach($hosting as $i => $h)
                    <li style="padding: 5px 0;{{ $i < count($hosting) - 1 ? ' border-bottom: 1px solid #9999CC;' : '' }}">{{ $h }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
        </div>
    </div>
    @endif

    {{-- Installation Steps --}}
    @php $installSteps = json_decode(\App\SiteSetting::get('product_install_steps', '[]'), true) ?: []; @endphp
    @if(count($installSteps) > 0)
    <div style="margin-bottom: 25px; background: #bbbbd0; border: 2px solid #9999CC; padding: 20px;">
        <h3 style="font-weight: 800; color: #333; margin-bottom: 15px; text-align: center;">طريقة التثبيت</h3>
        <div style="max-width: 600px; margin: 0 auto;">
            @foreach($installSteps as $i => $step)
            <div style="display: flex; align-items: flex-start; {{ $i < count($installSteps) - 1 ? 'margin-bottom: 12px;' : '' }}">
                <span style="background: {{ $i == count($installSteps) - 1 ? '#44aa44' : '#7777CC' }}; color: #fff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; margin-left: 10px;">{{ $i + 1 }}</span>
                <div>
                    <strong>{{ $step['title'] }}</strong>
                    @if(!empty($step['desc']))
                    <p style="margin: 3px 0 0; font-size: 0.88em; color: #555;">{{ $step['desc'] }}</p>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- What's Included --}}
    @php $productIncludes = json_decode(\App\SiteSetting::get('product_includes', '[]'), true) ?: []; @endphp
    @if(count($productIncludes) > 0)
    <div style="margin-bottom: 25px; background: #bbbbd0; border: 2px solid #9999CC; padding: 20px;">
        <h3 style="font-weight: 800; color: #333; margin-bottom: 15px; text-align: center;">ماذا تحصل عند الشراء؟</h3>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 600px; margin: 0 auto;">
            @foreach($productIncludes as $item)
            <div style="background: #d0e8d0; padding: 8px 12px; font-size: 0.9em;">{{ $item }}</div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- License Info --}}
    @php
        $licenseAllowed = json_decode(\App\SiteSetting::get('license_allowed', '[]'), true) ?: [];
        $licenseNotAllowed = json_decode(\App\SiteSetting::get('license_not_allowed', '[]'), true) ?: [];
        $licenseWarning = \App\SiteSetting::get('license_warning', '');
    @endphp
    @if(count($licenseAllowed) > 0 || count($licenseNotAllowed) > 0)
    <div style="margin-bottom: 25px; background: #bbbbd0; border: 2px solid #9999CC; padding: 20px;">
        <h3 style="font-weight: 800; color: #333; margin-bottom: 15px; text-align: center;">شروط الترخيص</h3>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
            @if(count($licenseAllowed) > 0)
            <div style="background: #d0e8d0; border: 1px solid #8c8; padding: 10px; text-align: center;">
                <strong style="color: #262;">مسموح</strong>
                <ul style="list-style: none; padding: 0; margin: 8px 0 0; font-size: 0.9em; color: #333;">
                    @foreach($licenseAllowed as $a)
                    <li>{{ $a }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
            @if(count($licenseNotAllowed) > 0)
            <div style="background: #e8d0d0; border: 1px solid #c88; padding: 10px; text-align: center;">
                <strong style="color: #a00;">غير مسموح</strong>
                <ul style="list-style: none; padding: 0; margin: 8px 0 0; font-size: 0.9em; color: #333;">
                    @foreach($licenseNotAllowed as $na)
                    <li>{{ $na }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
        </div>
        @if(!empty($licenseWarning))
        <div style="background: #e8e8d0; border: 1px solid #cc8; padding: 10px; margin-top: 10px; text-align: center; font-size: 0.85em; color: #664;">
            <strong>تنبيه:</strong> {{ $licenseWarning }}
        </div>
        @endif
    </div>
    @endif

    {{-- Purchase Contact --}}
    @if(!empty($settings['purchase_contact']))
    <div style="margin-bottom: 25px; background: #7777CC; color: #fff; padding: 20px; text-align: center;">
        <h3 style="font-weight: 800; color: #FFFFCC; margin-bottom: 10px;">للشراء تواصل معنا</h3>
        <p style="font-size: 1.1em; margin: 0;">{!! nl2br(e($settings['purchase_contact'])) !!}</p>
    </div>
    @endif

    {{-- Verify & Download Section --}}
    <div style="background: #bbbbd0; border: 2px solid #9999CC; padding: 25px; margin-bottom: 20px;">
        <h3 style="font-weight: 800; color: #333; text-align: center; margin-bottom: 5px;">تحميل النسخة المرخصة</h3>
        <p style="text-align: center; color: #666; font-size: 0.9em; margin-bottom: 15px;">أدخل مفتاح الترخيص والبريد الإلكتروني لتحميل النسخة</p>

        <form method="POST" action="/purchase/verify" style="max-width: 450px; margin: 0 auto;">
            @csrf
            <div class="form-group">
                <label>مفتاح الترخيص:</label>
                <input type="text" name="license_key" class="form-control" placeholder="XXXX-XXXX-XXXX-XXXX" style="direction: ltr; text-align: center; font-size: 1.1em; letter-spacing: 2px;" required>
            </div>
            <div class="form-group">
                <label>البريد الإلكتروني:</label>
                <input type="email" name="email" class="form-control" placeholder="your@email.com" style="direction: ltr;" required>
            </div>
            <button type="submit" class="btn btn-primary btn-block" style="padding: 10px; font-size: 1.05em;">
                التحقق والتحميل
            </button>
        </form>
    </div>

    {{-- Link to Reseller --}}
    @if(\App\SiteSetting::get('reseller_page_enabled', '0') == '1')
    <div style="text-align: center; margin-top: 25px; padding: 20px; background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%); border: 2px solid #e94560;">
        <p style="color: #ccc; margin-bottom: 8px; font-size: 0.95em;">هل تريد إعادة بيع السكريبت لعملائك؟</p>
        <a href="/reseller" style="display: inline-block; background: #e94560; color: #fff; padding: 10px 30px; font-weight: 700; font-size: 1.05em; text-decoration: none;">رخصة إعادة البيع والتوزيع ←</a>
    </div>
    @endif

</div>
@endsection
