@extends('layouts/layoutMaster')

@section('title', __('locale.Product Details'))

@section('vendor-style')
  @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss', 'resources/assets/vendor/libs/animate-css/animate.scss', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss', 'resources/assets/vendor/libs/select2/select2.scss', 'resources/assets/vendor/libs/@form-validation/form-validation.scss', 'resources/assets/vendor/libs/swiper/swiper.scss', 'resources/assets/vendor/scss/pages/ui-carousel.scss'])
@endsection

@section('page-style')
  @vite('resources/assets/vendor/scss/pages/page-user-view.scss')
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/moment/moment.js', 'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.js', 'resources/assets/vendor/libs/cleave-zen/cleave-zen.js', 'resources/assets/vendor/libs/select2/select2.js', 'resources/assets/vendor/libs/@form-validation/popular.js', 'resources/assets/vendor/libs/@form-validation/bootstrap5.js', 'resources/assets/vendor/libs/@form-validation/auto-focus.js', 'resources/assets/vendor/libs/swiper/swiper.js'])
@endsection

@section('page-script')
  @vite(['resources/assets/js/ui-carousel.js'])

@endsection

@section('content')
  <div class="row">

    @php $currency=Helper::setting('currency_symbol', 'currency'); @endphp
    <!-- User Sidebar -->
    <div class="col-xl-4 col-lg-5 order-1 order-md-0">
      <!-- User Card -->
      <div class="card mb-6">
        <div class="card-body pt-12">
          <div class="user-avatar-section">
            <div class=" d-flex align-items-center flex-column">
              <img class="img-fluid rounded mb-4" src="{{ asset('storage/' . $product['images'][0]->file) }}" height="120"
                width="120" alt="Product avatar" />
              <div class="user-info text-center">
                <h5>{{ $product->title ?? '' }}</h5>
                <span class="badge bg-label-primary">{{ $product['category']?->name }}</span>
              </div>
            </div>
          </div>
          <div class="d-flex justify-content-around flex-wrap my-6 gap-0 gap-md-3 gap-lg-4">
            <div class="d-flex align-items-center me-5 gap-4">
              <div class="avatar">
                <div class="avatar-initial bg-label-primary rounded">
                  <i class="icon-base ti tabler-truck-delivery icon-lg"></i>
                </div>
              </div>
              <div>
                <h5 class="mb-0">{{ $product->in_stock == 1 ? 'In Stock' : 'Out of Stock' }}</h5>
                <span>{{ __('locale.Stock Status') }}</span>
              </div>
            </div>
            <div class="d-flex align-items-center gap-4">
              <div class="avatar">
                <div class="avatar-initial bg-label-primary rounded">
                  <i class="icon-base ti tabler-shopping-cart icon-lg"></i>
                </div>
              </div>
              <div>
                <h5 class="mb-0">{{ $product->orders->count() }} @if ($product->orders_quantity_sum > 0)
                    ({{ $product->orders_quantity_sum }})
                  @endif
                </h5>
                <span>{{ __('locale.Product') }} {{ __('locale.Orders') }}</span>
              </div>
            </div>
          </div>
          <h5 class="pb-4 border-bottom mb-4">{{ __('locale.Details') }}</h5>
          <div class="info-container">
            <ul class="list-unstyled mb-6">
              <li class="mb-2">
                <span class="h6">{{ __('locale.Title') }}:</span>
                <span>{{ $product->title }}</span>
              </li>
              <li class="mb-2">
                <span class="h6">{{ __('locale.Sku') }}:</span>
                <span>{{ $product->sku }}</span>
              </li>

              <li class="mb-2">
                <span class="h6">{{ __('locale.Price') }}:</span>
                <span>{{ $currency }}{{ $product->price }}</span>
              </li>
              <li class="mb-2">
                <span class="h6">{{ __('locale.Discounted Price') }}:</span>
                <span>{{ $currency }}{{ $product->discounted_price }}</span>
              </li>

              <li class="mb-2">
                <span class="h6">{{ __('locale.Status') }}:</span>
                <span>
                  @if ($product->status == 1)
                    <span class="badge bg-label-primary">{{ __('locale.Active') }}</span>
                  @else
                    <span class="badge bg-label-secondary">{{ __('locale.Inactive') }}</span>
                  @endif
                </span>
              </li>

              <li class="mb-2">
                <span class="h6">{{ __('locale.Tags') }}:</span>
                <span>
                  @php
                    $tagColors = [
                        'bg-label-primary',
                        'bg-label-secondary',
                        'bg-label-success',
                        'bg-label-danger',
                        'bg-label-warning',
                        'bg-label-info',
                        'bg-label-dark',
                    ];

                    $tags = isset($product->tags) ? explode(',', $product->tags) : [];
                  @endphp

                  <div class="demo-inline-spacing">
                    @foreach ($tags as $tag)
                      @php
                        $color = $tagColors[array_rand($tagColors)];
                      @endphp
                      <span class="badge rounded-pill {{ $color }}">{{ trim($tag) }}</span>
                    @endforeach
                  </div>

                </span>
              </li>

            </ul>
          </div>
        </div>
      </div>
      <!-- /User Card -->

    </div>
    <!--/ User Sidebar -->

    <!-- User Content -->
    <div class="col-xl-8 col-lg-7 order-0 order-md-1">
      <!-- User Pills -->
      <div class="nav-align-top">
        <ul class="nav nav-tabs nav-fill" role="tablist">

          <li class="nav-item">
            <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
              data-bs-target="#navs-justified-address" aria-controls="navs-justified-address" aria-selected="false">
              <span class="d-none d-sm-inline-flex align-items-center"><i
                  class="icon-base ti tabler-brand-producthunt icon-sm me-1_5"></i>{{ __('locale.Product Details') }}</span>
              <i class="icon-base ti tabler-brand-producthunt icon-sm d-sm-none"></i>
            </button>
          </li>

        </ul>
      </div>
      <!--/ User Pills -->


      <div class="card mb-6">
        <div class="tab-content">
          <div class="tab-pane fade show active" id="navs-justified-address" role="tabpanel">
            <p>{!! $product->description !!}</p>
            <div class="col-12">
              <h6 class="text-body-secondary mt-4">{{ __('locale.Product Images') }}</h6>
              <div id="swiper-gallery">
                <div class="swiper gallery-top">
                  <div class="swiper-wrapper">
                    @if (isset($product) && $product->images)
                      @foreach ($product->images as $image)
                        <div class="swiper-slide" style="background-image:url({{ asset('storage/' . $image->file) }})">
                        </div>
                      @endforeach
                    @endif
                  </div>
                  <!-- Add Arrows -->
                  <div class="swiper-button-next swiper-button-white"></div>
                  <div class="swiper-button-prev swiper-button-white"></div>
                </div>
                <div class="swiper gallery-thumbs">
                  <div class="swiper-wrapper">
                    @if (isset($product) && $product->images)
                      @foreach ($product->images as $image)
                        <div class="swiper-slide" style="background-image:url({{ asset('storage/' . $image->file) }})">
                        </div>
                      @endforeach
                    @endif
                  </div>

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


        </div>

      </div>
    </div>


  </div>
  <!--/ User Content -->
  </div>
  <!-- /Modal -->
@endsection