{{-- 
    Digital Machine Detail Page
    E-commerce style product detail page
    
    Uses: <x-site-layout>
    Requirements: 6.3, 6.4
--}}
<x-site-layout 
    title="{{ $machine->name }}"
    meta-description="{{ Str::limit($machine->description, 160) }}"
    :show-breadcrumbs="false"
>
    {{-- Hero Section --}}
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="flex items-center gap-6">
                <div class="hidden md:flex w-20 h-20 rounded-xl shadow-lg bg-white/20 items-center justify-center flex-shrink-0">
                    <i class="fas fa-x-ray text-white text-4xl"></i>
                </div>
                <div>
                    <h1 class="text-3xl md:text-4xl font-serif font-bold text-white">
                        {{ $machine->name }}
                    </h1>
                    <p class="text-blue-100 mt-2">
                        @if($machine->brand){{ $machine->brand }}@endif
                        @if($machine->brand && $machine->category) &mdash; @endif
                        @if($machine->category){{ $machine->category }}@endif
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- Breadcrumb --}}
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-blue-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <a href="{{ route('machines.index') }}" class="hover:text-blue-600 transition">Machines</a>
                @if($machine->category)
                    <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                    <a href="{{ route('machines.index', ['category' => $machine->category]) }}" class="hover:text-blue-600 transition">{{ $machine->category }}</a>
                @endif
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">{{ Str::limit($machine->name, 50) }}</span>
            </nav>
        </div>
    </div>
    
    {{-- Main Product Section --}}
    <section class="py-8 lg:py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:grid lg:grid-cols-2 lg:gap-12">
                
                {{-- Left: Image Gallery --}}
                <div class="mb-8 lg:mb-0">
                    {{-- Main Image --}}
                    <div class="relative bg-gray-100 rounded-2xl overflow-hidden mb-4">
                        <div class="aspect-square flex items-center justify-center" x-data="{ activeImage: 0 }">
                            @if($machine->images && is_array($machine->images) && count($machine->images) > 0)
                                <img :src="{{ json_encode($machine->image_urls) }}[activeImage]" 
                                     alt="{{ $machine->name }}"
                                     class="w-full h-full object-contain p-8"
                                     x-data="{ images: {{ json_encode($machine->image_urls) }} }"
                                     :src="images[activeImage]">
                            @else
                                <div class="w-full h-full flex items-center justify-center">
                                    <i class="fas fa-x-ray text-8xl text-gray-300"></i>
                                </div>
                            @endif
                        </div>
                        
                        {{-- Zoom Button --}}
                        <button class="absolute top-4 right-4 w-10 h-10 bg-white/80 backdrop-blur rounded-full flex items-center justify-center text-gray-700 hover:bg-white transition">
                            <i class="fas fa-search-plus"></i>
                        </button>
                    </div>
                    
                    {{-- Thumbnail Gallery --}}
                    @if($machine->images && is_array($machine->images) && count($machine->images) > 1)
                        <div class="flex gap-2 overflow-x-auto pb-2" x-data="{ activeIndex: 0 }">
                            @foreach($machine->image_urls as $index => $imageUrl)
                                <button 
                                    class="flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition"
                                    :class="activeIndex === {{ $index }} ? 'border-blue-600' : 'border-transparent'"
                                    @click="activeIndex = {{ $index }}; $dispatch('set-active-image', {{ $index }})">
                                    <img src="{{ $imageUrl }}" alt="{{ $machine->name }} - Image {{ $index + 1 }}" class="w-full h-full object-cover">
                                </button>
                            @endforeach
                        </div>
                    @endif
                    
                    {{-- Video Section --}}
                    @if($machine->video_clips && is_array($machine->video_clips) && count($machine->video_clips) > 0)
                        <div class="mt-6">
                            <h4 class="text-sm font-semibold text-gray-700 mb-3">
                                <i class="fas fa-video text-blue-500 mr-2"></i>Video
                            </h4>
                            <div class="aspect-video bg-gray-900 rounded-xl overflow-hidden">
                                @foreach($machine->video_urls as $videoUrl)
                                    @if($loop->first)
                                        <video src="{{ $videoUrl }}" controls class="w-full h-full"></video>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
                
                {{-- Right: Product Info --}}
                <div>
                    {{-- Category & Brand --}}
                    <div class="flex items-center gap-2 mb-4">
                        @if($machine->category)
                            <span class="px-3 py-1 bg-blue-100 text-blue-700 text-sm font-medium rounded-full">
                                {{ $machine->category }}
                            </span>
                        @endif
                        @if($machine->brand)
                            <span class="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full">
                                {{ $machine->brand }}
                            </span>
                        @endif
                    </div>
                    
                    {{-- Title --}}
                    <h1 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-2">
                        {{ $machine->name }}
                    </h1>
                    
                    {{-- Model & Manufacturer --}}
                    <div class="flex flex-wrap gap-4 text-gray-600 mb-4">
                        @if($machine->model)
                            <span><strong>Model:</strong> {{ $machine->model }}</span>
                        @endif
                        @if($machine->manufacturers)
                            <span><strong>Manufacturer:</strong> {{ $machine->manufacturers }}</span>
                        @endif
                    </div>
                    
                    {{-- Price --}}
                    <div class="bg-gradient-to-r from-green-50 to-green-100 rounded-xl p-6 mb-6">
                        @if($machine->price_publishable)
                            <div class="flex items-baseline gap-4">
                                @if($machine->price_ssp)
                                    <span class="text-3xl font-bold text-green-700">
                                        SSP {{ number_format($machine->price_ssp, 2) }}
                                    </span>
                                @endif
                                @if($machine->price_usd)
                                    <span class="text-xl font-semibold text-green-600">
                                        ${{ number_format($machine->price_usd, 2) }} USD
                                    </span>
                                @endif
                            </div>
                            @if($machine->price_note)
                                <p class="text-green-600 text-sm mt-2">{{ $machine->price_note }}</p>
                            @endif
                        @else
                            <div class="flex items-center gap-3">
                                <i class="fas fa-eye-slash text-2xl text-gray-400"></i>
                                <div>
                                    <span class="text-xl font-semibold text-gray-700">Contact for Price</span>
                                    <p class="text-gray-500 text-sm">Price available upon inquiry</p>
                                </div>
                            </div>
                        @endif
                    </div>
                    
                    {{-- Short Description --}}
                    <p class="text-gray-600 leading-relaxed mb-6">
                        {{ Str::limit($machine->description, 200) }}
                    </p>
                    
                    {{-- Contact Actions --}}
                    <div class="flex flex-col sm:flex-row gap-3 mb-8">
                        @php
                            $contactInfo = is_array($machine->contact_info) ? $machine->contact_info : [];
                        @endphp
                        @if(!empty($contactInfo['phone']))
                            <a href="tel:{{ $contactInfo['phone'] }}" 
                               class="flex-1 inline-flex items-center justify-center px-6 py-4 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transition shadow-lg">
                                <i class="fas fa-phone mr-2"></i>Call Now
                            </a>
                        @endif
                        @if(!empty($contactInfo['email']))
                            <a href="mailto:{{ $contactInfo['email'] }}" 
                               class="flex-1 inline-flex items-center justify-center px-6 py-4 bg-white border-2 border-blue-600 text-blue-600 font-semibold rounded-xl hover:bg-blue-50 transition">
                                <i class="fas fa-envelope mr-2"></i>Send Inquiry
                            </a>
                        @endif
                    </div>
                    
                    {{-- Key Specifications --}}
                    @if($machine->specifications && is_array($machine->specifications) && count($machine->specifications) > 0)
                        <div class="bg-gray-50 rounded-xl p-6 mb-6">
                            <h3 class="text-lg font-bold text-gray-800 mb-4">
                                <i class="fas fa-cog text-blue-500 mr-2"></i>Key Specifications
                            </h3>
                            <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                @foreach($machine->specifications as $spec)
                                    @if(is_array($spec) && isset($spec['key']) && isset($spec['value']))
                                        <div class="flex justify-between p-3 bg-white rounded-lg">
                                            <dt class="text-gray-600">{{ $spec['key'] }}</dt>
                                            <dd class="font-semibold text-gray-800">{{ $spec['value'] }}</dd>
                                        </div>
                                    @endif
                                @endforeach
                            </dl>
                        </div>
                    @endif
                    
                    {{-- Contact Info --}}
                    @php
                        $contactInfo = is_array($machine->contact_info) ? $machine->contact_info : [];
                    @endphp
                    @if(!empty($contactInfo))
                        <div class="border border-gray-200 rounded-xl p-6">
                            <h3 class="text-lg font-bold text-gray-800 mb-4">
                                <i class="fas fa-address-card text-blue-500 mr-2"></i>Contact Information
                            </h3>
                            <div class="space-y-3">
                                @if(!empty($contactInfo['phone']))
                                    <div class="flex items-center">
                                        <i class="fas fa-phone text-blue-500 w-6"></i>
                                        <a href="tel:{{ $contactInfo['phone'] }}" class="text-gray-700 hover:text-blue-600">
                                            {{ $contactInfo['phone'] }}
                                        </a>
                                    </div>
                                @endif
                                @if(!empty($contactInfo['email']))
                                    <div class="flex items-center">
                                        <i class="fas fa-envelope text-blue-500 w-6"></i>
                                        <a href="mailto:{{ $contactInfo['email'] }}" class="text-gray-700 hover:text-blue-600">
                                            {{ $contactInfo['email'] }}
                                        </a>
                                    </div>
                                @endif
                                @if(!empty($contactInfo['website']))
                                    <div class="flex items-center">
                                        <i class="fas fa-globe text-blue-500 w-6"></i>
                                        <a href="{{ $contactInfo['website'] }}" target="_blank" rel="noopener" class="text-gray-700 hover:text-blue-600">
                                            {{ $contactInfo['website'] }}
                                        </a>
                                    </div>
                                @endif
                                @if(!empty($contactInfo['address']))
                                    <div class="flex items-start">
                                        <i class="fas fa-map-marker-alt text-blue-500 w-6 mt-1"></i>
                                        <span class="text-gray-700">{{ $contactInfo['address'] }}</span>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
    
    {{-- Description Section --}}
    <section class="py-12 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white rounded-xl shadow-md p-6 lg:p-8">
                <h2 class="text-2xl font-bold text-gray-800 mb-4">
                    <i class="fas fa-info-circle text-blue-500 mr-2"></i>Description
                </h2>
                <div class="prose prose-blue max-w-none text-gray-600">
                    {{ $machine->description }}
                </div>
            </div>
        </div>
    </section>
    
    {{-- Features/Functionalities --}}
    @if($machine->functionalities && is_array($machine->functionalities) && count($machine->functionalities) > 0)
        <section class="py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl font-bold text-gray-800 mb-8">
                    <i class="fas fa-star text-blue-500 mr-2"></i>Features & Functionalities
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($machine->functionalities as $func)
                        @if(is_string($func) || is_numeric($func))
                            <div class="flex items-start bg-blue-50 rounded-lg p-4">
                                <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
                                <span class="text-gray-700">{{ $func }}</span>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    
    {{-- Related Machines --}}
    @if($related->count() > 0)
        <section class="py-12 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl font-bold text-gray-800 mb-8">
                    <i class="fas fa-th-large text-blue-500 mr-2"></i>Related Equipment
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($related as $relatedMachine)
                        <a href="{{ route('machines.show', $relatedMachine->slug) }}" 
                           class="bg-white rounded-xl shadow-md hover:shadow-xl transition overflow-hidden group">
                            <div class="h-40 bg-gray-100 flex items-center justify-center">
                                @if($relatedMachine->primary_image)
                                    <img src="{{ $relatedMachine->primary_image_url }}" alt="{{ $relatedMachine->name }}" class="w-full h-full object-cover">
                                @else
                                    <i class="fas fa-x-ray text-4xl text-gray-300"></i>
                                @endif
                            </div>
                            <div class="p-4">
                                <h3 class="font-semibold text-gray-800 group-hover:text-blue-600 transition truncate">
                                    {{ $relatedMachine->name }}
                                </h3>
                                <p class="text-sm text-gray-500">{{ $relatedMachine->brand }}</p>
                                @if($relatedMachine->price_publishable && $relatedMachine->price_ssp)
                                    <p class="text-sm font-bold text-green-600 mt-1">
                                        SSP {{ number_format($relatedMachine->price_ssp, 2) }}
                                    </p>
                                @endif
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
</x-site-layout>
