@extends('layouts.app')

@section('title', $product->name)

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="relative h-96 bg-gray-200">
                    @if($product->images->first())
                        <img id="main-image" src="{{ asset('storage/' . $product->images->first()->image_path) }}" 
                             alt="{{ $product->name }}" class="w-full h-full object-contain">
                    @else
                        <div class="w-full h-full flex items-center justify-center">
                            <i class="fas fa-image text-6xl text-gray-400"></i>
                        </div>
                    @endif
                </div>
                @if($product->images->count() > 1)
                    <div class="flex gap-2 p-4 overflow-x-auto">
                        @foreach($product->images as $image)
                            <button onclick="document.getElementById('main-image').src='{{ asset('storage/' . $image->image_path) }}'"
                                    class="w-20 h-20 rounded-lg overflow-hidden border-2 border-transparent hover:border-primary transition">
                                <img src="{{ asset('storage/' . $image->image_path) }}" class="w-full h-full object-cover">
                            </button>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <div>
            <div class="bg-white rounded-xl shadow-md p-6">
                <div class="flex items-center justify-between mb-4">
                    <span class="px-3 py-1 bg-{{ $product->shipping_type === 'AIR' ? 'blue' : 'green' }}-500 text-white text-sm rounded">
                        {{ $product->shipping_type }} - {{ $product->estimated_days }} days
                    </span>
                    <span class="px-3 py-1 rounded text-sm 
                        @if($product->status === 'active') bg-green-100 text-green-600
                        @elseif($product->status === 'paired') bg-blue-100 text-blue-600
                        @else bg-gray-100 text-gray-600 @endif">
                        {{ ucfirst($product->status) }}
                    </span>
                </div>

                <h1 class="text-2xl font-bold text-gray-800 mb-4">{{ $product->name }}</h1>

                <div class="mb-6">
                    <span class="text-4xl font-bold text-primary">₦{{ number_format($product->markup_price, 2) }}</span>
                    <span class="text-gray-500 ml-2">per unit</span>
                </div>

                <div class="grid grid-cols-2 gap-4 mb-6">
                    <div class="bg-gray-50 rounded-lg p-3 text-center">
                        <p class="text-sm text-gray-500">Base Cost</p>
                        <p class="font-semibold">₦{{ number_format($product->base_cost, 2) }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-3 text-center">
                        <p class="text-sm text-gray-500">Paired</p>
                        <p class="font-semibold">{{ $product->total_paired }} units</p>
                    </div>
                </div>

                @if($product->status === 'active' && $product->pairing_deadline > now())
                    <div class="mb-6 p-4 bg-red-50 rounded-lg">
                        <div class="flex items-center justify-between">
                            <span class="text-red-600 font-semibold">
                                <i class="fas fa-clock mr-2"></i>Pairing Deadline
                            </span>
                            <span id="countdown" class="text-red-600 font-bold text-xl" data-deadline="{{ $product->pairing_deadline }}"></span>
                        </div>
                    </div>

                    @auth
                        <form method="POST" action="{{ route('products.pair', $product) }}" class="space-y-4">
                            @csrf
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Quantity (Min: {{ $product->min_quantity }})</label>
                                <input type="number" name="quantity" value="{{ $product->min_quantity }}" min="{{ $product->min_quantity }}"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary">
                            </div>
                            <button type="submit" class="w-full py-3 bg-primary text-white font-semibold rounded-lg hover:bg-blue-700 transition">
                                <i class="fas fa-handshake mr-2"></i>Pair Now
                            </button>
                        </form>

                        @if($userPairing)
                            <div class="mt-4 p-4 bg-green-50 rounded-lg">
                                <p class="text-green-600 font-semibold">You've already paired {{ $userPairing->quantity }} units!</p>
                                <p class="text-sm text-gray-600">Total: ₦{{ number_format($userPairing->total_price, 2) }}</p>
                            </div>
                        @endif
                    @else
                        <a href="{{ route('login') }}" class="block w-full py-3 text-center bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300">
                            Login to Pair
                        </a>
                    @endif
                @else
                    <div class="p-4 bg-gray-100 rounded-lg text-center">
                        <p class="text-gray-600">Pairing is closed for this product.</p>
                    </div>
                @endif

                <div class="mt-6 flex items-center justify-between">
                    <button onclick="shareOnWhatsApp()" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
                        <i class="fab fa-whatsapp mr-2"></i>Share
                    </button>
                </div>
            </div>

            @if($product->description)
                <div class="bg-white rounded-xl shadow-md p-6 mt-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">Description</h2>
                    <p class="text-gray-600">{{ $product->description }}</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function updateCountdown() {
    const countdown = document.getElementById('countdown');
    if (!countdown) return;
    
    const deadline = new Date(countdown.dataset.deadline).getTime();
    const now = new Date().getTime();
    const diff = deadline - now;
    
    if (diff <= 0) {
        countdown.textContent = 'Closed';
        location.reload();
        return;
    }
    
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    
    if (days > 0) {
        countdown.textContent = days + 'd ' + hours + 'h ' + minutes + 'm';
    } else if (hours > 0) {
        countdown.textContent = hours + 'h ' + minutes + 'm';
    } else {
        countdown.textContent = minutes + 'm';
    }
}

updateCountdown();
setInterval(updateCountdown, 60000);

function shareOnWhatsApp() {
    const url = window.location.href;
    const text = 'Check out this product: {{ $product->name }} - ₦{{ number_format($product->markup_price, 2) }}';
    window.open('https://wa.me/?text=' + encodeURIComponent(text + ' ' + url), '_blank');
}
</script>
@endpush