@extends('layouts.landing', ['title' => 'Fashion Store - Product Page'])

@section('content')
    <div class="modal fade" id="reviewForm" data-bs-backdrop="static" tabindex="-1" aria-labelledby="reviewFormLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <form class="modal-content needs-validation" novalidate>
                <div class="modal-header border-0">
                    <h5 class="modal-title" id="reviewFormLabel">Leave a review</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-3 pt-0">
                    <div class="mb-3">
                        <label for="review-name" class="form-label">Your name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="review-name" required>
                        <div class="invalid-feedback">Please enter your name!</div>
                        <small class="form-text">Will be displayed on the comment.</small>
                    </div>
                    <div class="mb-3">
                        <label for="review-email" class="form-label">Your email <span class="text-danger">*</span></label>
                        <input type="email" class="form-control" id="review-email" required>
                        <div class="invalid-feedback">Please provide a valid email address!</div>
                        <small class="form-text">Authentication only - we won't spam you.</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Rating <span class="text-danger">*</span></label>
                        <select class="form-select"
                            data-select='{
                "classNames": {
                  "containerInner": "form-select"
                },
                "placeholderValue": "Choose rating",
                "choices": [
                  {
                    "value": "",
                    "label": "Choose rating",
                    "placeholder": true
                  },
                  {
                    "value": "1",
                    "label": "<span class=\"visually-hidden\">1 star</span>",
                    "customProperties": {
                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i></span>",
                      "selected": "1 star"
                    }
                  },
                  {
                    "value": "2",
                    "label": "<span class=\"visually-hidden\">2 stars</span>",
                    "customProperties": {
                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
                      "selected": "2 stars"
                    }
                  },
                  {
                    "value": "3",
                    "label": "<span class=\"visually-hidden\">3 stars</span>",
                    "customProperties": {
                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
                      "selected": "3 stars"
                    }
                  },
                  {
                    "value": "4",
                    "label": "<span class=\"visually-hidden\">4 stars</span>",
                    "customProperties": {
                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
                      "selected": "4 stars"
                    }
                  },
                  {
                    "value": "5",
                    "label": "<span class=\"visually-hidden\">5 stars</span>",
                    "customProperties": {
                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
                      "selected": "5 stars"
                    }
                  }
                ]
              }'
                            data-select-template="true" required></select>
                        <div class="invalid-feedback">Please choose your rating!</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="review-text">Review <span class="text-danger">*</span></label>
                        <textarea class="form-control" rows="4" id="review-text" required></textarea>
                        <div class="invalid-feedback">Please write a review!</div>
                        <small class="form-text">Your review must be at least 50 characters.</small>
                    </div>
                    <div>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" id="yes" name="recommend" checked>
                            <label for="yes" class="form-check-label">Yes, I recommend</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" id="no" name="recommend">
                            <label for="no" class="form-check-label">No, I don't recommend</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer flex-nowrap gap-3 border-0 px-4">
                    <button type="reset" class="btn btn-secondary w-100 m-0" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-dark w-100 m-0">Submit review</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="sizeGuide" tabindex="-1" aria-labelledby="reviewFormLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header bg-body-tertiary border-0 py-2 ps-2 pe-4">
                    <ul class="nav nav-tabs flex-nowrap text-nowrap py-2" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active" href="#womens" id="womens-sizes" data-bs-toggle="tab" role="tab"
                                aria-controls="mens" aria-selected="true">Women's sizes</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" href="#mens" id="mens-sizes" data-bs-toggle="tab" role="tab"
                                aria-controls="womens" aria-selected="false" tabindex="-1">Men's sizes</a>
                        </li>
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="womens" role="tabpanel"
                            aria-labelledby="womens-sizes">
                            <div class="table-responsive">
                                <table class="table fs-sm text-center mb-0">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="align-middle">US<br>Sizes</th>
                                            <th scope="col" class="align-middle">Euro<br>Sizes</th>
                                            <th scope="col" class="align-middle">UK<br>Sizes</th>
                                            <th scope="col" class="align-middle">Inches</th>
                                            <th scope="col" class="align-middle">CM</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="fw-medium">4</td>
                                            <td>35</td>
                                            <td>2</td>
                                            <td>8.1875"</td>
                                            <td>20.8</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">4.5</td>
                                            <td>35</td>
                                            <td>2.5</td>
                                            <td>8.375"</td>
                                            <td>21.3</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">5</td>
                                            <td>35-36</td>
                                            <td>3</td>
                                            <td>8.5"</td>
                                            <td>21.6</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">5.5</td>
                                            <td>36</td>
                                            <td>3.5</td>
                                            <td>8.75"</td>
                                            <td>22.2</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">6</td>
                                            <td>36-37</td>
                                            <td>4</td>
                                            <td>8.875"</td>
                                            <td>22.5</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">6.5</td>
                                            <td>37</td>
                                            <td>4.5</td>
                                            <td>9.0625"</td>
                                            <td>23</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">7</td>
                                            <td>37-38</td>
                                            <td>5</td>
                                            <td>9.25"</td>
                                            <td>23.5</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">7.5</td>
                                            <td>38</td>
                                            <td>5.5</td>
                                            <td>9.375"</td>
                                            <td>23.8</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">8</td>
                                            <td>38-39</td>
                                            <td>6</td>
                                            <td>9.5"</td>
                                            <td>24.1</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">8.5</td>
                                            <td>39</td>
                                            <td>6.5</td>
                                            <td>9.6875"</td>
                                            <td>24.6</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">9</td>
                                            <td>39-40</td>
                                            <td>7</td>
                                            <td>9.875"</td>
                                            <td>25.1</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">9.5</td>
                                            <td>40</td>
                                            <td>7.5</td>
                                            <td>10"</td>
                                            <td>25.4</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">10</td>
                                            <td>40-41</td>
                                            <td>8</td>
                                            <td>10.1875"</td>
                                            <td>25.9</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">10.5</td>
                                            <td>41</td>
                                            <td>8.5</td>
                                            <td>10.3125"</td>
                                            <td>26.2</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">11</td>
                                            <td>41-42</td>
                                            <td>9</td>
                                            <td>10.5"</td>
                                            <td>26.7</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">11.5</td>
                                            <td>42</td>
                                            <td>9.5</td>
                                            <td>10.6875"</td>
                                            <td>27.1</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">12</td>
                                            <td>42-43</td>
                                            <td>10</td>
                                            <td>10.875"</td>
                                            <td>27.6</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="mens" role="tabpanel" aria-labelledby="mens-sizes">
                            <div class="table-responsive">
                                <table class="table fs-sm text-center mb-0">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="align-middle">US<br>Sizes</th>
                                            <th scope="col" class="align-middle">Euro<br>Sizes</th>
                                            <th scope="col" class="align-middle">UK<br>Sizes</th>
                                            <th scope="col" class="align-middle">Inches</th>
                                            <th scope="col" class="align-middle">CM</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="fw-medium">6</td>
                                            <td>39</td>
                                            <td>5.5</td>
                                            <td>9.25"</td>
                                            <td>23.5</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">6.5</td>
                                            <td>39</td>
                                            <td>6</td>
                                            <td>9.5"</td>
                                            <td>24.1</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">7</td>
                                            <td>40</td>
                                            <td>6.5</td>
                                            <td>9.625"</td>
                                            <td>24.4</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">7.5</td>
                                            <td>40-41</td>
                                            <td>7</td>
                                            <td>9.75"</td>
                                            <td>24.8</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">8</td>
                                            <td>41</td>
                                            <td>7.5</td>
                                            <td>9.9375"</td>
                                            <td>25.4</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">8.5</td>
                                            <td>41-42</td>
                                            <td>8</td>
                                            <td>10.125"</td>
                                            <td>25.7</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">9</td>
                                            <td>42</td>
                                            <td>8.5</td>
                                            <td>10.25"</td>
                                            <td>26</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">9.5</td>
                                            <td>42-43</td>
                                            <td>9</td>
                                            <td>10.4375"</td>
                                            <td>26.7</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">10</td>
                                            <td>43</td>
                                            <td>9.5</td>
                                            <td>10.5625"</td>
                                            <td>27</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">10.5</td>
                                            <td>43-44</td>
                                            <td>10</td>
                                            <td>10.75"</td>
                                            <td>27.3</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">11</td>
                                            <td>44</td>
                                            <td>10.5</td>
                                            <td>10.9375"</td>
                                            <td>27.9</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">11.5</td>
                                            <td>44-45</td>
                                            <td>11</td>
                                            <td>11.125"</td>
                                            <td>28.3</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">12</td>
                                            <td>45</td>
                                            <td>11.5</td>
                                            <td>11.25"</td>
                                            <td>28.6</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">13</td>
                                            <td>46</td>
                                            <td>12.5</td>
                                            <td>11.5625"</td>
                                            <td>29.4</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">14</td>
                                            <td>47</td>
                                            <td>13.5</td>
                                            <td>11.875"</td>
                                            <td>30.2</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">15</td>
                                            <td>48</td>
                                            <td>14.5</td>
                                            <td>12.1875"</td>
                                            <td>31</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">16</td>
                                            <td>49</td>
                                            <td>15.5</td>
                                            <td>12.5"</td>
                                            <td>31.8</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    

    <x-layout.header />

    <main class="content-wrapper">

        <!-- Breadcrumb -->
        <nav class="container pt-2 pt-xxl-3 my-3 my-md-4" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Product</a></li>
                <li class="breadcrumb-item active" aria-current="page">Detail</li>
            </ol>
        </nav>


        <!-- Product gallery and details -->
        <section class="container">
            <div class="row">

                <!-- Gallery -->
                <div class="col-md-6 pb-4 pb-md-0 mb-2 mb-sm-3 mb-md-0">
                    
                    <div class="position-relative">

                        @if ($product->display_discount_price > 0)
                        <span
                            class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-3 mt-sm-4 ms-3 ms-sm-4">Sale</span>
                       @endif
                            <button type="button"
                            class="btn btn-icon btn-secondary animate-pulse fs-lg bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-2 mt-sm-3 me-2 me-sm-3"
                            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
                            data-bs-title="Add to Wishlist" aria-label="Add to Wishlist">
                            <i class="ci-heart animate-target"></i>
                        </button>
                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden mb-3 mb-sm-4 mb-md-3 mb-lg-4"
                            href="{{ $product->image_url ?? '' }}" data-glightbox data-gallery="product-gallery">
                            <i
                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                            <div class="ratio hover-effect-target bg-body-tertiary rounded"
                                style="--cz-aspect-ratio: calc(706 / 636 * 100%)">
                                <img src="{{ $product->image_url ?? '' }}" class="product-main-image" alt="Image">
                            </div>
                        </a>
                    </div>
                    <div class="collapse d-md-block" id="morePictures">

                     
                        <div class="row row-cols-2 g-3 g-sm-4 g-md-3 g-lg-4 pb-3 pb-sm-4 pb-md-0">

                               @foreach ($product->image_urls as $key => $url)

                               @if ($key == 0)
                                 @continue
                               @endif
                                    <div class="col">
                                <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden"
                                    href="{{ $url }}" data-glightbox
                                    data-gallery="product-gallery">
                                    <i
                                        class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                                    <div class="ratio hover-effect-target bg-body-tertiary rounded"
                                        style="--cz-aspect-ratio: calc(342 / 306 * 100%)">
                                        <img src="{{ $url }}" alt="Image">
                                    </div>
                                </a>
                            </div>
                        @endforeach

                    
                        </div>
                    </div>
                    <button type="button" class="btn btn-lg btn-outline-secondary w-100 collapsed d-md-none"
                        data-bs-toggle="collapse" data-bs-target="#morePictures"
                        data-label-collapsed="Show more pictures" data-label-expanded="Show less pictures"
                        aria-expanded="false" aria-controls="morePictures" aria-label="Show / hide pictures">
                        <i class="collapse-toggle-icon ci-chevron-down fs-lg ms-2 me-n2"></i>
                    </button>
                </div>


                <!-- Product details and options -->
                <div class="col-md-6">
                    <div class="ps-md-4 ps-xl-5">

                        <!-- Reviews -->
                        {{-- <a class="d-none d-md-flex align-items-center gap-2 text-decoration-none mb-3" href="#reviews">
                            <div class="d-flex gap-1 fs-sm">
                                <i class="ci-star-filled text-warning"></i>
                                <i class="ci-star-filled text-warning"></i>
                                <i class="ci-star-filled text-warning"></i>
                                <i class="ci-star-filled text-warning"></i>
                                <i class="ci-star text-body-tertiary opacity-75"></i>
                            </div>
                            <span class="text-body-tertiary fs-sm">23 reviews</span>
                        </a> --}}

                        <!-- Title -->
                        <h1 class="h3">{{ $product->name }}</h1>

                        <!-- Description -->
                        <p class="fs-sm mb-0">{!! nl2br(Str::limit($product->description, 500)) !!}</p>
                        <div class="collapse" id="moreDescription">
                            <div class="fs-sm pt-3">
                                @if(strlen($product->description) > 500)
                                <p>{!! nl2br(substr($product->description, 500)) !!}</p>
                                @endif
                            </div>
                        </div>

                        <!-- Price -->
                        @if(strlen($product->description) > 500)
                        <a class="d-inline-block fs-sm fw-medium text-dark-emphasis collapsed mt-1"
                            href="#moreDescription" data-bs-toggle="collapse" aria-expanded="false"
                            aria-controls="moreDescription" data-label-collapsed="Read more"
                            data-label-expanded="Show less" aria-label="Show / hide description"></a>
                        @endif
                        <div class="h4 d-flex align-items-center my-4">
                            <span class="display_price">Rp {{ number_format($product->display_price, 0, ',', '.') }}</span>
                            
                            

                            <del class="display_discount_price fs-sm fw-normal text-body-tertiary ms-2" style="display: {{ $product->display_discount_price ? 'inline' : 'none' }};">{{ $product->display_discount_price ? '  Rp ' . number_format($product->display_discount_price, 0, ',', '.') : '' }}</del>
                        </div>

                        <!-- Color options -->
                        <div class="mb-4">
                            <label class="form-label fw-semibold pb-1 mb-2">Varian: <span class="text-body fw-normal"
                                    id="variantOption">{{ $product->variants->first()->description ?? '' }}</span></label>
                            <div class="d-flex flex-wrap gap-2" data-binded-label="#variantOption">

                                @foreach ($product->variants as $key => $variant)
                                     <input type="radio" class="btn-check" name="colors" id="variant-id-{{ $variant->id }}" {{ $key == 0 ? 'checked' : '' }}>
                                    <label for="variant-id-{{ $variant->id }}" class="btn btn-image p-0" data-label="{{ $variant->description }}"
                                        data-price="Rp {{ number_format($product->display_price, 0, ",",".") }}"
                                        data-discount-price="{{ $product->display_discount_price ? 'Rp ' . number_format($product->display_discount_price, 0, ',', '.') : '' }}"
                                        data-image="{{ $variant->image_url ?? $product->image_url }}"
                                        >
                                        <img src="{{ $variant->image_url ?? $product->image_url }}" width="56"
                                            alt="{{ $variant->name }}">
                                        <span class="visually-hidden">{{ $variant->name }}</span>
                                    </label>
                                @endforeach

                              
                            </div>
                        </div>

                        <!-- Size select -->
                        {{-- <div class="mb-3">
                            <div class="d-flex align-items-center justify-content-between mb-1">
                                <label class="form-label fw-semibold mb-0">Size</label>
                                <div class="nav">
                                    <a class="nav-link animate-underline fw-normal px-0" href="#sizeGuide"
                                        data-bs-toggle="modal">
                                        <i class="ci-ruler fs-lg me-2"></i>
                                        <span class="animate-target">Size guide</span>
                                    </a>
                                </div>
                            </div>
                            <select class="form-select form-select-lg"
                                data-select='{
                  "classNames": {
                    "containerInner": ["form-select", "form-select-lg"]
                  }
                }'
                                aria-label="Material select">
                                <option value="">Choose a size</option>
                                <option value="xs">6-8 (XS)</option>
                                <option value="s">8-10 (S)</option>
                                <option value="m">10-12 (M)</option>
                                <option value="l">12-14 (L)</option>
                                <option value="xl">14-16 (XL)</option>
                            </select>
                        </div> --}}

                        <!-- Count input + Add to cart button -->
                        <div class="d-flex gap-3 pb-3 pb-lg-4 mb-3">
                            <div class="count-input flex-shrink-0">
                                <button type="button" class="btn btn-icon btn-lg" data-decrement
                                    aria-label="Decrement quantity">
                                    <i class="ci-minus"></i>
                                </button>
                                <input type="number" class="form-control form-control-lg" min="1"
                                    value="1" readonly>
                                <button type="button" class="btn btn-icon btn-lg" data-increment
                                    aria-label="Increment quantity">
                                    <i class="ci-plus"></i>
                                </button>
                            </div>
                            <button type="button" class="btn btn-lg btn-dark w-100">Add to cart</button>
                        </div>

                        <!-- Info list -->
                        {{-- <ul class="list-unstyled gap-3 pb-3 pb-lg-4 mb-3">
                            <li class="d-flex flex-wrap fs-sm">
                                <span class="d-flex align-items-center fw-medium text-dark-emphasis me-2">
                                    <i class="ci-clock fs-base me-2"></i>
                                    Estimated delivery:
                                </span>
                                15 - 27 Mar, 2024
                            </li>
                            <li class="d-flex flex-wrap fs-sm">
                                <span class="d-flex align-items-center fw-medium text-dark-emphasis me-2">
                                    <i class="ci-delivery fs-base me-2"></i>
                                    Free shipping &amp; returns:
                                </span>
                                On all orders over $100.00
                            </li>
                        </ul> --}}

                        <!-- Stock status -->
                        {{-- <div class="d-flex flex-wrap justify-content-between fs-sm mb-3">
                            <span class="fw-medium text-dark-emphasis me-2">🔥 Hurry up! The sale is coming to an
                                end</span>
                            <span><span class="fw-medium text-dark-emphasis">6</span> items in stock!</span>
                        </div>
                        <div class="progress" role="progressbar" aria-label="Left in stock" aria-valuenow="25"
                            aria-valuemin="0" aria-valuemax="100" style="height: 4px">
                            <div class="progress-bar rounded-pill" style="width: 25%"></div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </section>


        <!-- Sticky product preview + Add to cart CTA -->
        <section class="sticky-product-banner sticky-top" data-sticky-element>
            <div class="sticky-product-banner-inner pt-5">
                <div class="navbar container flex-nowrap align-items-center bg-body pt-4 pt-lg-5 mt-lg-n2">
                    <div class="d-flex align-items-center min-w-0 ms-lg-2 me-3">
                        <div class="ratio ratio-1x1 flex-shrink-0" style="width: 50px">
                            <img src="{{ $product->image_url ?? '' }}" class="product-main-image"  alt="Image">
                        </div>
                        <h4 class="h6 fw-medium d-none d-lg-block ps-3 mb-0 variantOption">{{ $product->name }}</h4>
                        <div class="w-100 min-w-0 d-lg-none ps-2">
                            <h4 class="fs-sm fw-medium text-truncate mb-1 variantOption">{{ $product->name }}</h4>
                            <div class="h6 mb-0">$126.50 <del class="fs-xs fw-normal text-body-tertiary">$156.00</del>
                            </div>
                        </div>
                    </div>
                    <div class="h4 d-none d-lg-block mb-0 ms-auto me-4 display_price">Rp {{ number_format($product->display_price,0,",",".") }} <del
                            class="fs-sm fw-normal text-body-tertiary display_discount_price" style="display: {{ $product->display_discount_price ? 'inline' : 'none' }};">Rp {{ number_format($product->display_discount_price,0,",",".") }}</del></div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-icon btn-secondary animate-pulse"
                            aria-label="Add to Wishlist">
                            <i class="ci-heart fs-base animate-target"></i>
                        </button>
                        <button type="button" class="btn btn-dark ms-auto d-none d-md-inline-flex px-4">Add to
                            cart</button>
                        <button type="button" class="btn btn-icon btn-dark animate-slide-end ms-auto d-md-none"
                            aria-label="Add to Cart">
                            <i class="ci-shopping-cart fs-base animate-target"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>


        <!-- Product details tabs -->
        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">

            <!-- Nav tabs -->
            <ul class="nav nav-underline flex-nowrap border-bottom" role="tablist">
                <li class="nav-item me-md-1" role="presentation">
                    <button type="button" class="nav-link active" id="description-tab" data-bs-toggle="tab"
                        data-bs-target="#description-tab-pane" role="tab" aria-controls="description-tab-pane"
                        aria-selected="true">
                        {{ __('product_fashion.description') }}
                    </button>
                </li>
                {{-- <li class="nav-item me-md-1" role="presentation">
                    <button type="button" class="nav-link" id="washing-tab" data-bs-toggle="tab"
                        data-bs-target="#washing-tab-pane" role="tab" aria-controls="washing-tab-pane"
                        aria-selected="false">
                        Washing<span class="d-none d-md-inline">&nbsp;instructions</span>
                    </button>
                </li> --}}
                <li class="nav-item me-md-1" role="presentation">
                    <button type="button" class="nav-link" id="delivery-tab" data-bs-toggle="tab"
                        data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
                        aria-selected="false">
                        {{ __('product_fashion.delivery') }}<span class="d-none d-md-inline">&nbsp;{{ __('product_fashion.and_returns') }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link" id="reviews-tab" data-bs-toggle="tab"
                        data-bs-target="#reviews-tab-pane" role="tab" aria-controls="reviews-tab-pane"
                        aria-selected="false">
                        {{ __('product_fashion.review') }}<span class="d-none d-md-inline">&nbsp;(23)</span>
                    </button>
                </li>
            </ul>

            <div class="tab-content pt-4 mt-sm-1 mt-md-3">

                <!-- Description tab -->
                <div class="tab-pane fade show active" id="description-tab-pane" role="tabpanel"
                    aria-labelledby="description-tab">
                    <div class="row">
                        <div class="col-lg-6 fs-sm">
                            Pastikan apakah stock tersedia dengan terlebih dahulu KIRIM PESAN - TANYA kepada kami,
                            <br>
                            <br>
                            Segera lakukan pembayaran saat melakukan checkout produk agar system order bisa langusung terima dan proses kemas,
                            <br>
                            <br>
- Layanan Pengiriman "Instant" tersedia (Prioritas) kami upayakan proses langsung,
<br>
- Layanan Pengiriman "Sameday" Maksimal order masuk pukul 15.00 Wib karna maksimal Request pick up yang di tentukan oleh tokopedia pukul 16.00 Wib,.
<br>
- Layanan pengiriman "Regullar - Yes - Cargo" Kami pastikan produk terkirim status berubah terkirim pada Sore menjelang petan karna kami hanya tersedia 1x pengiriman ke jasa pengiriman dalam 1 hari
<br>
<br>
Pesanan masuk pukul 18.00 Wib ke atas kemungkinan akan kami proses kirim dan ikut pengiriman ke jasa pengiriman ke esokan harinya,.
                        </div>
                        {{-- <div class="col-lg-6 col-xl-5 offset-xl-1">
                            <div class="row row-cols-2 g-4 my-0 my-lg-n2">
                                <div class="col">
                                    <div class="py-md-1 py-lg-2 pe-sm-2">
                                        <i class="ci-feather fs-3 text-body-emphasis mb-2 mb-md-3"></i>
                                        <h6 class="fs-sm mb-2">Lightweight</h6>
                                        <p class="fs-sm mb-0">Designed with lightweight European fabrics, perfect for life
                                            on the go.</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="py-md-1 py-lg-2 ps-sm-2">
                                        <i class="ci-hanger fs-3 text-body-emphasis mb-2 mb-md-3"></i>
                                        <h6 class="fs-sm mb-2">Perfect fit</h6>
                                        <p class="fs-sm mb-0">Our clothing is designed to fit any body type, find your
                                            perfect look!</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="py-md-1 py-lg-2 pe-sm-2">
                                        <i class="ci-delivery-2 fs-3 text-body-emphasis mb-2 mb-md-3"></i>
                                        <h6 class="fs-sm mb-2">Free delivery</h6>
                                        <p class="fs-sm mb-0">Get free door-to-door delivery for all orders over $250.</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="py-md-1 py-lg-2 ps-sm-2">
                                        <i class="ci-leaf fs-3 text-body-emphasis mb-2 mb-md-3"></i>
                                        <h6 class="fs-sm mb-2">Sustainability</h6>
                                        <p class="fs-sm mb-0">We are proud to offer a Lifetime Guarantee on all products.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>

                <!-- Washing instructions tab -->
                <div class="tab-pane fade fs-sm" id="washing-tab-pane" role="tabpanel"
                    aria-labelledby="washing-tab">
                    <p>Following below washing instructions can help prolong the life of your denim skirt and keep it
                        looking its best for longer.</p>
                    <div class="row row-cols-1 row-cols-md-2">
                        <div class="col mb-3 mb-md-0">
                            <dl class="pe-lg-2 pe-xl-3 mb-0">
                                <dt>Machine wash cold</dt>
                                <dd>Turn the denim midi skirt inside out before placing it in the washing machine. Use cold
                                    water to help preserve the color and fabric integrity.</dd>
                                <dt>Gentle cycle</dt>
                                <dd>Select the gentle or delicate cycle on your washing machine to prevent excessive
                                    agitation, which can cause unnecessary wear and tear on the denim.</dd>
                                <dt>Mild detergent</dt>
                                <dd>Use a mild detergent specifically formulated for denim or delicate fabrics. Avoid using
                                    bleach or harsh chemicals, as they can damage the denim fibers.</dd>
                                <dt>Avoid overloading</dt>
                                <dd class="mb-0">Do not overcrowd the washing machine with too many garments. This can
                                    lead to inadequate cleaning and may cause friction that damages the denim skirt.</dd>
                            </dl>
                        </div>
                        <div class="col">
                            <dl class="ps-lg-2 ps-xl-3 mb-0">
                                <dt>Wash separately</dt>
                                <dd>Wash the denim midi skirt separately from items with zippers, buttons, or other sharp
                                    accessories that could snag or damage the fabric.</dd>
                                <dt>Skip fabric softener</dt>
                                <dd>Avoid using fabric softener, as it can leave a residue on the denim and reduce its
                                    natural stiffness, which is characteristic of denim garments.</dd>
                                <dt>Air dry or tumble dry low</dt>
                                <dd>After washing, reshape the skirt and either lay it flat to air dry or tumble dry on a
                                    low heat setting. Avoid high heat, as it can shrink or distort the denim.</dd>
                                <dt>Ironing</dt>
                                <dd class="mb-0">If necessary, iron the denim midi skirt inside out using a low to
                                    medium heat setting. Avoid ironing directly on any embellishments or pockets to prevent
                                    damage.</dd>
                            </dl>
                        </div>
                    </div>
                </div>

                <!-- Delivery and returns tab -->
                <div class="tab-pane fade fs-sm" id="delivery-tab-pane" role="tabpanel"
                    aria-labelledby="delivery-tab">
                    <div class="row row-cols-1 row-cols-md-2">
                        <div class="col mb-3 mb-md-0">
                            <div class="pe-lg-2 pe-xl-3">
                                <h6>Pengiriman</h6>
                                <p>Kami bekerja sama dengan berbagai penyedia jasa pengiriman terpercaya untuk memastikan proses pengiriman pesanan berjalan dengan aman dan efisien. 
                                    <br>
                                    <br>
                                    Pelanggan diberikan kebebasan untuk memilih layanan pengiriman yang paling sesuai dengan kebutuhan, baik dari segi kecepatan maupun biaya. 
                                    <br>
                                    <br>
                                    Estimasi waktu pengiriman dapat berbeda-beda tergantung pada jenis layanan yang dipilih, lokasi tujuan, serta kebijakan dan kondisi operasional dari masing-masing penyedia jasa pengiriman. 
                                    <br>
                                    <br>
                                    Perlu diperhatikan bahwa keterlambatan yang disebabkan oleh faktor di luar kendali kami merupakan tanggung jawab penyedia jasa terkait. 
                                    <br>
                                    <br>
                                    Meskipun demikian, kami akan senantiasa membantu memantau status pengiriman guna memastikan pesanan sampai ke tangan pelanggan dengan baik.</p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="ps-lg-2 ps-xl-3">
                                <h6>Return Barang</h6>
                                <p>Kami memberikan kesempatan kepada pelanggan untuk mengajukan permohonan retur atas produk yang diterima apabila terdapat ketidaksesuaian atau kendala tertentu. Proses pengajuan retur dapat dilakukan dengan menghubungi customer service resmi kami melalui WhatsApp. 
                                    <br>
                                    <br>
                                    Untuk keperluan verifikasi, pelanggan diwajibkan mengirimkan informasi detail transaksi pembelian, foto produk yang diterima, serta bukti video unboxing yang jelas dan tidak terputus. 
                                    <br>
                                    <br>
                                    Permohonan retur akan ditinjau sesuai dengan ketentuan dan kebijakan yang berlaku. 
                                    <br>
                                    <br>
                                    Setelah proses verifikasi selesai dan disetujui, kami akan memberikan informasi lebih lanjut terkait tahapan pengembalian barang maupun solusi yang dapat diberikan kepada pelanggan.
                                    <br>
                                    <br>
                                    Kami berkomitmen untuk menyelesaikan setiap permohonan retur dengan cepat dan profesional sesuai dengan standar pelayanan kami.
                                    <br>
                                    <br>
                                    Untuk informasi lebih lanjut, pelanggan dapat menghubungi customer service kami melalui WhatsApp.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Reviews tab -->
                <div class="tab-pane fade" id="reviews-tab-pane" role="tabpanel" aria-labelledby="reviews-tab">

                    <!-- Heading + Add review button -->
                    <div class="d-sm-flex align-items-center justify-content-between border-bottom pb-2 pb-sm-3">
                        <div class="mb-3 me-sm-3">
                            <h2 class="h5 pb-2 mb-1">Customer reviews</h2>
                            <div class="d-flex align-items-center text-body-secondary fs-sm">
                                <div class="d-flex gap-1 me-2">
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star text-body-tertiary opacity-75"></i>
                                </div>
                                Based on 23 reviews
                            </div>
                        </div>
                        <button type="button" class="btn btn-outline-dark mb-3" data-bs-toggle="modal"
                            data-bs-target="#reviewForm">Leave a review</button>
                    </div>

                    <!-- Review -->
                    <div class="border-bottom py-4">
                        <div class="row py-sm-2">
                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                                <div class="d-flex h6 mb-2">
                                    Rafael Marquez
                                    <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
                                </div>
                                <div class="fs-sm mb-2 mb-md-3">June 25, 2024</div>
                                <div class="d-flex gap-1 fs-sm">
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                </div>
                            </div>
                            <div class="col-md-8 col-lg-9">
                                <p class="mb-md-4">Absolutely love this chair! It's exactly what I was looking for to
                                    complete my Scandinavian-themed living room. The wooden legs add a touch of warmth and
                                    the design is timeless. Comfortable and sturdy, couldn't be happier with my purchase!
                                </p>
                                <div class="d-sm-flex justify-content-between">
                                    <div
                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
                                        Yes, I recommend this product
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
                                        <button type="button" class="btn btn-sm btn-secondary">
                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                                            0
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review -->
                    <div class="border-bottom py-4">
                        <div class="row py-sm-2">
                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                                <div class="d-flex h6 mb-2">
                                    Bessie Cooper
                                    <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
                                </div>
                                <div class="fs-sm mb-2 mb-md-3">April 8, 2024</div>
                                <div class="d-flex gap-1 fs-sm">
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star text-body-tertiary opacity-75"></i>
                                    <i class="ci-star text-body-tertiary opacity-75"></i>
                                </div>
                            </div>
                            <div class="col-md-8 col-lg-9">
                                <p class="mb-md-4">While the design of the chair is nice and it does add a touch of retro
                                    vibe to my space, I found the quality to be lacking. After just a few weeks of use, one
                                    of the legs started to wobble, and the seat isn't as comfortable as I had hoped.
                                    Disappointed with the durability. Additionally, the assembly process was a bit
                                    frustrating as some of the screws didn't align properly with the holes, requiring extra
                                    effort to secure them in place. Overall, while it looks good, I expected better quality
                                    for the price.</p>
                                <div class="d-sm-flex justify-content-between">
                                    <div
                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
                                        <i class="ci-close fs-base me-1" style="margin-top: .125rem"></i>
                                        No, I don't recommend this product
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
                                        <button type="button" class="btn btn-sm btn-secondary">
                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                                            3
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review -->
                    <div class="border-bottom py-4">
                        <div class="row py-sm-2">
                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                                <div class="d-flex h6 mb-2">Savannah Nguyen</div>
                                <div class="fs-sm mb-2 mb-md-3">March 30, 2024</div>
                                <div class="d-flex gap-1 fs-sm">
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star text-body-tertiary opacity-75"></i>
                                </div>
                            </div>
                            <div class="col-md-8 col-lg-9">
                                <p class="mb-md-4">Great addition to our dining room! The chair looks fantastic and is
                                    quite comfortable for short sits. Assembly was a breeze, and the quality seems decent
                                    for the price. Overall, satisfied with the purchase.</p>
                                <div class="d-sm-flex justify-content-between">
                                    <div
                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
                                        Yes, I recommend this product
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
                                        <button type="button" class="btn btn-sm btn-secondary">
                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                                            7
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review -->
                    <div class="border-bottom py-4">
                        <div class="row py-sm-2">
                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                                <div class="d-flex h6 mb-2">Daniel Adams</div>
                                <div class="fs-sm mb-2 mb-md-3">March 16, 2024</div>
                                <div class="d-flex gap-1 fs-sm">
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                </div>
                            </div>
                            <div class="col-md-8 col-lg-9">
                                <p class="mb-md-4">Couldn't be happier with this chair! It's not only stylish but also
                                    incredibly comfortable. The size is perfect for our space, and the wooden legs feel
                                    sturdy. Definitely recommend it to anyone looking for a chic and functional seating
                                    option.</p>
                                <div class="d-sm-flex justify-content-between">
                                    <div
                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
                                        Yes, I recommend this product
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
                                        <button type="button" class="btn btn-sm btn-secondary">
                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                                            14
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review -->
                    <div class="border-bottom py-4">
                        <div class="row py-sm-2">
                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                                <div class="d-flex h6 mb-2">Kristin Watson</div>
                                <div class="fs-sm mb-2 mb-md-3">February 7, 2024</div>
                                <div class="d-flex gap-1 fs-sm">
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star-filled text-warning"></i>
                                    <i class="ci-star text-body-tertiary opacity-75"></i>
                                </div>
                            </div>
                            <div class="col-md-8 col-lg-9">
                                <p class="mb-md-4">The chair is nice, but it's not the most comfortable for extended
                                    periods of sitting. The wooden legs give it a nice aesthetic, but they seem a bit
                                    fragile. It's a decent chair for occasional use, but I wouldn't recommend it for daily
                                    use or long sitting sessions.</p>
                                <div class="d-sm-flex justify-content-between">
                                    <div
                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
                                        Yes, I recommend this product
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
                                        <button type="button" class="btn btn-sm btn-secondary">
                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                                            9
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pagination -->
                    <nav class="mt-3 pt-2 pt-md-3" aria-label="Reviews pagination">
                        <ul class="pagination">
                            <li class="page-item active" aria-current="page">
                                <span class="page-link">
                                    1
                                    <span class="visually-hidden">(current)</span>
                                </span>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#!">2</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#!">3</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#!">4</a>
                            </li>
                            <li class="page-item">
                                <span class="page-link pe-none">...</span>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#!">6</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </section>


        <!-- Complete look (carousel) -->
        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
            <div class="d-flex align-items-center justify-content-between pt-1 pt-lg-0 pb-3 mb-2 mb-sm-3">
                <h2 class="mb-0 me-3">Complete your look</h2>

                <!-- Slider prev/next buttons -->
                <div class="d-flex gap-2">
                    <button type="button"
                        class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
                        id="lookPrev" aria-label="Prev">
                        <i class="ci-chevron-left fs-lg animate-target"></i>
                    </button>
                    <button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
                        id="lookNext" aria-label="Next">
                        <i class="ci-chevron-right fs-lg animate-target"></i>
                    </button>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 order-md-2 mb-4 mb-md-0">

                    <!-- Slider -->
                    <div class="swiper"
                        data-swiper='{
              "slidesPerView": 1,
              "spaceBetween": 40,
              "loop": true,
              "navigation": {
                "prevEl": "#lookPrev",
                "nextEl": "#lookNext"
              }
            }'>
                        <div class="swiper-wrapper">

                            @foreach ($complete_look_products as $key => $value)
                                <div class="swiper-slide">
                                    <div class="row row-cols-2">

                                        @foreach ($value as $key2 => $value2)
                                            <div class="col">
                                                <x-home.product-card :product="$value2" />
                                               
                                            </div>
                                        @endforeach

                                    </div>
                                </div>
                                    
                            @endforeach

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

                <!-- Product image -->
                <div class="col-md-6 order-md-1">
                    <img src="{{ $product->image_url ?? '' }}" class="d-block bg-body-tertiary rounded"
                        alt="Image">
                </div>
            </div>
        </section>


        <x-shop.viewed-products :except_ids="[$product->id]" />


        <!-- Instagram feed -->
        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
            <div class="text-center pt-1 pb-2 pb-md-3">
                <h2 class="pb-2 mb-1">
                    <span class="animate-underline">
                        <a class="animate-target text-dark-emphasis text-decoration-none" href="#!">#AsiaGolf</a>
                    </span>
                </h2>
                <p>Find more inspiration on our Instagram</p>
            </div>
            <div class="overflow-x-auto pb-3 mb-n3" data-simplebar>
                <div class="d-flex gap-2 gap-md-3 gap-lg-4" style="min-width: 700px">
                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
                        href="#!">
                        <span
                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                        <i
                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                        <div class="hover-effect-target ratio ratio-1x1">
                            <img src="/img/instagram/01.jpg" alt="Instagram image">
                        </div>
                    </a>
                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
                        href="#!">
                        <span
                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                        <i
                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                        <div class="hover-effect-target ratio ratio-1x1">
                            <img src="/img/instagram/02.jpg" alt="Instagram image">
                        </div>
                    </a>
                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
                        href="#!">
                        <span
                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                        <i
                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                        <div class="hover-effect-target ratio ratio-1x1">
                            <img src="/img/instagram/03.jpg" alt="Instagram image">
                        </div>
                    </a>
                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
                        href="#!">
                        <span
                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                        <i
                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                        <div class="hover-effect-target ratio ratio-1x1">
                            <img src="/img/instagram/04.jpg" alt="Instagram image">
                        </div>
                    </a>
                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
                        href="#!">
                        <span
                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                        <i
                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                        <div class="hover-effect-target ratio ratio-1x1">
                            <img src="/img/instagram/05.jpg" alt="Instagram image">
                        </div>
                    </a>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer pt-5 pb-4">
        <div class="container pt-sm-2 pt-md-3 pt-lg-4">
            <div class="row pb-5 mb-lg-3">

                <!-- Columns with links that are turned into accordion on screens < 500px wide (sm breakpoint) -->
                <div class="col-md-8 col-xl-7 pb-2 pb-md-0 mb-4 mb-md-0 mt-n3 mt-sm-0">
                    <div class="accordion" id="footerLinks">
                        <div class="row row-cols-1 row-cols-sm-3">
                            <div class="accordion-item col border-0">
                                <h6 class="accordion-header" id="categoriesHeading">
                                    <span class="text-dark-emphasis d-none d-sm-block">Categories</span>
                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
                                        data-bs-toggle="collapse" data-bs-target="#categoriesLinks"
                                        aria-expanded="false" aria-controls="categoriesLinks">Categories</button>
                                </h6>
                                <div class="accordion-collapse collapse d-sm-block" id="categoriesLinks"
                                    aria-labelledby="categoriesHeading" data-bs-parent="#footerLinks">
                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">For women</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">For men</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Home clothes</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Accessories</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Sale</a>
                                        </li>
                                    </ul>
                                </div>
                                <hr class="d-sm-none my-0">
                            </div>
                            <div class="accordion-item col border-0">
                                <h6 class="accordion-header" id="accountHeading">
                                    <span class="text-dark-emphasis d-none d-sm-block">Account</span>
                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
                                        data-bs-toggle="collapse" data-bs-target="#accountLinks" aria-expanded="false"
                                        aria-controls="accountLinks">Account</button>
                                </h6>
                                <div class="accordion-collapse collapse d-sm-block" id="accountLinks"
                                    aria-labelledby="accountHeading" data-bs-parent="#footerLinks">
                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Your account</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Shipping &amp; policies</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Refunds &amp; replacements</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Order tracking</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Delivery info</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Taxes &amp; fees</a>
                                        </li>
                                    </ul>
                                </div>
                                <hr class="d-sm-none my-0">
                            </div>
                            <div class="accordion-item col border-0">
                                <h6 class="accordion-header" id="customerHeading">
                                    <span class="text-dark-emphasis d-none d-sm-block">Customer service</span>
                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
                                        data-bs-toggle="collapse" data-bs-target="#customerLinks"
                                        aria-expanded="false" aria-controls="customerLinks">Customer service</button>
                                </h6>
                                <div class="accordion-collapse collapse d-sm-block" id="customerLinks"
                                    aria-labelledby="customerHeading" data-bs-parent="#footerLinks">
                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Payment methods</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Money back guarantee</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Refunds &amp; replacements</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Product returns</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Support center</a>
                                        </li>
                                        <li class="d-flex w-100 pt-1">
                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                href="#!">Shipping</a>
                                        </li>
                                    </ul>
                                </div>
                                <hr class="d-sm-none my-0">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Subscription -->
                <div class="col-md-4 offset-xl-1">
                    <h6 class="mb-4">Join us and stay up to date</h6>
                    <form class="needs-validation" novalidate>
                        <div class="form-check form-check-inline">
                            <input type="checkbox" class="form-check-input" id="check-woman" checked>
                            <label for="check-woman" class="form-check-label">Woman</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="checkbox" class="form-check-input" id="check-man">
                            <label for="check-man" class="form-check-label">Man</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="checkbox" class="form-check-input" id="check-sale">
                            <label for="check-sale" class="form-check-label">Sale</label>
                        </div>
                        <div class="position-relative mt-3">
                            <input type="email" class="form-control form-control-lg bg-image-none text-start"
                                placeholder="Enter email" aria-label="Your email address" required>
                            <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
                            <button type="submit"
                                class="btn btn-icon btn-ghost fs-xl btn-secondary border-0 position-absolute top-0 end-0 mt-1 me-1"
                                aria-label="Submit your email address">
                                <i class="ci-arrow-up-right"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Social account links -->
            <div class="d-flex justify-content-center justify-content-lg-start gap-2 mt-n2 mt-md-0">
                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                    title="YouTube" aria-label="Follow us on YouTube">
                    <i class="ci-youtube"></i>
                </a>
                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                    title="Facebook" aria-label="Follow us on Facebook">
                    <i class="ci-facebook"></i>
                </a>
                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                    title="Instagram" aria-label="Follow us on Instagram">
                    <i class="ci-instagram"></i>
                </a>
                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                    title="Telegram" aria-label="Follow us on Telegram">
                    <i class="ci-telegram"></i>
                </a>
                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                    title="Pinterest" aria-label="Follow us on Pinterest">
                    <i class="ci-pinterest"></i>
                </a>
            </div>

            <!-- Copyright + Payment methods -->
            <div class="d-lg-flex align-items-center border-top pt-4 mt-3">
                <div class="d-flex gap-2 gap-sm-3 justify-content-center ms-lg-auto mb-3 mb-md-4 mb-lg-0 order-lg-2">
                    <div>
                        <img src="/img/payment-methods/visa-light-mode.svg" class="d-none-dark" alt="Visa">
                        <img src="/img/payment-methods/visa-dark-mode.svg" class="d-none d-block-dark" alt="Visa">
                    </div>
                    <div>
                        <img src="/img/payment-methods/paypal-light-mode.svg" class="d-none-dark" alt="PayPal">
                        <img src="/img/payment-methods/paypal-dark-mode.svg" class="d-none d-block-dark"
                            alt="PayPal">
                    </div>
                    <div>
                        <img src="/img/payment-methods/mastercard.svg" alt="Mastercard">
                    </div>
                    <div>
                        <img src="/img/payment-methods/google-pay-light-mode.svg" class="d-none-dark"
                            alt="Google Pay">
                        <img src="/img/payment-methods/google-pay-dark-mode.svg" class="d-none d-block-dark"
                            alt="Google Pay">
                    </div>
                    <div>
                        <img src="/img/payment-methods/apple-pay-light-mode.svg" class="d-none-dark" alt="Apple Pay">
                        <img src="/img/payment-methods/apple-pay-dark-mode.svg" class="d-none d-block-dark"
                            alt="Apple Pay">
                    </div>
                </div>
                <div class="d-md-flex justify-content-center order-lg-1">
                    <ul class="nav justify-content-center gap-4 order-md-3 mb-4 mb-md-0">
                        <li class="animate-underline">
                            <a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Privacy</a>
                        </li>
                        <li class="animate-underline">
                            <a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Affiliates</a>
                        </li>
                        <li class="animate-underline">
                            <a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Terms of use</a>
                        </li>
                    </ul>
                    <div class="vr text-body-secondary opacity-25 mx-4 d-none d-md-inline-block order-md-2"></div>
                    <p class="fs-xs text-center text-lg-start mb-0 order-md-1">
                        &copy; All rights reserved. Made by <span class="animate-underline"><a
                                class="animate-target text-dark-emphasis text-decoration-none"
                                href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes
                                Studio</a></span>
                    </p>
                </div>
            </div>
        </div>
    </footer>

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('input[name="colors"]');
    radios.forEach(radio => {
        radio.addEventListener('change', function() {
            const label = document.querySelector(`label[for="${this.id}"]`);
            const price = label.getAttribute('data-price');
            const discountPrice = label.getAttribute('data-discount-price');
            const image = label.getAttribute('data-image');
            const labelText = label.getAttribute('data-label');

            
            document.querySelector('.display_price').textContent = price;
            const discountSpan = document.querySelector('.display_discount_price');
            if (discountPrice) {
                discountSpan.textContent = '  ' + discountPrice;
                discountSpan.style.display = 'inline';
            } else {
                discountSpan.style.display = 'none';
            }
            document.querySelector('.product-main-image').src = image;
            document.querySelector('.variantOption').textContent = labelText;
        });
    });
    // Trigger change for the initially checked radio
    const checkedRadio = document.querySelector('input[name="colors"]:checked');
    if (checkedRadio) {
        checkedRadio.dispatchEvent(new Event('change'));
    }
});
</script>
@endsection
