@extends('admin.layouts.main')
@php
  $page_name = 'Product List';
@endphp
@section('style')
  <!-- Add any custom styles if needed -->
@endsection
@section('content')
  <div class="card">
    <div class="card-body">
      <div class="d-flex justify-content-between flex-wrap">
        <h4 class="mb-3">{{ $page_name }}</h4>
        <div class="mb-3">
          <a href="{{ route('admin.addproduct') }}" class="btn btn-primary">Create New Product</a>
        </div>
      </div>

      <!-- Search Form -->
      <form method="GET" action="{{ route('admin.productlist') }}" class="mb-3">
        <div class="input-group">
          <input type="text" name="search" value="{{ request('search') }}" class="form-control"
            placeholder="Search by name, category, brand...">
          <button type="submit" class="btn btn-outline-primary">Search</button>
          @if (request('search'))
            <a href="{{ route('admin.productlist') }}" class="btn btn-outline-secondary">Reset</a>
          @endif
        </div>
      </form>


      <div class="table-responsive">
        <table class="table table-bordered">
          <thead class="table-light">
            <tr>
              <th>#</th>
              <th>Product Name</th>
              <th>Product Image</th>
              <th>Sales Price</th>
              <th>Quantity</th>
              <th>Category</th>
              <th>Brand</th>
              <th>GST</th>
              <th>Customer Reviews</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            @forelse ($products as $product)
              <tr>
                <td>{{ $loop->iteration + ($products->currentPage() - 1) * $products->perPage() }}</td>
                <td>{{ $product->product_name }}</td>
                <td>
                  <img width="100px" height="100px" src="{{ url('images/products/' . $product->product_image_1) }}"
                    alt="Image">
                </td>
                <td>{{ $product->sales_price }}</td>
                <td>{{ $product->quantity }}</td>
                <td>{{ $product->category->name ?? 'N/A' }}</td>
                <td>{{ $product->brand->name ?? 'N/A' }}</td>
                <td>{{ $product->gst }}%</td>
                <td>
                  @php
                    $reviewCount = $product->reviews->count();
                    $avgRating = $reviewCount ? number_format($product->reviews->avg('rating'), 1) : 'N/A';
                  @endphp

                  @if ($reviewCount)
                    <span class="badge bg-success">{{ $avgRating }} ★</span><br>
                    <small>{{ $reviewCount }} review{{ $reviewCount > 1 ? 's' : '' }}</small>
                  @else
                    <small>No reviews yet</small>
                  @endif

                </td>
                <td>
                  <div class="btn-group">
                    <a href="{{ route('admin.productinfo', ['id' => enc($product->id)]) }}" class="btn btn-info btn-sm">
                      View
                    </a>

                    <button type="button" class="btn btn-info btn-sm dropdown-toggle dropdown-toggle-split"
                      data-bs-toggle="dropdown" aria-expanded="false">
                      <span class="visually-hidden">Toggle Dropdown</span>
                    </button>

                    <ul class="dropdown-menu">
                      <li>
                        <a href="{{ route('admin.productedit', ['id' => enc($product->id)]) }}" class="dropdown-item">
                          Edit
                        </a>
                      </li>
                      <li>
                        <button type="button" class="dropdown-item" data-bs-toggle="modal"
                          data-bs-target="#activateModal" data-id="{{ enc($product->id) }}"
                          data-name="{{ $product->product_name }}" data-status="{{ $product->active ? '0' : '1' }}">
                          {{ $product->active ? 'Deactivate' : 'Activate' }}
                        </button>
                      </li>
                      <li>
                        <a href="{{ route('admin.product.reviews', ['id' => enc($product->id)]) }}"
                          class="dropdown-item">
                          Reviews
                        </a>
                      </li>
                    </ul>
                  </div>
                </td>

              </tr>
            @empty
              <tr>
                <td colspan="9" class="text-center">No products found.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>


      <!-- Pagination -->

      {{ $products->links('pagination::bootstrap-5') }}


    </div>
  </div>

  <!-- Activate Product Modal -->
  <div class="modal fade" id="activateModal" tabindex="-1" aria-labelledby="activateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <form method="POST" action="{{ route('admin.product.toggle') }}">
        @csrf
        <input type="hidden" name="product_id" id="modal_product_id">
        <input type="hidden" name="status" id="modal_product_status">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="activateModalLabel">Update Product Status</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <span id="modal_status_message"></span>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" id="modal_submit_button">Yes, Proceed</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </div>
      </form>
    </div>
  </div>



  <script>
    const activateModal = document.getElementById('activateModal');
    activateModal.addEventListener('show.bs.modal', function(event) {
      const button = event.relatedTarget;
      const productId = button.getAttribute('data-id');
      const productName = button.getAttribute('data-name');
      const newStatus = button.getAttribute('data-status');

      document.getElementById('modal_product_id').value = productId;
      document.getElementById('modal_product_status').value = newStatus;

      const message = newStatus == "1" ?
        `Are you sure you want to <strong>Activate</strong> <strong>${productName}</strong>? It will be visible on the e-commerce site.` :
        `Are you sure you want to <strong>Deactivate</strong> <strong>${productName}</strong>? It will no longer be visible.`;

      const submitText = newStatus == "1" ? "Yes, Activate" : "Yes, Deactivate";

      document.getElementById('modal_status_message').innerHTML = message;
      document.getElementById('modal_submit_button').textContent = submitText;
    });
  </script>
@endsection