@extends('layouts.public-layout')

@section('title', $product->title . ' - Boutique - MMPV')

@section('content')
    <!-- Breadcrumb -->
    <section class="bg-gray-100 py-4">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <nav class="flex text-gray-600 text-sm">
                <a href="{{ route('public.home') }}" class="hover:text-blue-600">
                    <i class="fas fa-home mr-1"></i>Accueil
                </a>
                <span class="mx-2">/</span>
                <a href="{{ route('public.shop') }}" class="hover:text-blue-600">Boutique</a>
                <span class="mx-2">/</span>
                <span class="text-gray-900">{{ $product->title }}</span>
            </nav>
        </div>
    </section>

    <!-- Product Detail -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            @php
                $icon = $product->category === 'Livre' ? 'book' : 'box';
                $color = $product->category === 'Livre' ? 'blue' : 'green';
            @endphp

            <div class="grid md:grid-cols-2 gap-12">
                <!-- Product Image -->
                <div class="bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl overflow-hidden flex items-center justify-center">
                    @if($product->image)
                        <img src="{{ $product->image }}"
                             alt="{{ $product->title }}"
                             class="w-full h-full object-cover">
                    @else
                        <div class="p-12 flex items-center justify-center">
                            <i class="fas fa-{{ $icon }} text-{{ $color }}-400 text-9xl"></i>
                        </div>
                    @endif
                </div>

                <!-- Product Info -->
                <div>
                    <!-- Category Badge -->
                    <div class="mb-4">
                        <span class="inline-block bg-blue-100 text-blue-800 px-4 py-2 rounded-lg font-semibold">
                            <i class="fas fa-{{ $icon }} mr-2"></i>{{ $product->category }}
                        </span>
                    </div>

                    <!-- Title -->
                    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4">{{ $product->title }}</h1>

                    <!-- Author -->
                    @if($product->author)
                        <p class="text-lg sm:text-xl text-gray-600 mb-6">
                            <i class="fas fa-user-pen mr-2"></i>Par <span class="font-semibold">{{ $product->author }}</span>
                        </p>
                    @endif

                    <!-- Price -->
                    <div class="mb-6">
                        <p class="text-3xl sm:text-4xl lg:text-5xl font-bold text-blue-600">{{ number_format($product->price, 2) }} €</p>
                    </div>

                    <!-- Stock Status -->
                    <div class="mb-8">
                        @if($product->stock > 0)
                            <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
                                <span class="bg-green-100 text-green-800 px-4 py-2 rounded-lg font-semibold inline-flex items-center w-fit">
                                    <i class="fas fa-check-circle mr-2"></i>En stock
                                </span>
                                <span class="text-gray-600 text-sm sm:text-base">{{ $product->stock }} exemplaire(s) disponible(s)</span>
                            </div>
                            @if($product->stock <= 5)
                                <p class="text-orange-600 mt-2 text-sm sm:text-base">
                                    <i class="fas fa-exclamation-triangle mr-1"></i>Stock limité ! Plus que {{ $product->stock }} en stock
                                </p>
                            @endif
                        @else
                            <span class="bg-red-100 text-red-800 px-4 py-2 rounded-lg font-semibold inline-flex items-center w-fit">
                                <i class="fas fa-times-circle mr-2"></i>Épuisé
                            </span>
                        @endif
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 mb-8">
                        @if($product->stock > 0)
                            @php
                                $subject = "Commande - " . $product->title;
                                $body = "Bonjour,\n\n";
                                $body .= "Je souhaite commander le produit suivant :\n\n";
                                $body .= "─────────────────────────────\n";
                                $body .= "Produit : " . $product->title . "\n";
                                if($product->author) {
                                    $body .= "Auteur : " . $product->author . "\n";
                                }
                                $body .= "Catégorie : " . $product->category . "\n";
                                $body .= "Prix : " . number_format($product->price, 2) . " €\n";
                                $body .= "─────────────────────────────\n\n";
                                $body .= "MES INFORMATIONS :\n";
                                $body .= "Nom complet : [Votre nom complet]\n";
                                $body .= "Email : [Votre email]\n";
                                $body .= "Téléphone : [Votre numéro de téléphone]\n";
                                $body .= "Adresse de livraison : [Votre adresse complète]\n\n";
                                $body .= "DÉTAILS DE LA COMMANDE :\n";
                                $body .= "Quantité souhaitée : [Nombre d'exemplaires]\n";
                                $body .= "Mode de paiement souhaité : [Espèces / Mobile Money / Virement]\n\n";
                                $body .= "Message ou questions supplémentaires :\n";
                                $body .= "[Votre message]\n\n";
                                $body .= "Cordialement";

                                $mailtoLink = "mailto:rachetesdeleternel@gmail.com?subject=" . rawurlencode($subject) . "&body=" . rawurlencode($body);
                            @endphp
                            <a href="{{ $mailtoLink }}"
                               class="bg-blue-600 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-bold text-base sm:text-lg hover:bg-blue-700 transition flex items-center justify-center">
                                <i class="fas fa-shopping-cart mr-2 sm:mr-3 text-lg sm:text-xl"></i>Acheter maintenant
                            </a>
                        @else
                            <button class="bg-gray-400 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-bold text-base sm:text-lg cursor-not-allowed" disabled>
                                <i class="fas fa-ban mr-2 sm:mr-3 text-lg sm:text-xl"></i>Produit épuisé
                            </button>
                        @endif

                        @php
                            $contactSubject = "Demande d'information - " . $product->title;
                            $contactBody = "Bonjour,\n\nJe souhaite obtenir des informations supplémentaires sur le produit : " . $product->title . "\n\n[Votre question]\n\nCordialement";
                            $contactLink = "mailto:rachetesdeleternel@gmail.com?subject=" . rawurlencode($contactSubject) . "&body=" . rawurlencode($contactBody);
                        @endphp
                        <a href="{{ $contactLink }}"
                           class="bg-gray-200 text-gray-700 px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-bold text-base sm:text-lg hover:bg-gray-300 transition flex items-center justify-center">
                            <i class="fas fa-envelope mr-2 sm:mr-3 text-lg sm:text-xl"></i>Nous contacter
                        </a>
                    </div>

                    <!-- Product Details -->
                    <div class="border-t pt-8">
                        <h2 class="text-xl sm:text-2xl font-bold text-gray-900 mb-4">
                            <i class="fas fa-info-circle mr-2 text-blue-600"></i>Détails du produit
                        </h2>

                        <div class="space-y-3">
                            <div class="flex flex-col sm:flex-row sm:items-center">
                                <span class="font-semibold text-gray-700 sm:w-32 mb-1 sm:mb-0">Catégorie:</span>
                                <span class="text-gray-600">{{ $product->category }}</span>
                            </div>

                            @if($product->author)
                                <div class="flex flex-col sm:flex-row sm:items-center">
                                    <span class="font-semibold text-gray-700 sm:w-32 mb-1 sm:mb-0">Auteur:</span>
                                    <span class="text-gray-600">{{ $product->author }}</span>
                                </div>
                            @endif

                            <div class="flex flex-col sm:flex-row sm:items-center">
                                <span class="font-semibold text-gray-700 sm:w-32 mb-1 sm:mb-0">Prix:</span>
                                <span class="text-gray-600">{{ number_format($product->price, 2) }} €</span>
                            </div>

                            <div class="flex flex-col sm:flex-row sm:items-center">
                                <span class="font-semibold text-gray-700 sm:w-32 mb-1 sm:mb-0">Statut:</span>
                                @if($product->status === 'available')
                                    <span class="text-green-600 font-semibold">Disponible</span>
                                @elseif($product->status === 'out_of_stock')
                                    <span class="text-red-600 font-semibold">Épuisé</span>
                                @else
                                    <span class="text-gray-600 font-semibold">{{ ucfirst($product->status) }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Description Section -->
            @if($product->description)
                <div class="mt-12 sm:mt-16">
                    <div class="bg-gray-50 rounded-2xl p-6 sm:p-8">
                        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 sm:mb-6">
                            <i class="fas fa-file-lines mr-2 sm:mr-3 text-blue-600"></i>Description
                        </h2>
                        <div class="prose max-w-none text-gray-700 leading-relaxed text-base sm:text-lg">
                            {{ $product->description }}
                        </div>
                    </div>
                </div>
            @endif

            <!-- Back to Shop Button -->
            <div class="mt-12 sm:mt-16 text-center">
                <a href="{{ route('public.shop') }}" class="inline-block bg-gray-200 text-gray-700 px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-bold text-base sm:text-lg hover:bg-gray-300 transition">
                    <i class="fas fa-arrow-left mr-2 sm:mr-3"></i>Retour à la boutique
                </a>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="py-12 sm:py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="bg-white bg-opacity-10 rounded-2xl p-6 sm:p-8 backdrop-blur-sm">
                <h2 class="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4">
                    <i class="fas fa-phone-volume mr-2 sm:mr-3"></i>Besoin d'aide ?
                </h2>
                <p class="text-lg sm:text-xl text-blue-100 mb-4 sm:mb-6">
                    Notre équipe est disponible pour répondre à toutes vos questions
                </p>
                <div class="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-4 justify-center">
                    <a href="tel:+33678602428" class="bg-white text-blue-600 px-5 sm:px-6 py-2.5 sm:py-3 rounded-lg font-bold hover:bg-blue-50 transition inline-flex items-center justify-center">
                        <i class="fas fa-phone mr-2"></i>Nous appeler
                    </a>
                    <a href="mailto:contact@mmpv.org" class="bg-white text-blue-600 px-5 sm:px-6 py-2.5 sm:py-3 rounded-lg font-bold hover:bg-blue-50 transition inline-flex items-center justify-center">
                        <i class="fas fa-envelope mr-2"></i>Nous écrire
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection