@extends('admin.layouts.main')
@section('style')
@endsection
@section('content')
  <div class="card">
    <div class="card-body">
      <h2>Microsite Products</h2>
      {{-- Link Products Form --}}
      <form action="{{ route('admin.microsite.linkProduct') }}" method="POST" class="mb-4">
        @csrf
        <input type="hidden" name="microsite_id" value="{{ enc($microsite->id) }}">

        <label for="products" class="form-label">Select Products to Link</label>
        <div class="form-check mb-2">
          <input type="checkbox" id="select_all" class="form-check-input">
          <label for="select_all" class="form-check-label">Select All</label>
        </div>

        <div id="parentDiv" style="position: relative;">
          <select id="products" name="product_ids[]" class="form-select" multiple="multiple">
            @foreach ($availableProducts as $product)
              <option value="{{ $product->id }}">
                {{ $product->product_name }} (ID: {{ $product->id }})
              </option>
            @endforeach
          </select>
        </div>

        <button type="submit" class="btn btn-primary mt-2">Link Selected Products</button>
      </form>

      {{-- Search form --}}
      <form method="GET" action="{{ route('admin.microsite.products', ['id' => enc($microsite->id)]) }}"
        class="mb-3 d-flex">
        <div>
          <input type="text" class="form-control" name="search" placeholder="Search products..."
            value="{{ request('search') }}">
        </div>
        <div class="mx-2">
          <button type="submit" class="btn btn-secondary">Search</button>
        </div>
      </form>
      {{-- Linked Products List --}}
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>Product Name</th>
            <th>Category</th>
            <th>Brand</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse($products as $product)
            <tr>
              <td>{{ $product->id }}</td>
              <td>{{ $product->product_name }}</td>
              <td>{{ $product->category->name }}</td>
              <td>{{ $product->brand->name }}</td>
              <td>
                <form action="{{ route('admin.microsite.unlinkProduct') }}" method="POST"
                  onsubmit="return confirm('Unlink this product?');" class="d-inline">
                  @csrf
                  <input type="hidden" name="product_id" value="{{ $product->id }}">
                  <input type="hidden" name="microsite_id" value="{{ enc($microsite->id) }}">
                  <button class="btn btn-danger btn-sm">Unlink</button>
                </form>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="5">No products linked.</td>
            </tr>
          @endforelse
        </tbody>
      </table>

      {{-- Pagination --}}
      {{ $products->links() }}
    </div>
  </div>
@endsection
@section('script')
  <script>
    document.getElementById('select_all').addEventListener('change', function(e) {
      const checked = e.target.checked;
      const options = document.getElementById('products').options;
      for (let i = 0; i < options.length; i++) {
        options[i].selected = checked;
      }
    });
    $(document).ready(function() {
      $('#products').select2({
        placeholder: "Select products",
        allowClear: true,
        width: '100%',
        closeOnSelect: false,
        dropdownParent: $('#parentDiv') // <-- specify the parent container here
      });
    });
  </script>
@endsection