@extends('layouts.frontend')

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

@push('styles')
<style>
  .sale-badge-product-page {
    display: inline-block;
    position: relative;
  }
  
  .sale-badge-text {
    display: inline-block;
    background: #dc2626;
    color: #fff;
    padding: 12px 24px;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 85%, 10px 100%, 0 85%);
    position: relative;
  }
  
  .sale-badge-text::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 0;
    border-top: 10px solid #991b1b;
  }
  
  .sale-badge-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-right: 8px solid #dc2626;
  }
  
  @media (max-width: 767.98px) {
    .sale-badge-text {
      padding: 10px 20px;
      font-size: 0.9rem;
      letter-spacing: 1px;
    }
  }
  
  .wishlist-active,
  .wishlist-active svg,
  .wishlist-active svg use {
    color: #dc2626 !important;
    fill: #dc2626 !important;
  }
  
  .wishlist-active {
    border-color: #dc2626 !important;
  }
  
  .wishlist-active:hover {
    background-color: #dc2626 !important;
    color: #fff !important;
  }
  
  .wishlist-active:hover svg,
  .wishlist-active:hover svg use {
    color: #fff !important;
    fill: #fff !important;
  }
  
  /* Searchable Variant Select Styles */
  .searchable-variant-select-wrapper {
    position: relative;
  }
  
  .searchable-variant-input {
    background-image: none;
    padding-right: 40px;
  }
  
  .searchable-variant-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 2px;
    padding: 0.5rem;
  }
  
  .variant-options-list {
    max-height: 250px;
    overflow-y: auto;
  }
  
  .variant-option {
    padding: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .variant-option:hover {
    background-color: #f8f9fa;
  }
  
  .variant-option.selected {
    background-color: #d9d577;
    color: #36251d;
    font-weight: 600;
  }
  
  .variant-option.hidden {
    display: none;
  }
</style>
@endpush

@section('content')
<div class="container py-4 py-md-5">
  <div class="row g-3">
    <div class="col-12 col-md-6">
      @if($product->images->count() > 0)
        <div class="product-gallery">
          <div class="main-image mb-3">
            @php
              $mainImage = $product->images()->where('is_primary', true)->first() ?? $product->images()->orderBy('sort_order', 'asc')->first();
              $mainImagePath = $mainImage ? (strpos($mainImage->image_path, 'storage/') === 0 ? asset($mainImage->image_path) : asset('storage/' . $mainImage->image_path)) : \App\Helpers\ImageHelper::getProductImage($product);
            @endphp
            <img src="{{ $mainImagePath }}" alt="{{ $product->name }}" class="img-fluid w-100" id="mainImage" style="max-height: 600px; object-fit: contain;">
          </div>
          @if($product->images->count() > 1)
          <div class="thumbnail-images d-flex gap-2 flex-wrap">
            @foreach($product->images()->orderBy('is_primary', 'desc')->orderBy('sort_order', 'asc')->get() as $image)
              @php
                $thumbPath = strpos($image->image_path, 'storage/') === 0 ? asset($image->image_path) : asset('storage/' . $image->image_path);
              @endphp
              <img src="{{ $thumbPath }}" alt="{{ $product->name }}" class="img-thumbnail" style="width: 80px; height: 80px; object-fit: cover; cursor: pointer;" onclick="document.getElementById('mainImage').src = this.src">
            @endforeach
          </div>
          @endif
        </div>
      @else
        <div class="alert alert-warning">No images available for this product.</div>
      @endif
    </div>
    <div class="col-12 col-md-6">
      @php
        $isOnSale = $product->isOnSale();
        $discountPercentage = $product->getDiscountPercentage();
      @endphp
      @if($isOnSale)
        <div class="sale-badge-product-page mb-3">
          <span class="sale-badge-text">{{ $discountPercentage }}% OFF</span>
        </div>
      @endif
      <h1 class="text-uppercase mb-2 mb-md-3 product-title">{{ $product->name }}</h1>
      <div class="mb-3 mb-md-4 product-details">
        @if($isOnSale)
          <div class="d-flex align-items-center gap-2 gap-md-3 flex-wrap">
            <p class="fs-5 fs-md-4 mb-0 product-price-original" style="text-decoration: line-through; color: #999;">${{ number_format($product->price, 2) }}</p>
            <p class="fs-3 fs-md-2 mb-0 text-danger fw-bold product-price-sale">${{ number_format($product->sale_price, 2) }}</p>
            <span class="badge bg-warning text-dark product-save-badge" style="font-size: 0.75rem; padding: 0.3rem 0.6rem;">
              Save ${{ number_format($product->price - $product->sale_price, 2) }}
            </span>
          </div>
        @else
          <p class="fs-5 fs-md-4 text-primary mb-0 product-price-regular">${{ number_format($product->price, 2) }}</p>
        @endif
      </div>
      <p class="mb-3 mb-md-4">{{ $product->description }}</p>
      
      @if($product->variants->count() > 0)
        <div class="mb-3">
          <label class="form-label">Size</label>
          <div class="searchable-variant-select-wrapper position-relative">
            <input type="text" 
                   class="form-select searchable-variant-input" 
                   id="variantSelectInput" 
                   placeholder="Select Size" 
                   readonly 
                   autocomplete="off"
                   style="cursor: pointer;">
            <input type="hidden" id="selectedVariantPrice" value="">
            <input type="hidden" id="selectedVariantStock" value="">
            <span class="search-icon position-absolute" style="right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #999;">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="m21 21-4.35-4.35"></path>
              </svg>
            </span>
            <div class="searchable-variant-dropdown" id="variantDropdown" style="display: none;">
              <input type="text" 
                     class="form-control form-control-sm mb-2" 
                     id="variantSearchInput" 
                     placeholder="Search size/color..." 
                     autocomplete="off"
                     style="font-size: 0.875rem;">
              <div class="variant-options-list" style="max-height: 250px; overflow-y: auto;">
                <div class="variant-option" 
                     data-value="" 
                     data-variant-id=""
                     style="padding: 0.5rem; cursor: pointer; border-bottom: 1px solid #f0f0f0;">
                  Select Size
                </div>
                @foreach($product->variants as $variant)
                  <div class="variant-option" 
                       data-value="{{ $variant->size }} {{ $variant->color ? ' - ' . $variant->color : '' }} ({{ $variant->stock > 0 ? 'In Stock' : 'Out of Stock' }})" 
                       data-variant-id="{{ $variant->id }}"
                       data-price="{{ $variant->price_override ?? $product->price }}"
                       data-stock="{{ $variant->stock }}"
                       style="padding: 0.5rem; cursor: pointer; border-bottom: 1px solid #f0f0f0;">
                    {{ $variant->size }} {{ $variant->color ? ' - ' . $variant->color : '' }} 
                    ({{ $variant->stock > 0 ? 'In Stock' : 'Out of Stock' }})
                  </div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
      @endif

      <form action="{{ route('cart.add') }}" method="POST" class="mb-3 mb-md-4">
        @csrf
        <input type="hidden" name="product_id" value="{{ $product->id }}">
        <input type="hidden" name="variant_id" id="selectedVariantId" value="">
        <input type="hidden" id="variantSelect" value="">
        <div class="d-flex gap-2 gap-md-3 align-items-center mb-3">
          <label class="form-label mb-0">Quantity:</label>
          <div class="input-group" style="max-width: 150px;">
            <button type="button" class="btn btn-outline-secondary quantity-btn-decrease" style="width: 40px;">-</button>
            <input type="number" name="quantity" value="1" min="1" class="form-control text-center quantity-input-product" readonly style="width: 70px;">
            <button type="button" class="btn btn-outline-secondary quantity-btn-increase" style="width: 40px;">+</button>
          </div>
        </div>
        <button type="submit" class="btn btn-primary btn-lg w-100">Add to Cart</button>
      </form>

      @auth
      <form action="{{ route('wishlist.store') }}" method="POST" class="mb-3">
        @csrf
        <input type="hidden" name="product_id" value="{{ $product->id }}">
        <button type="submit" class="btn btn-outline-secondary w-100 d-flex align-items-center justify-content-center gap-2 {{ $isInWishlist ? 'wishlist-active' : '' }}">
          <svg width="20" height="20" viewBox="0 0 24 24">
            <use xlink:href="#heart"></use>
          </svg>
          <span>{{ $isInWishlist ? 'In Wishlist' : 'Add to Wishlist' }}</span>
        </button>
      </form>
      @endauth

      <div class="product-info mt-4">
        <p><strong>SKU:</strong> {{ $product->sku }}</p>
        <p><strong>Category:</strong> <a href="{{ route('categories.show', $product->category->slug) }}">{{ $product->category->name }}</a></p>
      </div>
    </div>
  </div>

  @if($relatedProducts->count() > 0)
  <section id="related-products" class="related-products product-carousel py-4 py-md-5 position-relative overflow-hidden">
    <div class="container">
      <div class="d-flex flex-wrap justify-content-between align-items-center mt-3 mt-md-5 mb-3 px-2 px-md-0">
        <h4 class="text-uppercase mb-2 mb-md-0">You May Also Like</h4>
        <a href="{{ route('categories.show', $product->category->slug) }}" class="btn-link">View All Products</a>
      </div>
      <div class="swiper product-swiper open-up" data-aos="zoom-out">
        <div class="swiper-wrapper d-flex">
          @foreach($relatedProducts as $relatedProduct)
          <div class="swiper-slide">
            @include('frontend.components.product-card-slider', ['product' => $relatedProduct])
          </div>
          @endforeach
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="icon-arrow icon-arrow-left"><svg width="50" height="50" viewBox="0 0 24 24">
          <use xlink:href="#arrow-left"></use>
        </svg></div>
      <div class="icon-arrow icon-arrow-right"><svg width="50" height="50" viewBox="0 0 24 24">
          <use xlink:href="#arrow-right"></use>
        </svg></div>
    </div>
  </section>
  @else
  <div class="mt-4 mt-md-5 text-center py-4">
    <p class="text-muted">No related products found. <a href="{{ route('categories.show', $product->category->slug) }}">Browse more in {{ $product->category->name }}</a></p>
  </div>
  @endif
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Searchable Variant Select
  const variantInput = document.getElementById('variantSelectInput');
  const variantDropdown = document.getElementById('variantDropdown');
  const variantSearchInput = document.getElementById('variantSearchInput');
  const variantOptions = document.querySelectorAll('.variant-option');
  const selectedVariantId = document.getElementById('selectedVariantId');
  const selectedVariantPrice = document.getElementById('selectedVariantPrice');
  const selectedVariantStock = document.getElementById('selectedVariantStock');
  
  if (variantInput && variantDropdown) {
    // Toggle dropdown
    variantInput.addEventListener('click', function(e) {
      e.stopPropagation();
      const isOpen = variantDropdown.style.display !== 'none';
      
      // Close all other dropdowns
      document.querySelectorAll('.searchable-variant-dropdown').forEach(function(d) {
        if (d !== variantDropdown) {
          d.style.display = 'none';
        }
      });
      
      variantDropdown.style.display = isOpen ? 'none' : 'block';
      if (!isOpen) {
        variantSearchInput.focus();
        variantSearchInput.value = '';
        filterVariantOptions();
      }
    });
    
    // Filter options based on search
    function filterVariantOptions() {
      const searchTerm = variantSearchInput.value.toLowerCase();
      variantOptions.forEach(function(option) {
        const text = option.textContent.toLowerCase();
        if (text.includes(searchTerm) || searchTerm === '') {
          option.classList.remove('hidden');
        } else {
          option.classList.add('hidden');
        }
      });
    }
    
    variantSearchInput.addEventListener('input', filterVariantOptions);
    
    // Select option
    variantOptions.forEach(function(option) {
      option.addEventListener('click', function() {
        const variantId = this.dataset.variantId;
        const value = this.dataset.value;
        
        variantInput.value = value || 'Select Size';
        selectedVariantId.value = variantId || '';
        selectedVariantPrice.value = this.dataset.price || '';
        selectedVariantStock.value = this.dataset.stock || '';
        
        // Remove selected class from all options
        variantOptions.forEach(function(opt) {
          opt.classList.remove('selected');
        });
        
        // Add selected class to clicked option
        this.classList.add('selected');
        
        variantDropdown.style.display = 'none';
        
        // Update price display if needed (you can add this logic)
        if (this.dataset.price) {
          // Update price display
        }
      });
    });
    
    // Close dropdown when clicking outside
    document.addEventListener('click', function(e) {
      const wrapper = document.querySelector('.searchable-variant-select-wrapper');
      if (wrapper && !wrapper.contains(e.target)) {
        variantDropdown.style.display = 'none';
      }
    });
  }

  // Quantity controls
  document.querySelector('.quantity-btn-decrease')?.addEventListener('click', function() {
    const input = document.querySelector('.quantity-input-product');
    let value = parseInt(input.value) || 1;
    if (value > 1) {
      input.value = value - 1;
    }
  });

  document.querySelector('.quantity-btn-increase')?.addEventListener('click', function() {
    const input = document.querySelector('.quantity-input-product');
    let value = parseInt(input.value) || 1;
    input.value = value + 1;
  });
});
</script>
@endpush
@endsection