@extends('layouts.app')

@section('title', 'Buy Reg ' . $plate->name . ' - RegCompare')

@section('content')
    <div class="bg-base min-h-screen py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto">
            <!-- Breadcrumbs -->
            <nav class="flex mb-8" aria-label="Breadcrumb">
                <ol class="flex items-center space-x-4">
                    <li>
                        <div>
                            <a href="{{ route('home') }}" class="text-base-subtle hover:text-brand transition-colors">
                                <svg class="flex-shrink-0 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                    <path
                                        d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                                </svg>
                                <span class="sr-only">Home</span>
                            </a>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="flex-shrink-0 h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"
                                aria-hidden="true">
                                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                            </svg>
                            <a href="{{ session('last_search_url', route('search.results', str_replace(' ', '', $plate->name))) }}"
                                class="ml-4 text-sm font-medium text-base-subtle hover:text-brand">Search Results</a>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="flex-shrink-0 h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"
                                aria-hidden="true">
                                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                            </svg>
                            <span class="ml-4 text-sm font-medium text-base-dark"
                                aria-current="page">{{ $plate->name }}</span>
                        </div>
                    </li>
                </ol>
            </nav>

            <div class="bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100">
                <div class="md:flex">
                    <!-- Left Section: Visual -->
                    <div
                        class="md:w-1/2 bg-base p-8 sm:p-12 flex flex-col justify-center items-center relative overflow-hidden">
                        <div class="absolute inset-0 opacity-10">
                            <div
                                class="absolute -top-[30%] -right-[10%] w-[400px] h-[400px] rounded-full bg-blue-600 blur-3xl">
                            </div>
                            <div
                                class="absolute bottom-[20%] -left-[10%] w-[300px] h-[300px] rounded-full bg-amber-500 blur-3xl">
                            </div>
                        </div>

                        <div class="relative z-10 transform transition-transform hover:scale-105 duration-300">
                            <div
                                class="bg-yellow-400 text-black px-8 py-4 rounded-xl text-5xl sm:text-6xl md:text-7xl font-mono uppercase border-4 border-yellow-500 shadow-lg tracking-widest text-center font-plate whitespace-nowrap inline-block">
                                {{ $plate->name }}
                            </div>
                        </div>

                        <div class="mt-8 px-6 text-center z-10 w-full max-w-md">
                            <h3 class="text-lg font-bold text-base-dark mb-1">{{ $plate->style }} Style</h3>
                            <p class="text-base-subtle text-sm">
                                {{ $plate->description }}
                            </p>
                            <p class="mt-4 text-xs text-gray-400">Verified availability: {{ now()->format('d M Y') }}</p>
                        </div>
                    </div>

                    <!-- Right Section: Details -->
                    <div class="md:w-1/2 p-8 sm:p-12 flex flex-col justify-between">
                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <span
                                    class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-semibold uppercase tracking-wide">Available
                                    Now</span>
                                @if (isset($plate->site->logo))
                                    @if (isset($plate->site->url))
                                        <a href="{{ route('exit', ['site' => $plate->site->id, 'url' => $plate->site->url]) }}"
                                            target="_blank" class="hover:opacity-80 transition-opacity">
                                            <img src="{{ asset('storage/' . $plate->site->logo) }}"
                                                alt="{{ $plate->site->name }}" class="h-8 w-auto object-contain opacity-75">
                                        </a>
                                    @else
                                        <img src="{{ asset('storage/' . $plate->site->logo) }}"
                                            alt="{{ $plate->site->name }}" class="h-8 w-auto object-contain opacity-75">
                                    @endif
                                @endif
                            </div>

                            <h1 class="text-3xl font-extrabold text-base-dark mb-2">Buy this Registration</h1>

                            @if (isset($plate->price) && is_numeric($plate->price))
                                <div class="mb-8 bg-gray-50 rounded-xl p-5 border border-gray-100 shadow-sm">
                                    <div class="flex justify-between text-sm text-base-subtle mb-2">
                                        <span>Base Price</span>
                                        <span class="font-medium">£{{ number_format($plate->price) }}</span>
                                    </div>
                                    @if ($plate->vat > 0)
                                        <div class="flex justify-between text-sm text-base-subtle mb-2">
                                            <span>VAT (20%)</span>
                                            <span class="font-medium">£{{ number_format($plate->vat) }}</span>
                                        </div>
                                    @endif
                                    <div
                                        class="flex justify-between text-sm text-base-subtle mb-4 border-b border-gray-200 pb-2">
                                        <span>DVLA Transfer Fee</span>
                                        <span class="font-medium">£{{ number_format(App\Models\Plate::DVLA_FEE) }}</span>
                                    </div>
                                    <div class="flex justify-between items-baseline">
                                        <span class="text-lg font-bold text-base-dark">Total Price</span>
                                        <span
                                            class="text-4xl font-extrabold text-brand">£{{ number_format($plate->total_price) }}</span>
                                    </div>
                                    <p class="text-xs text-right text-gray-400 mt-1">Includes all taxes and fees</p>
                                </div>
                            @else
                                <div class="flex items-baseline mb-8">
                                    <span class="text-4xl font-extrabold text-brand">POA</span>
                                    <span class="ml-2 text-base-subtle text-sm">Contact for pricing</span>
                                </div>
                            @endif

                            <div class="space-y-4 mb-8">
                                <div class="flex items-center text-base-subtle">
                                    <svg class="h-5 w-5 text-green-500 mr-3" fill="none" viewBox="0 0 24 24"
                                        stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    <span>Fast digital transfer available</span>
                                </div>
                                <div class="flex items-center text-base-subtle">
                                    <svg class="h-5 w-5 text-green-500 mr-3" fill="none" viewBox="0 0 24 24"
                                        stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                    </svg>
                                    <span>Secure transaction via {{ $plate->site->name ?? 'Partner Site' }}</span>
                                </div>
                                <div class="flex items-center text-base-subtle">
                                    <svg class="h-5 w-5 text-green-500 mr-3" fill="none" viewBox="0 0 24 24"
                                        stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    <span>DVLA Recognised Reseller</span>
                                </div>
                            </div>
                        </div>

                        <div>
                            <a href="{{ route('exit', ['site' => $plate->site->id, 'term' => $plate->name]) }}"
                                target="_blank"
                                class="w-full flex justify-center py-4 px-6 border border-transparent rounded-xl shadow-lg text-lg font-bold text-white bg-accent hover:bg-accent-hover focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all transform hover:-translate-y-1 mb-4">
                                View at {{ $plate->site->name ?? 'Seller' }}
                                <svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14">
                                    </path>
                                </svg>
                            </a>
                            <p class="text-xs text-center text-gray-400">
                                You will be redirected to our trusted partner's website to complete your purchase.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            @if ($other_plates->count() > 0)
                <div class="mt-8 bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
                    <h2 class="text-xl font-bold text-base-dark mb-4">Compare Prices</h2>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Seller</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Total Price</th>
                                    <th scope="col" class="relative px-6 py-3">
                                        <span class="sr-only">View</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach ($other_plates as $other)
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                @if (isset($other->site->logo))
                                                    <img class="h-8 w-auto object-contain mr-3"
                                                        src="{{ asset('storage/' . $other->site->logo) }}"
                                                        alt="{{ $other->site->name }}">
                                                @else
                                                    <span
                                                        class="text-sm font-medium text-gray-900">{{ $other->site->name ?? 'Unknown Seller' }}</span>
                                                @endif
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            @if (isset($other->price) && is_numeric($other->price))
                                                <div class="text-sm font-bold text-gray-900">
                                                    £{{ number_format($other->total_price) }}</div>
                                                <div class="text-xs text-gray-500">Includes fees</div>
                                            @else
                                                <span class="text-sm text-gray-500">POA</span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <a href="{{ route('exit', ['site' => $other->site->id, 'term' => $other->name]) }}"
                                                target="_blank"
                                                class="text-brand hover:text-brand-dark font-semibold">View at
                                                {{ $other->site->name ?? 'Seller' }}</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            <div class="mt-8 flex justify-center">
                <a href="{{ session('last_search_url', route('search.results', str_replace(' ', '', $plate->name))) }}"
                    class="inline-flex items-center text-base-subtle hover:text-brand transition-colors font-medium">
                    <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Back to Search Results
                </a>
            </div>

            <!-- FAQ Teaser -->
            <div class="mt-12 bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
                <h2 class="text-xl font-bold text-base-dark mb-4">Common Questions</h2>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="font-semibold text-gray-900 mb-2">How long does the transfer take?</h3>
                        <p class="text-base-subtle text-sm">Most transfers are completed online instantly (7am-7pm). Paper
                            applications can take 2-4 weeks.</p>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-900 mb-2">Are there hidden fees?</h3>
                        <p class="text-base-subtle text-sm">The price shown typically includes the £80 DVLA transfer fee,
                            but always check the final price on the seller's website.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection