@extends('layouts.customer')
@section('body_attributes')

@endsection
@section('head')
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <title>Mangalore Stores</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/bootstrap.min.css') }}" >    
    <!-- Main Style -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/main.css') }}">
    <!-- Responsive Style -->
    <link rel="shortcut icon" href="{{ asset('Mangalore-Stores/assets/img/fav.png') }}" type="image/x-icon">
    <!-- Responsive Style -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/responsive.css') }}">
    <!-- Fonts -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/fonts/font-awesome.min.css') }}">
    <!-- Icon -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/fonts/simple-line-icons.css') }}"> 
    <!-- Slicknav -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/slicknav.css') }}">
    <!-- Nivo Lightbox -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/nivo-lightbox.css') }}" > 
    <!-- Animate -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/animate.css') }}">
    <!-- Owl carousel -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/owl.carousel.css') }}">   
    
    <!-- Color CSS Styles  -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/colors/default.css') }}" media="screen" /> 

   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
   
{{-- 
Page CSS:
File: product-view.css
Location: public/common/css/customer/product-view.css
Used For: product-view page specific layout and styling.
--}}
<link rel="stylesheet" href="{{ asset('common/css/customer/product-view.css') }}">
@endsection
@section('show_customer_categories', '1')
@section('content')
<section class="prodcut_desc">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <ol class="breadcrumb links_box" style="background-color:transparent;">
          <li><a href="{{ route('customer.home') }}">Home</a></li>
          <li><a href="{{ route('customer.collection') }}">Products</a></li>
          <li><a href="#" id="breadcrumbCategory">Category</a></li>
          <li><a href="#" id="breadcrumbProduct">Loading...</a></li>
        </ol>
      </div>
    </div>
  </div>
</section>
  

<section class="product-section">
  <div class="container">

    <div class="product-card">

      <div class="row g-5">

        <!-- PRODUCT IMAGE -->
        <div class="col-lg-6">

          <div class="gallery-wrapper">

    <div class="thumb-list">
      <!-- Thumbnails will be populated dynamically by product-detail.js -->
      <div class="thumb"><img src="{{ asset('Mangalore-Stores/assets/img/no-image.png') }}" style="object-fit:contain;background:#fafafa;width:100%;height:100%;"></div>
    </div>

    <!-- CENTER IMAGE -->

    <div class="preview-wrapper" id="previewBox">

      <div class="lens" id="lens"></div>

      <img class="preview active"
        src="{{ asset('Mangalore-Stores/assets/img/no-image.png') }}" style="object-fit:contain;background:#fafafa;">

    </div>

  </div>

        </div>

        <!-- PRODUCT DETAILS -->
        <div class="col-lg-6">

          <div class="zoom-result" id="zoomResult"></div>

          <span class="bg-success" id="productCategory">
            Loading...
          </span>

          <h1 class="product-title" id="productTitle">
            Loading product details...
          </h1>

          <div class="rating product-rating-summary" id="productRatingStats">
            <i class="bi bi-star"></i>
            <i class="bi bi-star"></i>
            <i class="bi bi-star"></i>
            <i class="bi bi-star"></i>
            <i class="bi bi-star"></i>
            <span class="rating-copy">0.0 (0 Reviews)</span>
            <button type="button" class="write-review-button" id="writeReviewBtn" title="Write a Review" aria-label="Write a Review">
              <i class="bi bi-pencil-square" aria-hidden="true"></i>
            </button>
          </div>

          <div class="mt-3">
            <span class="price">₹0.00</span>

            <span class="old-price" style="display:none;"></span>

            <span class="discount" style="display:none;"></span>
          </div>

          <p class="text-muted small mb-4" id="productWeight"></p>

          <div class="badge-stock">
            Loading...
          </div>

          

          

          <!-- Weight Selection -->
          <div class="mt-4" id="weightSection">
            <h5 class="mb-3">Select Size</h5>

            <div class="d-flex flex-wrap gap-3" id="weightButtons">
              <!-- Weight buttons populated dynamically if unit data available -->
            </div>
          </div>

          <!-- QUANTITY -->
          <div class="quantity-box">
              <strong>Quantity:</strong>

              <button type="button" class="qty-btn minus">-</button>

              <input type="text" value="1" class="qty-input" readonly>

              <button type="button" class="qty-btn plus">+</button>
          </div>

          <!-- BUTTONS -->
          <div class="d-flex gap-3 flex-wrap mt-4">

            <button class="btn-add-to-cart">
              <i class="bi bi-cart-fill"></i>
              Add to Cart
            </button>

            <button class="btn-buy">
              <i class="bi bi-lightning-fill"></i>
              Buy Now
            </button>

          </div>

          <!-- DELIVERY -->
          <div class="delivery-box">

            <p>
              <i class="bi bi-truck"></i>
              Free delivery on orders above ₹999
            </p>

            <p>
              <i class="bi bi-arrow-repeat"></i>
              7 Days Easy Return Policy
            </p>

            <p>
              <i class="bi bi-shield-check"></i>
              Secure Payment & Trusted Quality
            </p>

          </div>

        </div>

      </div>

    </div>

  </div>
</section>




<section class="main-section">
  <div class="container">
    
    <!-- TABS NAV -->
    <ul class="nav nav-tabs product-tabs" id="productTabs" role="tablist">
      <li class="active" role="presentation">
        <a id="nav-description-tab" data-toggle="tab" href="#nav-description" role="tab" aria-controls="nav-description" aria-selected="true">Description</a>
      </li>
      <li role="presentation">
        <a id="nav-reviews-tab" data-toggle="tab" href="#nav-reviews" role="tab" aria-controls="nav-reviews" aria-selected="false">Add Reviews</a>
      </li>
    </ul>

    <!-- TABS CONTENT -->
    <div class="tab-content" id="productTabsContent">
      
      <!-- TAB 1: Description -->
      <div class="tab-pane fade in active" id="nav-description" role="tabpanel" aria-labelledby="nav-description-tab">
        <div class="row g-4">
          <!-- Product Description -->
          <div class="col-md-7">
            <div class="custom-card" id="descriptionCard">
              <h2 class="title">Product Description</h2>
              <div class="product-copy-section" id="productSummarySection" hidden>
                <h3>Overview</h3>
                <p class="description" id="productShortDescription"></p>
              </div>
              <div class="product-copy-section">
                <p class="description" id="productDescription">Loading product description...</p>
              </div>
              <div class="product-copy-section" id="productBenefitsSection" hidden>
                <h3>Benefits</h3>
                <p class="description" id="productBenefits"></p>
              </div>
              <div class="product-copy-section" id="productStorageSection" hidden>
                <h3>Storage &amp; Uses</h3>
                <p class="description" id="productStorageUses"></p>
              </div>
            </div>
          </div>

          <!-- Product Details -->
          <div class="col-md-5 product-details-column">
            <div class="custom-card">
              <h2 class="title">Product Details</h2>
              <div class="details-table">
                <p class="text-muted small">Loading details...</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- TAB 2: Reviews -->
      <div class="tab-pane fade" id="nav-reviews" role="tabpanel" aria-labelledby="nav-reviews-tab">
        <div class="custom-card">
          <h2 class="title">Customer Reviews</h2>
          <div class="row review-layout">
            <div class="col-md-6">
              <div class="review-panel">
              <h5 class="mb-4">Latest Reviews</h5>
              <div id="latestReviewsList" aria-live="polite">
                <p class="text-muted small">Loading reviews...</p>
              </div>
              </div>
            </div>
            <div class="col-md-6 review-form-column">
              <div class="review-panel review-form-panel">
              <h5 class="mb-4" id="reviewFormTitle">Add a Review</h5>
              <div id="reviewAlert" class="alert d-none" role="status" aria-live="polite"></div>
              <form id="reviewForm">
                <div class="form-group">
                  <label for="reviewName">Name *</label>
                  <input type="text" id="reviewName" name="name" class="form-control" autocomplete="name" maxlength="191" required>
                </div>
                <div class="form-group">
                  <label for="reviewEmail">Email *</label>
                  <input type="email" id="reviewEmail" name="email" class="form-control" autocomplete="email" maxlength="191" required>
                </div>
                <div class="form-group">
                  <label>Rating *</label>
                  <input type="hidden" name="rating" value="" required>
                  <div class="review-star-input" id="reviewStarInput" role="radiogroup" aria-label="Select rating">
                    @for($rating = 1; $rating <= 5; $rating++)
                      <button type="button" data-review-rating="{{ $rating }}" role="radio" aria-checked="false" aria-label="{{ $rating }} star rating">
                        <i class="bi bi-star"></i>
                      </button>
                    @endfor
                  </div>
                </div>
                <div class="form-group">
                  <label for="reviewMessage">Message *</label>
                  <textarea id="reviewMessage" name="message" class="form-control" rows="4" maxlength="1000" required></textarea>
                </div>
                <button type="submit" class="review-submit-button" id="reviewSubmitBtn">Submit Review</button>
              </form>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<section class="section" id="relatedProductsSection">
    <div class="container-fluid ">
      <div class="row">
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
          <div class="title_text_head">
            <h2 class="wow animated slideInUp" data-wow-delay=".4s" data-wow-duration="2s">
              <span id="relatedTitle">Related Products</span></h2>
            </div>
          </div>
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
            <div class="view_all">
              <a href="{{ route('customer.collection') }}" class="btn-box-item">View All</a>
            </div>
          </div>
        </div>
        
        <div class="row">
          <div class="col-md-12">
            <div class="owl-carousel owl_menu_six">
              <!-- Related products will be populated dynamically by product-detail.js -->
              <div class="item">
                <div class="cat_img_box">
                  <p class="text-center text-muted">Loading related products...</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </section>
@endsection
@push('scripts')
<script src="{{ asset('common/js/customer/product-detail.js') }}?v={{ time() }}"></script>
<!-- =====================================================
JS FILE CONNECTIONS FOR THIS CUSTOMER BLADE FILE
Page: Customer Vegetable View.blade
Blade File: resources/views/customer/vegetable-view.blade.php

1. JS File:
   public/common/js/api.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Shared customer API helper
   - Customer token and route helpers

2. JS File:
   public/common/js/customer/auth-check.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Customer auth/profile handling
   - Header auth text/profile link handling when the shared header is shown

3. JS Vendor Bundle:
   public/Mangalore-Stores/assets/js/*.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Shared customer UI plugins and legacy theme scripts

4. JS File:
   public/common/js/customer/product-detail.js
   Loaded from this blade file via @push('scripts')
   Purpose:
   - Dynamically loads product details from backend API
   - Populates gallery, thumbnails, price, description, details table
   - Handles Add to Cart, Buy Now, quantity controls
   - Renders related products carousel

5. JS File:
   public/common/js/customer/legacy-pages.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Legacy shared customer behavior for non-migrated customer pages
===================================================== -->
@endpush