@extends('layouts.app')

@section('title', $service->name . ' - Texora')
@section('meta_description', $service->short_description)

@section('content')
@php
    $waNum = App\Models\SiteSetting::where('key','whatsapp_number')->value('value') ?? '923001234567';
    $packages = $service->packages->sortBy('sort_order')->values();
    $minDays = $packages->min('delivery_days');
    $maxDays = $packages->max('delivery_days');
    $firstPrice = $packages->first() ? $packages->first()->currency . ' ' . number_format($packages->first()->price, 0) : 'Custom quote';
@endphp

<main class="txp-page" data-txp-page>
    <section class="txp-hero txp-hero--dark" data-txp-hero>
        <div class="txp-shell txp-hero-grid">
            <div>
                <a href="{{ route('services.index') }}" class="txp-kicker txp-reveal">Back to services</a>
                <h1 class="txp-title txp-reveal">{{ $service->name }}<span class="txp-dot">.</span></h1>
                <p class="txp-lede txp-reveal">{{ $service->short_description ?: \Illuminate\Support\Str::limit(strip_tags($service->description), 180) }}</p>
                <div class="mt-8 flex flex-wrap gap-3 txp-reveal">
                    <a href="#packages" class="txp-button">Start Process</a>
                    <a href="{{ route('consultation') }}" class="txp-button-dark" style="background:#f6f6f4;color:#151515;">Talk to Expert</a>
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $waNum) }}?text={{ urlencode('Hi Texora, I need help with ' . $service->name) }}" target="_blank" class="txp-button-dark" style="background:#37d5a7;color:#151515;">WhatsApp</a>
                </div>
            </div>
            <div class="txp-visual txp-reveal">
                <b>{{ $service->name }}</b>
            </div>
        </div>
    </section>

    <section class="txp-section--tight" data-txp-section>
        <div class="txp-shell txp-grid">
            <div class="txp-card">
                <small>Starting at</small>
                <h3>{{ $firstPrice }}</h3>
                <p>Transparent package pricing from your live Texora service data.</p>
            </div>
            <div class="txp-card">
                <small>Timeline</small>
                <h3>{{ $minDays && $maxDays ? $minDays . '-' . $maxDays . ' days' : 'Fast' }}</h3>
                <p>Document collection, review, submission, and status updates handled by your specialist.</p>
            </div>
            <div class="txp-card">
                <small>Support</small>
                <h3>Expert led</h3>
                <p>Use chat, WhatsApp, or consultation if you need guidance before placing an order.</p>
            </div>
        </div>
    </section>

    <section class="txp-section txp-blue-panel" id="packages" x-data="{ activeModal: null }" @close-modal.window="activeModal = null" data-txp-section>
        <div class="txp-shell">
            <div class="txp-section-head">
                <h2>Packages<span class="txp-dot">.</span></h2>
                <p>Select the profile that matches your case. The checkout and registration flow stays exactly the same.</p>
            </div>

            <div class="txp-grid">
                @forelse($packages as $pkg)
                    <article class="txp-card">
                        <small>{{ $pkg->is_popular ? 'Popular' : 'Package' }}</small>
                        <h3>{{ $pkg->name }}</h3>
                        <p>{{ $pkg->description ?: 'Includes expert filing support, document review, and completion guidance.' }}</p>
                        <div class="mb-6 text-4xl font-black tracking-tight">{{ $pkg->currency }} {{ number_format($pkg->price, 0) }}</div>
                        @if(!empty($pkg->features))
                            <ul class="mb-8 space-y-3 text-sm text-white/70">
                                @foreach(array_slice($pkg->features, 0, 5) as $feature)
                                    <li>{{ $feature }}</li>
                                @endforeach
                            </ul>
                        @endif
                        @include('frontend.partials.service-card-actions', [
                            'serviceName' => $service->name,
                            'packageName' => $pkg->name,
                            'startClick' => 'activeModal = ' . $pkg->id,
                            'waNumber' => $waNum,
                        ])
                    </article>
                @empty
                    <div class="txp-card">
                        <small>Quote</small>
                        <h3>Custom package</h3>
                        <p>Contact Texora and we will prepare the right scope for this service.</p>
                        @include('frontend.partials.service-card-actions', [
                            'serviceName' => $service->name,
                            'startUrl' => route('consultation'),
                            'startLabel' => 'Start Now',
                            'waNumber' => $waNum,
                        ])
                    </div>
                @endforelse
            </div>

            @foreach($packages as $pkg)
                <div x-show="activeModal === {{ $pkg->id }}" x-cloak class="fixed inset-0 z-[999999] flex items-center justify-center bg-black/45 p-4" style="display:none;">
                    <div @click.away="activeModal = null" class="w-full max-w-[720px]">
                        <livewire:frontend.service-registration-flow :service-id="$service->id" :package-id="$pkg->id" wire:key="reg-flow-{{ $pkg->id }}" />
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    @if($service->requirements->count())
        <section class="txp-section" data-txp-section>
            <div class="txp-shell">
                <div class="txp-section-head">
                    <h2>Documents<span class="txp-dot">.</span></h2>
                    <p>Prepare these requirements before starting. Your specialist will verify everything before filing.</p>
                </div>
                <div class="txp-grid">
                    @foreach($service->requirements as $i => $req)
                        <div class="txp-card">
                            <small>{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</small>
                            <h3>{{ $req->document_name }}</h3>
                            <p>{{ $req->description ?: 'Secure upload required for this service.' }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="txp-section txp-dark" data-txp-section>
        <div class="txp-shell">
            <div class="txp-section-head">
                <h2>Process<span class="txp-dot">.</span></h2>
                <p>Simple, tracked, and designed to remove back-and-forth from compliance work.</p>
            </div>
            <div class="space-y-0">
                @foreach([
                    ['Select package', 'Choose the package that fits your business case.'],
                    ['Upload documents', 'Share requirements through the secure order workflow.'],
                    ['Expert filing', 'Texora reviews, prepares, files, and updates you.'],
                    ['Receive completion', 'Get your certificate, confirmation, or filed return.'],
                ] as $i => $step)
                    <div class="txp-row">
                        <strong>{{ $step[0] }}</strong>
                        <span>{{ $step[1] }}</span>
                        <em>{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</em>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @if($relatedServices->count())
        <section class="txp-section" data-txp-section>
            <div class="txp-shell">
                <div class="txp-section-head">
                    <h2>Related<span class="txp-dot">.</span></h2>
                    <p>Other services in the same Texora category.</p>
                </div>
                <div class="txp-grid">
                    @foreach($relatedServices as $related)
                        <article class="txp-card" role="link" tabindex="0" data-href="{{ route('services.show', $related->slug) }}">
                            <small>{{ $related->category?->name ?? 'Service' }}</small>
                            <h3>{{ $related->name }}</h3>
                            <p>{{ $related->short_description ?: \Illuminate\Support\Str::limit(strip_tags($related->description), 120) }}</p>
                            @include('frontend.partials.service-card-actions', [
                                'serviceName' => $related->name,
                                'startUrl' => route('services.show', $related->slug) . '#packages',
                                'waNumber' => $waNum,
                            ])
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
</main>
@endsection