@extends('layouts.admin')
@section('content')
    <x-common.page-breadcrumb pageTitle="Deal Details" />
    <x-common.component-card>
        <div class="flex justify-between mb-6">
            <h2 class="text-xl font-bold">{{ $deal->title_en }}</h2>
            <a href="{{ route('deals.index') }}" class="px-4 py-2 bg-gray-200 rounded-lg">Back</a>
        </div>
        <div class="grid md:grid-cols-2 gap-6">
            <div>
                <p class="text-gray-500 text-sm">Title (EN)</p>
                <p class="font-medium">{{ $deal->title_en }}</p>
            </div>
            <div>
                <p class="text-gray-500 text-sm">Title (AR)</p>
                <p class="font-medium">{{ $deal->title_ar }}</p>
            </div>
            <div>
                <p class="text-gray-500 text-sm">Merchant</p>
                <p class="font-medium">
                    @if($deal->merchant)
                        <a href="{{ route('merchants.show', $deal->merchant) }}" class="text-blue-600 hover:underline">
                            {{ $deal->merchant->business_name }}
                        </a>
                    @else
                        —
                    @endif
                </p>
            </div>
            <div>
                <p class="text-gray-500 text-sm">Category</p>
                <p class="font-medium">{{ $deal->category->name ?? '—' }}</p>
            </div>
            <div>
                <p class="text-gray-500 text-sm">City</p>
                <p class="font-medium">{{ $deal->city ?? '—' }}</p>
            </div>
            <div>
                <p class="text-gray-500 text-sm">Prices</p>
                <p class="font-medium">
                    <span class="line-through text-gray-400">${{ number_format($deal->original_price, 2) }}</span>
                    <span class="ml-2 text-green-600 font-semibold">${{ number_format($deal->discounted_price, 2) }}</span>
                    <span class="ml-2 text-sm text-gray-500">{{ $deal->discount_percentage }}%</span>
                </p>
            </div>
            <div>
                <p class="text-gray-500 text-sm">Status</p>
                <p class="font-medium">{{ ucfirst($deal->status) }}</p>
            </div>
            <div>
                <p class="text-gray-500 text-sm">Featured</p>
                <p class="font-medium">{{ $deal->featured ? 'Yes' : 'No' }}</p>
            </div>
            <div>
                <p class="text-gray-500 text-sm">Period</p>
                <p class="font-medium">{{ optional($deal->start_date)->format('M d, Y H:i') }} - {{ optional($deal->end_date)->format('M d, Y H:i') }}</p>
            </div>
            <div class="md:col-span-2">
                <p class="text-gray-500 text-sm">Description</p>
                <p class="font-medium">{{ $deal->description }}</p>
            </div>
        </div>
    </x-common.component-card>
@endsection