@extends('layouts.app')

@section('meta_title', $product->meta_title ?? $product->name . ' - Laeti\'Fée')
@section('meta_description', $product->meta_description ?? Str::limit(strip_tags($product->description), 150))

@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

    <div class="text-sm text-gray-500 mb-6">
        Accueil > Boutique > <span class="text-neutral-900 font-bold">{{ $product->name }}</span>
    </div>

    <x-card>
        <div class="md:flex">

            <div class="md:w-1/2 bg-neutral-50 p-8 flex items-center justify-center border-r border-neutral-100">
                <div class="relative shadow-xl rounded-theme overflow-hidden bg-white">
                    <canvas id="canvas" width="450" height="450"></canvas>
                </div>
            </div>

            <div class="md:w-1/2 p-8 md:p-12">
                <h1 class="text-3xl font-extrabold text-neutral-900 mb-2">{{ $product->name }}</h1>
                <div class="text-3xl text-primary font-bold mb-6">{{ $product->price }} €</div>

                <p class="text-gray-600 mb-8 leading-relaxed">
                    {{ $product->description }}
                </p>

                <div class="bg-primary-light/30 rounded-theme p-6 mb-8 border border-primary-light">
                    <h3 class="text-lg font-bold text-primary-dark mb-4 flex items-center">
                        <i class="fas fa-magic mr-2"></i> Personnalisez votre objet
                    </h3>

                    <form id="addToCartForm" action="{{ route('cart.add', $product->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="design_json" id="design_json">
                        <input type="hidden" name="preview_image" id="preview_image">

                        <div class="flex gap-2 items-end">
                            <div class="flex-grow">
                                <x-input-text id="text-input" label="Votre texte" type="text" placeholder="Prénom, phrase..." />
                            </div>
                            <div class="mb-4"> <button type="button" onclick="addText()" class="bg-neutral-800 text-white px-4 py-2 rounded-theme hover:bg-neutral-900 transition h-[42px]">
                                    Ajouter
                                </button>
                            </div>
                        </div>

                        <div class="mb-6 flex items-center gap-3">
                             <label class="text-sm font-medium text-gray-700">Couleur :</label>
                             <input type="color" id="color-picker" value="#000000" class="h-8 w-8 rounded cursor-pointer border-0 p-0">
                        </div>

                        <hr class="border-gray-200 my-4">

                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Ajouter votre photo</label>
                            <label for="imgLoader" class="cursor-pointer block w-full border-2 border-dashed border-gray-300 rounded-theme p-4 text-center hover:bg-white hover:border-primary transition text-gray-500 bg-white/50">
                                <i class="fas fa-cloud-upload-alt text-2xl mb-2 text-primary"></i><br>
                                <span class="text-sm">Cliquez pour choisir une image</span>
                            </label>
                            <input id="imgLoader" name="user_file" type="file" class="hidden"/>
                            <div id="fileNameDisplay" class="text-xs text-green-600 mt-2 hidden font-bold">Image chargée !</div>
                        </div>

                        <x-action-button type="button" onclick="submitToCart()">
                            <i class="fas fa-cart-plus mr-3"></i> AJOUTER AU PANIER
                        </x-action-button>
                    </form>
                </div>
                <div class="mt-16 border-t pt-10">
                        <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center font-logo">Avis des Clients</h2>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-12">

                            <div>
                                @if($product->reviews->count() > 0)
                                    <div class="space-y-6">
                                        @foreach($product->reviews as $review)
                                            <div class="bg-white p-4 rounded shadow-sm border border-gray-100">
                                                <div class="flex items-center justify-between mb-2">
                                                    <div class="font-bold text-gray-800">{{ $review->user->name }}</div>
                                                    <div class="text-yellow-400 text-sm">
                                                        @for($i=1; $i<=5; $i++)
                                                            <i class="fas fa-star {{ $i <= $review->rating ? '' : 'text-gray-300' }}"></i>
                                                        @endfor
                                                    </div>
                                                </div>
                                                <p class="text-gray-600 text-sm">"{{ $review->comment }}"</p>
                                                <p class="text-xs text-gray-400 mt-2">Posté le {{ $review->created_at->format('d/m/Y') }}</p>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <p class="text-gray-500 italic">Aucun avis pour le moment. Soyez le premier !</p>
                                @endif
                            </div>

                            <div class="bg-gray-50 p-6 rounded-lg">
                                @auth
                                    <h3 class="font-bold text-lg mb-4">Donnez votre avis</h3>
                                    <form action="{{ route('products.reviews.store', $product->id) }}" method="POST">
                                        @csrf

                                        <div class="mb-4">
                                            <label class="block text-sm font-bold text-gray-700 mb-2">Votre note</label>
                                            <div class="flex space-x-4">
                                                @for($i=1; $i<=5; $i++)
                                                    <label class="cursor-pointer">
                                                        <input type="radio" name="rating" value="{{ $i }}" class="hidden peer" required>
                                                        <i class="fas fa-star text-2xl text-gray-300 peer-checked:text-yellow-400 hover:text-yellow-400 transition"></i>
                                                    </label>
                                                @endfor
                                            </div>
                                        </div>

                                        <div class="mb-4">
                                            <label class="block text-sm font-bold text-gray-700 mb-2">Votre commentaire</label>
                                            <textarea name="comment" rows="3" class="w-full border rounded p-2" placeholder="Ce mug est magnifique..."></textarea>
                                        </div>

                                        <button type="submit" class="bg-primary hover:bg-primary-dark text-white font-bold py-2 px-6 rounded shadow transition w-full">
                                            Publier l'avis
                                        </button>
                                    </form>
                                @else
                                    <div class="text-center py-8">
                                        <p class="text-gray-600 mb-4">Vous devez être connecté pour laisser un avis.</p>
                                        <a href="{{ route('login') }}" class="text-primary font-bold underline">Se connecter</a>
                                    </div>
                                @endauth
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </x-card>
</div>

<script>



    // Juste une petite modif dans le script précédent pour qu'il trouve bien les champs :
    // Assurez-vous que les IDs (text-input, imgLoader) correspondent bien.

    // --- RECOPIEZ LE SCRIPT DU MESSAGE PRÉCÉDENT ICI ---
     var productImageUrl = "{{ asset($product->image_path) }}";
    // On gère le cas où la zone est null
    var zone = @json(json_decode($product->customization_zone) ?? null);

    // --- FABRIC JS ---
    var canvas = new fabric.Canvas('canvas');

    fabric.Image.fromURL(productImageUrl, function(img) {
        // Logique de centrage/remplissage adaptée à la nouvelle taille
        // On veut que l'image remplisse le canvas de 450x450
        var scale = Math.min(450 / img.width, 450 / img.height);

        // Si l'image est plus petite que le canvas, on l'agrandit pour remplir
        // (Ici on garde votre logique précédente simple pour l'instant)
        img.scaleToWidth(450);

        img.set({selectable: false, evented: false});
        canvas.add(img);
        canvas.sendToBack(img);
        canvas.renderAll();
    }, { crossOrigin: 'anonymous' });

    // Zone rouge (Guide)
    if(zone) {
        var guide = new fabric.Rect({
            left: zone.left, top: zone.top, width: zone.width, height: zone.height,
            fill: 'transparent', stroke: 'rgba(233, 30, 99, 0.3)', strokeDashArray: [5, 5], selectable: false, strokeWidth: 2
        });
        canvas.add(guide);
    }

    function addText() {
        var textVal = document.getElementById('text-input').value;
        if(!textVal) return; // Ne rien faire si vide

        var text = new fabric.Text(textVal, {
            left: zone ? zone.left + 20 : 100,
            top: zone ? zone.top + 50 : 100,
            fontSize: 30, fontFamily: 'Arial', fill: document.getElementById('color-picker').value
        });
        canvas.add(text);
        canvas.setActiveObject(text);
        document.getElementById('text-input').value = ""; // Vider le champ
    }

    // Changement de couleur dynamique sur l'objet sélectionné
    document.getElementById('color-picker').onchange = function() {
        var activeObject = canvas.getActiveObject();
        if (activeObject && activeObject.type === 'text') {
            activeObject.set("fill", this.value);
            canvas.renderAll();
        }
    };

    document.getElementById('imgLoader').onchange = function(e) {
        // Petit effet visuel pour dire que l'image est chargée
        document.getElementById('fileNameDisplay').classList.remove('hidden');
        document.getElementById('fileNameDisplay').innerText = "Fichier sélectionné : " + e.target.files[0].name;

        var reader = new FileReader();
        reader.onload = function (event) {
            var imgObj = new Image();
            imgObj.src = event.target.result;
            imgObj.onload = function () {
                var image = new fabric.Image(imgObj);
                image.scaleToWidth(150);
                canvas.add(image);
                canvas.setActiveObject(image);
            }
        }
        reader.readAsDataURL(e.target.files[0]);
    }

    function submitToCart() {
        // On désélectionne tout pour que le cadre de sélection ne soit pas sur la photo finale
        canvas.discardActiveObject().renderAll();

        var json = JSON.stringify(canvas.toJSON());
        var dataURL = canvas.toDataURL({ format: 'png', quality: 0.8, multiplier: 0.5 });

        document.getElementById('design_json').value = json;
        document.getElementById('preview_image').value = dataURL;
        document.getElementById('addToCartForm').submit();
    }
</script>
@endsection