@extends('crm.master')

@section('title', 'Edit Product')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex align-items-center justify-content-between">
        <div>
          <h4 class="mb-1">Edit Product</h4>
          <p class="text-muted mb-0">{{ $product->name }} &mdash; <code>{{ $product->sku }}</code></p>
        </div>
        <a href="{{ route('crm.products.index') }}" class="btn btn-label-secondary">
          <i class="icon-base ti tabler-arrow-left me-2 icon-14px"></i>
          Back to Products
        </a>
      </div>
    </div>
  </div>

  <!-- Alerts -->
  @include('crm.components.alerts')

  <form action="{{ route('crm.products.update', $product->hash_id) }}" method="POST" enctype="multipart/form-data" id="productForm">
    @csrf
    @method('PUT')
    @php
      $activeTab = old('active_tab', request('tab', 'details'));
    @endphp
    <input type="hidden" name="active_tab" id="activeTabInput" value="{{ $activeTab }}">

    <!-- Tab Stepper Nav -->
    <div class="card mb-4">
      <div class="card-body py-3">
        <ul class="nav nav-pills product-tab-nav d-flex gap-2" id="productTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link {{ $activeTab === 'details' ? 'active' : '' }} d-flex align-items-center gap-2 px-4" id="tab-details-btn"
              data-bs-toggle="pill" data-bs-target="#tab-details" type="button" role="tab">
              <span class="tab-dot bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" style="width:26px;height:26px;font-size:13px;">1</span>
              <span class="d-none d-md-inline">Details</span>
            </button>
          </li>
          <li class="nav-item d-flex align-items-center"><span class="text-muted">›</span></li>
          <li class="nav-item" role="presentation">
            <button class="nav-link {{ $activeTab === 'inventory' ? 'active' : '' }} d-flex align-items-center gap-2 px-4" id="tab-inventory-btn"
              data-bs-toggle="pill" data-bs-target="#tab-inventory" type="button" role="tab">
              <span class="tab-dot bg-secondary text-white rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" style="width:26px;height:26px;font-size:13px;">2</span>
              <span class="d-none d-md-inline">Inventory</span>
            </button>
          </li>
          <li class="nav-item d-flex align-items-center"><span class="text-muted">›</span></li>
          <li class="nav-item" role="presentation">
            <button class="nav-link {{ $activeTab === 'availability' ? 'active' : '' }} d-flex align-items-center gap-2 px-4" id="tab-availability-btn"
              data-bs-toggle="pill" data-bs-target="#tab-availability" type="button" role="tab">
              <span class="tab-dot bg-secondary text-white rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" style="width:26px;height:26px;font-size:13px;">3</span>
              <span class="d-none d-md-inline">Availability</span>
            </button>
          </li>
          <li class="nav-item d-flex align-items-center"><span class="text-muted">›</span></li>
          <li class="nav-item" role="presentation">
            <button class="nav-link {{ $activeTab === 'pricing' ? 'active' : '' }} d-flex align-items-center gap-2 px-4" id="tab-pricing-btn"
              data-bs-toggle="pill" data-bs-target="#tab-pricing" type="button" role="tab">
              <span class="tab-dot bg-secondary text-white rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" style="width:26px;height:26px;font-size:13px;">4</span>
              <span class="d-none d-md-inline">Pricing</span>
            </button>
          </li>
        </ul>
      </div>
    </div>

    <!-- Tab Content -->
    <div class="tab-content" id="productTabContent">

      <!-- ===== TAB 1: DETAILS ===== -->
      <div class="tab-pane fade {{ $activeTab === 'details' ? 'show active' : '' }}" id="tab-details" role="tabpanel">
        <div class="row g-4">

          <!-- Left column -->
          <div class="col-lg-8">

            <!-- Basic Info Card -->
            <div class="card mb-4">
              <div class="card-header">
                <h5 class="card-title mb-0">Basic Information</h5>
              </div>
              <div class="card-body">

                <div class="mb-4">
                  <label class="form-label" for="name">Product Name <span class="text-danger">*</span></label>
                  <input type="text" class="form-control @error('name') is-invalid @enderror"
                    id="name" name="name" maxlength="100"
                    value="{{ old('name', $product->name) }}" required>
                  @error('name') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>

                <div class="mb-4">
                  <label class="form-label" for="sku">SKU <span class="text-danger">*</span></label>
                  <input type="text" class="form-control @error('sku') is-invalid @enderror"
                    id="sku" name="sku" maxlength="50"
                    value="{{ old('sku', $product->sku) }}" required>
                  @error('sku') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>

                <div class="mb-4">
                  <label class="form-label" for="category_id">Category <span class="text-danger">*</span></label>
                  <select class="form-select @error('category_id') is-invalid @enderror"
                    id="category_id" name="category_id" required>
                    <option value="">Select a category...</option>
                    @foreach($categories as $cat)
                      <option value="{{ $cat->id }}" {{ old('category_id', $product->category_id) == $cat->id ? 'selected' : '' }}>
                        {{ $cat->name }}
                      </option>
                    @endforeach
                  </select>
                  @error('category_id') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>

                <div class="mb-4">
                  <label class="form-label">Tags</label>
                  <div class="d-flex flex-wrap gap-2">
                    @php $selectedTags = old('tags', $product->tags->pluck('id')->toArray()); @endphp
                    @foreach($tags as $tag)
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox"
                          name="tags[]" id="tag_{{ $tag->id }}" value="{{ $tag->id }}"
                          {{ in_array($tag->id, $selectedTags) ? 'checked' : '' }}>
                        <label class="form-check-label" for="tag_{{ $tag->id }}">{{ $tag->name }}</label>
                      </div>
                    @endforeach
                    @if($tags->isEmpty())
                      <small class="text-muted">No tags available.</small>
                    @endif
                  </div>
                </div>

              </div>
            </div>

            <!-- Existing Photos -->
            @if($product->photos->count() > 0)
            <div class="card mb-4">
              <div class="card-header">
                <h5 class="card-title mb-0">Current Photos</h5>
              </div>
              <div class="card-body">
                <div class="row g-2">
                  @foreach($product->photos as $idx => $photo)
                    <div class="col-4 col-md-3 col-lg-2">
                      <div class="position-relative">
                        <img src="{{ asset($photo->path) }}" class="img-fluid rounded" style="height:100px;width:100%;object-fit:cover;">
                        @if($idx === 0)
                          <span class="badge bg-primary position-absolute top-0 start-0 m-1" style="font-size:10px;">Main</span>
                        @endif
                        <button type="submit"
                          form="photo-delete-{{ $photo->id }}"
                          class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 p-0"
                          style="width:22px;height:22px;line-height:1;"
                          onclick="return confirm('Remove this photo?')"
                          title="Remove photo">
                          <i class="ti tabler-x" style="font-size:11px;"></i>
                        </button>
                      </div>
                    </div>
                  @endforeach
                </div>
                <small class="text-muted mt-2 d-block">{{ $product->photos->count() }}/5 photos uploaded. Add new photos below.</small>
              </div>
            </div>
            @endif

            <!-- Add New Photos -->
            @if($product->photos->count() < 5)
            <div class="card mb-4">
              <div class="card-header">
                <h5 class="card-title mb-0">{{ $product->photos->count() > 0 ? 'Add More Photos' : 'Product Photos' }}</h5>
                <p class="card-subtitle text-muted mt-1 mb-0 small">
                  Add up to {{ 5 - $product->photos->count() }} more photo(s).
                  {{ $product->photos->count() === 0 ? 'The first image will be the main image.' : '' }}
                </p>
              </div>
              <div class="card-body">
                <div id="photoUploadArea" class="border border-2 border-dashed rounded-3 p-4 text-center mb-3"
                  style="cursor:pointer;border-color:#dee2e6!important;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;">
                  <i class="ti tabler-photo-plus text-muted mb-2" style="font-size:2.5rem;"></i>
                  <p class="mb-1 text-muted">Click or drag images here to upload</p>
                  <small class="text-muted">Max 2MB each. JPG, PNG, GIF, WebP</small>
                  <input type="file" name="photos[]" id="photosInput" multiple accept="image/*" class="d-none">
                </div>
                <div id="photoPreviewGrid" class="row g-2"></div>
              </div>
            </div>
            @endif

            <!-- Description -->
            <div class="card mb-4">
              <div class="card-header">
                <h5 class="card-title mb-0">Description</h5>
              </div>
              <div class="card-body">
                <textarea class="form-control @error('description') is-invalid @enderror"
                  id="description" name="description" rows="8">{{ old('description', $product->description) }}</textarea>
                @error('description') <span class="invalid-feedback">{{ $message }}</span> @enderror
              </div>
            </div>

          </div>

          <!-- Right column -->
          <div class="col-lg-4">

            <div class="card mb-4">
              <div class="card-header">
                <h5 class="card-title mb-0">Status</h5>
              </div>
              <div class="card-body">
                <select class="form-select @error('status') is-invalid @enderror" name="status" id="status">
                  <option value="draft"    {{ old('status', $product->status) === 'draft'    ? 'selected' : '' }}>Draft</option>
                  <option value="active"   {{ old('status', $product->status) === 'active'   ? 'selected' : '' }}>Active</option>
                  <option value="inactive" {{ old('status', $product->status) === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
                @error('status') <span class="invalid-feedback">{{ $message }}</span> @enderror
              </div>
            </div>

            <div class="card mb-4">
              <div class="card-header">
                <h5 class="card-title mb-0">Additional Info</h5>
              </div>
              <div class="card-body">
                <div class="mb-4">
                  <label class="form-label" for="video_link">Video Link</label>
                  <input type="url" class="form-control @error('video_link') is-invalid @enderror"
                    id="video_link" name="video_link"
                    value="{{ old('video_link', $product->video_link) }}" placeholder="https://youtube.com/...">
                  @error('video_link') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>
                <div class="mb-3">
                  <label class="form-label" for="sort_order">Sort Order</label>
                  <input type="number" class="form-control @error('sort_order') is-invalid @enderror"
                    id="sort_order" name="sort_order" min="0"
                    value="{{ old('sort_order', $product->sort_order) }}">
                  @error('sort_order') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>
              </div>
            </div>

          </div>
        </div>

        <div class="d-flex justify-content-between mt-2 mb-4">
          <a href="{{ route('crm.products.index') }}" class="btn btn-label-secondary">Cancel</a>
          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-success" onclick="setActiveTabAndSubmit('details')">
              <i class="ti tabler-device-floppy me-1"></i> Save Details
            </button>
            <button type="button" class="btn btn-primary" onclick="goToTab('tab-inventory-btn')">
              Next: Inventory <i class="ti tabler-arrow-right ms-1"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- ===== TAB 2: INVENTORY ===== -->
      <div class="tab-pane fade {{ $activeTab === 'inventory' ? 'show active' : '' }}" id="tab-inventory" role="tabpanel">
        <div class="row g-4">
          <div class="col-lg-8">

            <div class="card mb-4">
              <div class="card-header">
                <h5 class="card-title mb-0">Inventory</h5>
              </div>
              <div class="card-body">

                <div class="mb-4">
                  <label class="form-label" for="inventory_type">Inventory Type <span class="text-danger">*</span></label>
                  <select class="form-select @error('inventory_type') is-invalid @enderror"
                    id="inventory_type" name="inventory_type">
                    <option value="simple" {{ old('inventory_type', $product->inventory_type) === 'simple' ? 'selected' : '' }}>Simple (fixed quantity)</option>
                    <option value="assets" {{ old('inventory_type', $product->inventory_type) === 'assets' ? 'selected' : '' }}>Assets (linked to asset pool)</option>
                    <option value="unlimited" {{ old('inventory_type', $product->inventory_type) === 'unlimited' ? 'selected' : '' }}>Unlimited (inventory is unlimited)</option>
                  </select>
                  @error('inventory_type') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>

                <div id="simpleInventoryFields">
                  <div class="mb-3">
                    <label class="form-label" for="inventory_amount">Inventory Amount</label>
                    <input type="number" class="form-control @error('inventory_amount') is-invalid @enderror"
                      id="inventory_amount" name="inventory_amount" min="0"
                      value="{{ old('inventory_amount', $product->inventory_amount) }}">
                    @error('inventory_amount') <span class="invalid-feedback">{{ $message }}</span> @enderror
                  </div>
                </div>

                <div id="assetInventoryFields" style="display:none;">
                  <label class="form-label fw-semibold">
                    Assets <span class="text-danger">*</span>
                    <i class="ti tabler-info-circle ms-1 text-muted" title="Inventory is dynamic based on the number of resources available"></i>
                  </label>
                  <p class="text-muted small mb-3" id="assetPoolDescription">
                    Assets are made up of resources you can use across products. Add your assets for this product.
                  </p>

                  {{-- Category Picker --}}
                  <div class="mb-3" id="assetCategoryPickerRow">
                    <select id="assetCategoryPicker" class="form-select @error('asset_category_id') is-invalid @enderror">
                      <option value="">— Select an asset category —</option>
                      @foreach($assetCategories as $ac)
                        <option value="{{ $ac->id }}" data-name="{{ $ac->name }}"
                          {{ old('asset_category_id', $product->asset_category_id) == $ac->id ? 'selected' : '' }}>
                          {{ $ac->name }}
                        </option>
                      @endforeach
                    </select>
                    @error('asset_category_id') <span class="text-danger small">{{ $message }}</span> @enderror
                    <div class="mt-1"><small class="text-muted"><a href="{{ route('crm.assets.index') }}" target="_blank">Manage Assets</a></small></div>
                  </div>

                  {{-- Pool Block --}}
                  <div id="assetPoolBlock" style="display:none;" class="border rounded mb-3">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 px-3 py-2 border-bottom bg-light rounded-top">
                      <span id="poolCategoryName" class="fw-semibold text-dark"></span>
                      <div class="d-flex align-items-center gap-2 flex-wrap">
                        <span class="small"><strong>Assign assets by total</strong></span>
                        <i class="ti tabler-info-circle text-muted small" title="Controls how inventory availability is calculated"></i>
                        <select class="form-select form-select-sm" id="allotmentTypeSelect" name="allotment_type" style="width:130px;">
                          <option value="quantity" {{ old('allotment_type', $product->allotment_type) === 'quantity' ? 'selected' : '' }}>Quantity</option>
                          <option value="capacity" {{ old('allotment_type', $product->allotment_type) === 'capacity' ? 'selected' : '' }}>Capacity</option>
                        </select>
                        <span class="fw-semibold text-muted small">of</span>
                        <input type="text" class="form-control form-control-sm text-center" id="allotmentTotalDisplay" style="width:60px;" readonly value="0">
                        <button type="button" class="btn btn-sm btn-icon btn-flat-secondary" id="removePoolBtn" title="Remove category">
                          <i class="ti tabler-trash"></i>
                        </button>
                      </div>
                    </div>

                    <div class="px-3 pt-2">
                      <div class="row align-items-end g-0 mb-1 pb-1 border-bottom">
                        <div class="col-5"></div>
                        <div class="col-2 text-center">
                          <div class="fw-semibold small">Quantity</div>
                          <div class="text-muted" style="font-size:11px;">total no. of assets</div>
                        </div>
                        <div class="col-2 text-center">
                          <div class="fw-semibold small">Capacity</div>
                          <div class="text-muted" style="font-size:11px;">per asset</div>
                        </div>
                        <div class="col-3 text-center">
                          <div class="fw-semibold small">Total</div>
                          <div class="text-muted" style="font-size:11px;">Quantity × Capacity</div>
                        </div>
                      </div>

                      <div id="assetRowsList"></div>

                      <div class="row g-0 py-2 border-top" id="assetTotalRow" style="display:none;">
                        <div class="col-5"><strong>Total Quantity</strong></div>
                        <div class="col-2 text-center fw-semibold" id="totalQtyDisplay">0</div>
                      </div>
                    </div>

                    <div class="p-3 border-top">
                      <div class="position-relative">
                        <div class="form-control d-flex flex-wrap gap-1 align-items-center" id="assetPickerTrigger"
                             style="cursor:text;min-height:38px;padding:5px 10px;">
                          <span class="text-muted" id="assetPickerPlaceholder">Select asset(s)</span>
                          <input type="text" id="assetSearchBox" class="border-0 p-0 flex-grow-1"
                                 style="outline:none;min-width:80px;background:transparent;" autocomplete="off">
                          <i class="ti tabler-search text-muted small ms-auto"></i>
                        </div>
                        <div id="assetDropdownPanel" class="border rounded shadow-sm bg-white position-absolute w-100 mt-1"
                             style="display:none;z-index:1050;max-height:220px;overflow-y:auto;">
                          <div class="p-2 border-bottom">
                            <a href="{{ route('crm.assets.index') }}" target="_blank" id="createAssetLink"
                               class="d-flex align-items-center gap-1 small text-primary text-decoration-none py-1">
                              <i class="ti tabler-plus"></i>
                              <span id="createAssetLinkText">Create asset</span>
                            </a>
                          </div>
                          <div id="assetOptionsList" class="py-1"></div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <input type="hidden" name="asset_category_id" id="hiddenAssetCategoryId" value="{{ old('asset_category_id', $product->asset_category_id) }}">
                  <div id="hiddenAssetIds">
                    @foreach($selectedAssets as $sa)
                      <input type="hidden" name="asset_ids[]" value="{{ $sa->id }}">
                    @endforeach
                  </div>
                </div>

              </div>
            </div>

          </div>
        </div>

        <div class="d-flex justify-content-between mt-2 mb-4">
          <button type="button" class="btn btn-label-secondary" onclick="goToTab('tab-details-btn')">
            <i class="ti tabler-arrow-left me-1"></i> Previous
          </button>
          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-success" onclick="setActiveTabAndSubmit('inventory')">
              <i class="ti tabler-device-floppy me-1"></i> Save Inventory
            </button>
            <button type="button" class="btn btn-primary" onclick="goToTab('tab-availability-btn')">
              Next: Availability <i class="ti tabler-arrow-right ms-1"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- ===== TAB 3: AVAILABILITY ===== -->
      <div class="tab-pane fade {{ $activeTab === 'availability' ? 'show active' : '' }}" id="tab-availability" role="tabpanel">
        @php $avail = $product->availability->first(); @endphp
        <div class="row g-4">
          <div class="col-lg-8">
            <div class="card mb-4">
              <div class="card-header">
                <h5 class="card-title mb-0">Availability Schedule</h5>
              </div>
              <div class="card-body">

                <div class="mb-4">
                  <label class="form-label" for="avail_event_name">
                    Availability Name <span id="eventNameCounter" class="text-muted float-end small">{{ strlen(old('availability.event_name', $avail->event_name ?? '')) }}/150</span>
                  </label>
                  <input type="text" class="form-control @error('availability.event_name') is-invalid @enderror"
                    id="avail_event_name" name="availability[event_name]" maxlength="150"
                    value="{{ old('availability.event_name', $avail->event_name ?? '') }}">
                  @error('availability.event_name') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>

                <div class="row mb-4">
                  <div class="col-md-6">
                    <label class="form-label" for="avail_start_date">Start Date</label>
                    <input type="date" class="form-control @error('availability.start_date') is-invalid @enderror"
                      id="avail_start_date" name="availability[start_date]"
                      value="{{ old('availability.start_date', $avail ? $avail->start_date?->format('Y-m-d') : '') }}">
                    @error('availability.start_date') <span class="invalid-feedback">{{ $message }}</span> @enderror
                  </div>
                  <div class="col-md-6">
                    <label class="form-label" for="avail_end_date">End Date <small class="text-muted">(optional)</small></label>
                    <input type="date" class="form-control @error('availability.end_date') is-invalid @enderror"
                      id="avail_end_date" name="availability[end_date]"
                      value="{{ old('availability.end_date', $avail ? $avail->end_date?->format('Y-m-d') : '') }}">
                    @error('availability.end_date') <span class="invalid-feedback">{{ $message }}</span> @enderror
                  </div>
                </div>

                <div class="mb-4">
                  <label class="form-label d-block">Days of Week</label>
                  <div class="d-flex gap-2 flex-wrap">
                    @php
                      $daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
                      $dayValues  = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
                      $savedDays  = $avail ? ($avail->days_of_week ?? $dayValues) : $dayValues;
                      $oldDays    = old('availability.days_of_week', $savedDays);
                    @endphp
                    @foreach($daysOfWeek as $i => $day)
                      <div>
                        <input class="btn-check" type="checkbox"
                          name="availability[days_of_week][]"
                          id="dow_{{ $dayValues[$i] }}"
                          value="{{ $dayValues[$i] }}"
                          {{ in_array($dayValues[$i], $oldDays) ? 'checked' : '' }}
                          autocomplete="off">
                        <label class="btn btn-outline-primary" for="dow_{{ $dayValues[$i] }}">{{ $day }}</label>
                      </div>
                    @endforeach
                  </div>
                </div>

                @php
                  $toMinutes = function ($value, $unit) {
                    if ($value === null || $value === '') {
                      return 0;
                    }

                    return match ($unit) {
                      'days' => (int) $value * 24 * 60,
                      'hours' => (int) $value * 60,
                      default => (int) $value,
                    };
                  };

                  $minDurationMinutes = old('availability.min_duration_hours') !== null || old('availability.min_duration_minutes') !== null
                    ? null
                    : $toMinutes($avail?->min_duration_value, $avail?->min_duration_unit);
                  $maxDurationMinutes = old('availability.max_duration_hours') !== null || old('availability.max_duration_minutes') !== null
                    ? null
                    : $toMinutes($avail?->max_duration_value, $avail?->max_duration_unit);
                  $bookingWindowMinutes = old('availability.booking_window_hours') !== null || old('availability.booking_window_minutes') !== null
                    ? null
                    : $toMinutes($avail?->booking_window_value, $avail?->booking_window_unit);
                  $cutoffWindowMinutes = old('availability.cutoff_window_hours') !== null || old('availability.cutoff_window_minutes') !== null
                    ? null
                    : $toMinutes($avail?->cutoff_window_value, $avail?->cutoff_window_unit);
                  $bookingRulesEnabled = old('availability.booking_rules_enabled', $avail?->booking_rules_enabled ? '1' : '');
                @endphp

                <div class="form-check form-switch mb-3">
                  <input class="form-check-input" type="checkbox" role="switch"
                    id="bookingRulesEnabled"
                    name="availability[booking_rules_enabled]"
                    value="1"
                    {{ $bookingRulesEnabled ? 'checked' : '' }}>
                  <label class="form-check-label fw-semibold" for="bookingRulesEnabled">
                    Apply rules to this event
                  </label>
                </div>

                <div id="bookingRulesPanel" class="border rounded-3 p-4 bg-light" style="display: none;">
                  <h6 class="mb-3 text-muted text-uppercase small fw-semibold">Booking Rules</h6>
                  <p class="text-muted small mb-3">Use hours and minutes. Leave both fields at 0 to skip a rule.</p>

                  <div class="row mb-3 align-items-center">
                    <div class="col-sm-4"><label class="form-label mb-0">Min Duration</label></div>
                    <div class="col-sm-8">
                      <div class="input-group">
                        <input type="number" class="form-control" name="availability[min_duration_hours]"
                          min="0" value="{{ old('availability.min_duration_hours', $minDurationMinutes !== null ? intdiv($minDurationMinutes, 60) : 0) }}" placeholder="Hours">
                        <span class="input-group-text">h</span>
                        <input type="number" class="form-control" name="availability[min_duration_minutes]"
                          min="0" max="59" value="{{ old('availability.min_duration_minutes', $minDurationMinutes !== null ? $minDurationMinutes % 60 : 0) }}" placeholder="Minutes">
                        <span class="input-group-text">m</span>
                      </div>
                    </div>
                  </div>

                  <div class="row mb-3 align-items-center">
                    <div class="col-sm-4"><label class="form-label mb-0">Max Duration</label></div>
                    <div class="col-sm-8">
                      <div class="input-group">
                        <input type="number" class="form-control" name="availability[max_duration_hours]"
                          min="0" value="{{ old('availability.max_duration_hours', $maxDurationMinutes !== null ? intdiv($maxDurationMinutes, 60) : 0) }}" placeholder="Hours">
                        <span class="input-group-text">h</span>
                        <input type="number" class="form-control" name="availability[max_duration_minutes]"
                          min="0" max="59" value="{{ old('availability.max_duration_minutes', $maxDurationMinutes !== null ? $maxDurationMinutes % 60 : 0) }}" placeholder="Minutes">
                        <span class="input-group-text">m</span>
                      </div>
                    </div>
                  </div>

                  <div class="row mb-3 align-items-center">
                    <div class="col-sm-4">
                      <label class="form-label mb-0">Booking Window</label>
                      <small class="d-block text-muted">How far in advance</small>
                    </div>
                    <div class="col-sm-8">
                      <div class="input-group">
                        <input type="number" class="form-control" name="availability[booking_window_hours]"
                          min="0" value="{{ old('availability.booking_window_hours', $bookingWindowMinutes !== null ? intdiv($bookingWindowMinutes, 60) : 0) }}" placeholder="Hours">
                        <span class="input-group-text">h</span>
                        <input type="number" class="form-control" name="availability[booking_window_minutes]"
                          min="0" max="59" value="{{ old('availability.booking_window_minutes', $bookingWindowMinutes !== null ? $bookingWindowMinutes % 60 : 0) }}" placeholder="Minutes">
                        <span class="input-group-text">m</span>
                      </div>
                    </div>
                  </div>

                  <div class="row align-items-center">
                    <div class="col-sm-4">
                      <label class="form-label mb-0">Cutoff Window</label>
                      <small class="d-block text-muted">Last-minute cutoff</small>
                    </div>
                    <div class="col-sm-8">
                      <div class="input-group">
                        <input type="number" class="form-control" name="availability[cutoff_window_hours]"
                          min="0" value="{{ old('availability.cutoff_window_hours', $cutoffWindowMinutes !== null ? intdiv($cutoffWindowMinutes, 60) : 0) }}" placeholder="Hours">
                        <span class="input-group-text">h</span>
                        <input type="number" class="form-control" name="availability[cutoff_window_minutes]"
                          min="0" max="59" value="{{ old('availability.cutoff_window_minutes', $cutoffWindowMinutes !== null ? $cutoffWindowMinutes % 60 : 0) }}" placeholder="Minutes">
                        <span class="input-group-text">m</span>
                      </div>
                    </div>
                  </div>
                </div>

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

        <div class="d-flex justify-content-between mt-2 mb-4">
          <button type="button" class="btn btn-label-secondary" onclick="goToTab('tab-inventory-btn')">
            <i class="ti tabler-arrow-left me-1"></i> Previous
          </button>
          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-success" onclick="setActiveTabAndSubmit('availability')">
              <i class="ti tabler-device-floppy me-1"></i> Save Availability
            </button>
            <button type="button" class="btn btn-primary" onclick="goToTab('tab-pricing-btn')">
              Next: Pricing <i class="ti tabler-arrow-right ms-1"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- ===== TAB 4: PRICING ===== -->
      <div class="tab-pane fade {{ $activeTab === 'pricing' ? 'show active' : '' }}" id="tab-pricing" role="tabpanel">
        <div class="row g-4">
          <div class="col-lg-8">
            <div class="card mb-4">
              <div class="card-header">
                <h5 class="card-title mb-0">Pricing</h5>
              </div>
              <div class="card-body">

                <div class="alert alert-info d-flex align-items-center gap-2 mb-4">
                  <i class="ti tabler-info-circle"></i>
                  <span>Additional pricing rules can be configured after saving the product.</span>
                </div>

                <div class="mb-4">
                  <label class="form-label" for="base_price">Base Price</label>
                  <div class="input-group" style="max-width:260px;">
                    <span class="input-group-text">USD $</span>
                    <input type="number" class="form-control" id="base_price" name="base_price"
                      min="0" step="0.01" value="{{ old('base_price', $product->base_price ?? '0.00') }}" placeholder="0.00">
                  </div>
                </div>

                <div class="mb-4">
                  <label class="form-label d-block">Rate Type <span class="text-danger">*</span></label>
                  <input type="hidden" name="price_rate_type" value="per_booking">
                  <div class="form-control bg-light">Per Booking</div>
                </div>

                <!-- Booking Deposit -->
                <hr class="my-4">
                <div class="mb-3">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch"
                      id="deposit_required" name="deposit_required" value="1"
                      {{ old('deposit_required', $product->deposit_required ? '1' : '') ? 'checked' : '' }}>
                    <label class="form-check-label fw-semibold" for="deposit_required">
                      Require a deposit for this product
                    </label>
                  </div>
                </div>

                <div id="depositPanel">
                  <div class="mb-3" style="max-width:360px;">
                    <label class="form-label" for="deposit_type">Deposit Type</label>
                    @php $savedDepositType = old('deposit_type', $product->deposit_type ?? 'system_default'); @endphp
                    <select class="form-select" id="deposit_type" name="deposit_type">
                      <option value="system_default" {{ $savedDepositType === 'system_default' ? 'selected' : '' }}>Use System Settings (100%)</option>
                      <option value="percent"        {{ $savedDepositType === 'percent'        ? 'selected' : '' }}>% Percent</option>
                      <option value="fixed"          {{ $savedDepositType === 'fixed'          ? 'selected' : '' }}>$ USD (Fixed Amount)</option>
                    </select>
                  </div>

                  {{-- Percent input --}}
                  <div id="depositPercentPanel" style="max-width:220px;">
                    <label class="form-label" for="deposit_value">Deposit Percent</label>
                    <div class="input-group">
                      <input type="number" class="form-control" id="deposit_value" name="deposit_value"
                        min="0" max="100" step="0.01"
                        value="{{ old('deposit_value', $product->deposit_value) }}" placeholder="e.g. 20">
                      <span class="input-group-text">%</span>
                    </div>
                    <small class="text-muted">Percentage of total charged at booking</small>
                  </div>

                  {{-- Dollar input (fixed / per day / per qty) --}}
                  <div id="depositDollarPanel" style="max-width:220px;">
                    <label class="form-label" for="deposit_value_usd">Deposit Amount</label>
                    <div class="input-group">
                      <span class="input-group-text">USD $</span>
                      <input type="number" class="form-control" id="deposit_value_usd" name="deposit_value"
                        min="0" step="0.01"
                        value="{{ old('deposit_value', $product->deposit_value) }}" placeholder="0.00">
                    </div>
                    <small class="text-muted">Amount charged at booking</small>
                  </div>
                </div>

                <!-- Taxes & Fees -->
                <hr class="my-4">
                <div class="mb-2">
                  <label class="form-label d-block">Taxes &amp; Fees</label>
                  <p class="text-muted small mb-2">Select taxes and fees to apply to this product.</p>
                  @if($taxFees->isEmpty())
                    <small class="text-muted">No active taxes or fees. <a href="{{ route('crm.tax-fees.index') }}" target="_blank">Create one first.</a></small>
                  @else
                    @php $selectedTaxFees = old('tax_fees', $product->taxFees->pluck('id')->toArray()); @endphp
                    <div class="d-flex flex-wrap gap-2">
                      @foreach($taxFees as $fee)
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox"
                            name="tax_fees[]" id="tax_fee_{{ $fee->id }}" value="{{ $fee->id }}"
                            {{ in_array($fee->id, $selectedTaxFees) ? 'checked' : '' }}>
                          <label class="form-check-label" for="tax_fee_{{ $fee->id }}">
                            {{ $fee->name }}
                            <span class="badge bg-label-secondary ms-1">{{ number_format($fee->percent, 2) }}%</span>
                          </label>
                        </div>
                      @endforeach
                    </div>
                  @endif
                </div>

                <!-- Custom Rates Table -->
                <hr class="my-4">
                <div class="d-flex align-items-center justify-content-between mb-3">
                  <div>
                    <label class="form-label d-block mb-0">Custom Rates</label>
                    <small class="text-muted">Only custom rates assigned to this product are shown here.</small>
                  </div>
                  <a href="{{ route('crm.custom-rates.create', ['from_product' => $product->hash_id]) }}"
                     class="btn btn-primary">
                    <i class="ti tabler-plus me-1"></i> Add Rate
                  </a>
                </div>

                <div class="border rounded p-3 mb-3">
                  @foreach($product->customRates as $rate)
                    <input type="hidden" name="custom_rate_ids[]" value="{{ $rate->id }}">
                  @endforeach

                  @if($customRates->isEmpty())
                    <small class="text-muted">No custom rates assigned to this product yet.</small>
                  @else
                    <div class="d-flex flex-column gap-2">
                      @foreach($customRates as $rate)
                        <div class="border rounded px-3 py-2 d-flex align-items-start justify-content-between gap-3">
                          <span>
                            <span class="fw-semibold d-block">{{ $rate->name }}</span>
                            <small class="text-muted">
                              {{ ucfirst(str_replace('_', ' ', $rate->rate_type)) }}
                              @if($rate->start_date)
                                • {{ $rate->start_date->format('Y/m/d') }}
                              @endif
                              @if($rate->end_date)
                                - {{ $rate->end_date->format('Y/m/d') }}
                              @else
                                - Open Ended
                              @endif
                              • {{ $rate->products_count }} linked product{{ $rate->products_count === 1 ? '' : 's' }}
                            </small>
                          </span>
                          <span class="badge bg-label-primary flex-shrink-0">Assigned</span>
                        </div>
                      @endforeach
                    </div>
                  @endif
                </div>

                <div class="table-responsive rounded border">
                  <table class="table table-bordered mb-0" style="min-width:420px;">
                    <thead class="table-light">
                      <tr>
                        <th style="width:180px;"></th>
                        <th>{{ $product->name }}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="fw-semibold text-muted" style="font-size:12px;">Base Rate</td>
                        <td class="fw-semibold" style="font-size:12px;">${{ number_format($product->base_price ?? 0, 2) }}</td>
                      </tr>
                      @forelse($product->customRates as $rate)
                        @php
                          $rateTypeLabel = match($rate->rate_type) {
                            'per_booking'  => 'Per Booking',
                            'per_24_hours' => 'Per 24 Hours',
                            default        => 'Per Day',
                          };
                        @endphp
                        <tr class="table-light">
                          <td colspan="2" class="py-2 px-3">
                            <div class="d-flex align-items-center justify-content-between gap-2">
                              <div class="d-flex align-items-center gap-2 flex-grow-1 min-width-0">
                                <i class="ti tabler-clock text-muted" style="font-size:13px;flex-shrink:0;"></i>
                                <div style="min-width:0;flex-grow:1;">
                                  <div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                    {{ Str::limit($rate->name, 25) }}
                                    <span class="badge bg-label-secondary ms-1" style="font-size:10px;">{{ $rateTypeLabel }}</span>
                                  </div>
                                  <small class="text-muted" style="font-size:11px;">
                                    {{ $rate->start_date->format('Y/m/d') }} &ndash; {{ $rate->end_date ? $rate->end_date->format('Y/m/d') : '∞' }}
                                  </small>
                                </div>
                              </div>
                              <div class="d-flex gap-1 flex-shrink-0">
                                <a href="{{ route('crm.custom-rates.edit', $rate->hash_id) }}?from_product={{ $product->hash_id }}"
                                   class="btn btn-sm btn-icon btn-outline-secondary"
                                   title="Edit">
                                  <i class="ti tabler-pencil" style="font-size:13px;"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-icon btn-outline-danger"
                                  onclick="detachRate('{{ $rate->hash_id }}')"
                                  title="Remove from product">
                                  <i class="ti tabler-x" style="font-size:13px;"></i>
                                </button>
                              </div>
                            </div>
                          </td>
                        </tr>
                        @foreach($rate->tiers as $tier)
                          @php
                            $unit = match($rate->rate_type) {
                              'per_24_hours' => 'Day',
                              'per_day'      => 'Day',
                              default        => 'Booking',
                            };
                            $lower = $tier->lower_threshold;
                            $upper = $tier->upper_threshold;
                            if ($upper === null) {
                              $tierLabel = $lower . ' – ∞ ' . $unit . 's';
                            } elseif ((int)$lower === (int)$upper) {
                              $tierLabel = $lower . ' ' . $unit . ($lower > 1 ? 's' : '');
                            } else {
                              $tierLabel = $lower . ' - ' . $upper . ' ' . $unit . 's';
                            }
                            $base  = (float)($product->base_price ?? 0);
                            $adj   = (float)$tier->adjustment_amount;
                            $price = $base + $adj;
                          @endphp
                          <tr>
                            <td class="ps-4" style="border-left:3px solid #e0e0e0;font-size:12px;color:#6c757d;">{{ $tierLabel }}</td>
                            <td style="font-size:12px;">
                              <span class="fw-semibold">${{ number_format($price, 2) }}</span>
                              <span class="text-success ms-1" style="font-size:11px;">(+${{ number_format($adj, 2) }})</span>
                            </td>
                          </tr>
                        @endforeach
                      @empty
                        <tr>
                          <td colspan="2" class="text-center text-muted fst-italic py-3">No custom rates added yet.</td>
                        </tr>
                      @endforelse
                    </tbody>
                  </table>
                </div>

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

        <div class="d-flex justify-content-between mt-2 mb-4">
          <button type="button" class="btn btn-label-secondary" onclick="goToTab('tab-availability-btn')">
            <i class="ti tabler-arrow-left me-1"></i> Previous
          </button>
          <div class="d-flex gap-2">
            <a href="{{ route('crm.products.index') }}" class="btn btn-label-secondary">Cancel</a>
            <button type="submit" class="btn btn-success" onclick="setActiveTabAndSubmit('pricing')">
              <i class="ti tabler-device-floppy me-1"></i> Update Product
            </button>
          </div>
        </div>
      </div>

    </div><!-- /tab-content -->
  </form>

{{-- Photo delete forms (placed outside main form to avoid nesting) --}}
@foreach($product->photos as $photo)
  <form id="photo-delete-{{ $photo->id }}"
    action="{{ route('crm.products.photos.destroy', [$product->hash_id, $photo->id]) }}"
    method="POST" style="display:none;">
    @csrf
    @method('DELETE')
  </form>
@endforeach


</div>

@endsection

@section('page-script')
<script>
(function () {
  'use strict';

  var activeTabInput = document.getElementById('activeTabInput');

  window.setActiveTabAndSubmit = function (tabName) {
    if (activeTabInput) {
      activeTabInput.value = tabName;
    }
  };

  // ── Tab navigation helper ──────────────────────────────────────────────────
  window.goToTab = function (tabBtnId) {
    var btn = document.getElementById(tabBtnId);
    if (btn) btn.click();
    document.querySelectorAll('.product-tab-nav .tab-dot').forEach(function (dot) {
      dot.classList.remove('bg-primary');
      dot.classList.add('bg-secondary');
    });
    var activeBtn = document.querySelector('.product-tab-nav .nav-link.active .tab-dot');
    if (activeBtn) {
      activeBtn.classList.remove('bg-secondary');
      activeBtn.classList.add('bg-primary');
    }
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  document.getElementById('productTabs').addEventListener('shown.bs.tab', function (e) {
    var targetPane = e.target.getAttribute('data-bs-target') || '';
    if (activeTabInput) {
      activeTabInput.value = targetPane.replace('#tab-', '');
    }

    document.querySelectorAll('.product-tab-nav .tab-dot').forEach(function (dot) {
      dot.classList.remove('bg-primary');
      dot.classList.add('bg-secondary');
    });
    var activeDot = e.target.querySelector('.tab-dot');
    if (activeDot) {
      activeDot.classList.remove('bg-secondary');
      activeDot.classList.add('bg-primary');
    }
  });

  // ── Inventory type show/hide ───────────────────────────────────────────────
  var invTypeSelect = document.getElementById('inventory_type');
  var simpleFields  = document.getElementById('simpleInventoryFields');
  var assetFields   = document.getElementById('assetInventoryFields');

  function updateInventoryFields() {
    if (invTypeSelect.value === 'assets') {
      simpleFields.style.display = 'none';
      assetFields.style.display  = '';
    } else if (invTypeSelect.value === 'unlimited') {
      simpleFields.style.display = 'none';
      assetFields.style.display  = 'none';
    } else {
      simpleFields.style.display = '';
      assetFields.style.display  = 'none';
    }
  }
  invTypeSelect.addEventListener('change', updateInventoryFields);
  updateInventoryFields();

  // ── Asset Pool Chooser ────────────────────────────────────────────────────
  var selectedAssets        = {};
  var assetsForCategory     = [];
  var assetCategoryPicker   = document.getElementById('assetCategoryPicker');
  var assetPoolBlock        = document.getElementById('assetPoolBlock');
  var poolCategoryName      = document.getElementById('poolCategoryName');
  var assetRowsList         = document.getElementById('assetRowsList');
  var totalQtyDisplay       = document.getElementById('totalQtyDisplay');
  var assetTotalRow         = document.getElementById('assetTotalRow');
  var allotmentTypeSelect   = document.getElementById('allotmentTypeSelect');
  var allotmentTotalDisplay = document.getElementById('allotmentTotalDisplay');
  var hiddenAssetCategoryId = document.getElementById('hiddenAssetCategoryId');
  var hiddenAssetIds        = document.getElementById('hiddenAssetIds');
  var assetPickerTrigger    = document.getElementById('assetPickerTrigger');
  var assetSearchBox        = document.getElementById('assetSearchBox');
  var assetDropdownPanel    = document.getElementById('assetDropdownPanel');
  var assetOptionsList      = document.getElementById('assetOptionsList');
  var assetPickerPlaceholder = document.getElementById('assetPickerPlaceholder');
  var createAssetLinkText   = document.getElementById('createAssetLinkText');

  // Pre-existing selected assets from server
  var initialAssets = @json($selectedAssets);

  function loadCategoryPool(categoryId, categoryName, preselected) {
    hiddenAssetCategoryId.value = categoryId;
    selectedAssets = {};
    if (preselected && preselected.length) {
      preselected.forEach(function (a) { selectedAssets[a.id] = a; });
    }

    // Show pool block immediately with known data (don't wait for AJAX)
    poolCategoryName.textContent = categoryName;
    createAssetLinkText.textContent = 'Create ' + categoryName + ' asset';
    document.getElementById('assetPoolDescription').textContent =
      'Assets are made up of resources you can use across products. Add your assets for the ' + categoryName + '.';
    assetPoolBlock.style.display = '';
    renderAssetRows();
    updatePickerPlaceholder();

    $.getJSON('{{ route("crm.assets.by-category") }}', { category_id: categoryId }, function (data) {
      assetsForCategory = data;
      renderAssetOptions('');
    });
  }

  // Auto-load if product already has a category + assets
  @if($product->inventory_type === 'assets' && $product->asset_category_id)
  (function () {
    var opt = assetCategoryPicker.querySelector('option[value="{{ $product->asset_category_id }}"]');
    if (opt) {
      loadCategoryPool('{{ $product->asset_category_id }}', opt.dataset.name || opt.textContent.trim(), initialAssets);
    }
  })();
  @endif

  assetCategoryPicker.addEventListener('change', function () {
    var opt = this.options[this.selectedIndex];
    if (!this.value) { resetAssetPool(); return; }
    loadCategoryPool(this.value, opt.dataset.name || opt.textContent.trim(), null);
  });

  document.getElementById('removePoolBtn').addEventListener('click', function () {
    assetCategoryPicker.value = '';
    resetAssetPool();
  });

  function resetAssetPool() {
    selectedAssets    = {};
    assetsForCategory = [];
    hiddenAssetCategoryId.value = '';
    hiddenAssetIds.innerHTML    = '';
    assetPoolBlock.style.display = 'none';
    allotmentTotalDisplay.value  = 0;
    document.getElementById('assetPoolDescription').textContent =
      'Assets are made up of resources you can use across products. Add your assets for this product.';
  }

  function renderAssetRows() {
    assetRowsList.innerHTML = '';
    var keys = Object.keys(selectedAssets);
    assetTotalRow.style.display = keys.length > 0 ? '' : 'none';
    keys.forEach(function (assetId) {
      var a   = selectedAssets[assetId];
      var tot = a.quantity * a.capacity;
      var row = document.createElement('div');
      row.className = 'row g-0 py-2 border-bottom align-items-center';
      row.innerHTML =
        '<div class="col-5"><strong>' + escHtml(a.name) + '</strong></div>' +
        '<div class="col-2 text-center">' + a.quantity + '</div>' +
        '<div class="col-2 text-center">' + a.capacity + '</div>' +
        '<div class="col-3 d-flex align-items-center justify-content-between ps-2">' +
          '<span>' + tot + '</span>' +
          '<div class="d-flex gap-1 align-items-center">' +
            '<a href="{{ route("crm.assets.index") }}" target="_blank" class="btn btn-sm btn-flat-secondary py-1 px-2">' +
              '<i class="ti tabler-pencil me-1" style="font-size:12px;"></i>Edit' +
            '</a>' +
            '<button type="button" class="btn btn-sm btn-icon btn-flat-secondary" onclick="removeAssetById(' + assetId + ')">' +
              '<i class="ti tabler-x"></i>' +
            '</button>' +
          '</div>' +
        '</div>';
      assetRowsList.appendChild(row);
    });
    updateAllotmentTotal();
    syncHiddenAssetIds();
  }

  window.removeAssetById = function (assetId) {
    delete selectedAssets[assetId];
    renderAssetRows();
    renderAssetOptions(assetSearchBox.value);
    updatePickerPlaceholder();
  };

  function updateAllotmentTotal() {
    var totalQty = 0, totalCap = 0;
    Object.values(selectedAssets).forEach(function (a) {
      totalQty += parseInt(a.quantity) || 0;
      totalCap += parseInt(a.capacity) || 0;
    });
    totalQtyDisplay.textContent = totalQty;
    allotmentTotalDisplay.value = allotmentTypeSelect.value === 'capacity' ? totalCap : totalQty;
  }

  function syncHiddenAssetIds() {
    hiddenAssetIds.innerHTML = '';
    Object.keys(selectedAssets).forEach(function (id) {
      var inp = document.createElement('input');
      inp.type = 'hidden'; inp.name = 'asset_ids[]'; inp.value = id;
      hiddenAssetIds.appendChild(inp);
    });
  }

  allotmentTypeSelect.addEventListener('change', updateAllotmentTotal);

  assetPickerTrigger.addEventListener('click', function () {
    assetSearchBox.focus();
    assetDropdownPanel.style.display = '';
    renderAssetOptions(assetSearchBox.value);
  });

  assetSearchBox.addEventListener('input', function () {
    renderAssetOptions(this.value);
  });

  document.addEventListener('click', function (e) {
    if (!assetPickerTrigger.contains(e.target) && !assetDropdownPanel.contains(e.target)) {
      assetDropdownPanel.style.display = 'none';
    }
  });

  function renderAssetOptions(search) {
    assetOptionsList.innerHTML = '';
    var q = (search || '').toLowerCase().trim();
    assetsForCategory.forEach(function (asset) {
      if (q && asset.name.toLowerCase().indexOf(q) === -1) return;
      var isSelected = !!selectedAssets[asset.id];
      var item = document.createElement('div');
      item.className = 'px-3 py-2 d-flex align-items-center gap-2' + (isSelected ? ' bg-light' : '');
      item.style.cursor = 'pointer';
      item.innerHTML =
        '<input type="checkbox" class="form-check-input m-0 flex-shrink-0" ' + (isSelected ? 'checked' : '') + ' onclick="return false;">' +
        '<span class="small">' + escHtml(asset.name) + '</span>';
      item.addEventListener('mousedown', function (e) {
        e.preventDefault();
        if (selectedAssets[asset.id]) { delete selectedAssets[asset.id]; }
        else { selectedAssets[asset.id] = asset; }
        renderAssetRows();
        renderAssetOptions(assetSearchBox.value);
        updatePickerPlaceholder();
      });
      assetOptionsList.appendChild(item);
    });
    if (!assetOptionsList.children.length) {
      assetOptionsList.innerHTML = '<div class="px-3 py-2 text-muted small">No assets found</div>';
    }
  }

  function updatePickerPlaceholder() {
    assetPickerPlaceholder.style.display = Object.keys(selectedAssets).length > 0 ? 'none' : '';
  }

  function escHtml(str) {
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  // ── Deposit toggle & type ──────────────────────────────────────────────────
  var depositToggle       = document.getElementById('deposit_required');
  var depositPanel        = document.getElementById('depositPanel');
  var depositTypeSelect   = document.getElementById('deposit_type');
  var depositPercentPanel = document.getElementById('depositPercentPanel');
  var depositDollarPanel  = document.getElementById('depositDollarPanel');

  function updateDepositPanel() {
    depositPanel.style.display = depositToggle.checked ? '' : 'none';
    updateDepositInputPanel();
  }

  function updateDepositInputPanel() {
    var type = depositTypeSelect.value;
    depositPercentPanel.style.display = (type === 'percent') ? '' : 'none';
    depositDollarPanel.style.display  = (type === 'fixed') ? '' : 'none';
  }

  depositToggle.addEventListener('change', updateDepositPanel);
  depositTypeSelect.addEventListener('change', updateDepositInputPanel);
  updateDepositPanel();

  var bookingRulesToggle = document.getElementById('bookingRulesEnabled');
  var bookingRulesPanel = document.getElementById('bookingRulesPanel');

  function updateBookingRulesPanel() {
    if (!bookingRulesToggle || !bookingRulesPanel) {
      return;
    }

    bookingRulesPanel.style.display = bookingRulesToggle.checked ? '' : 'none';
  }

  if (bookingRulesToggle) {
    bookingRulesToggle.addEventListener('change', updateBookingRulesPanel);
    updateBookingRulesPanel();
  }

  // ── Booking rules toggle ───────────────────────────────────────────────────
  // ── Event name character counter ───────────────────────────────────────────
  var eventNameInput   = document.getElementById('avail_event_name');
  var eventNameCounter = document.getElementById('eventNameCounter');
  eventNameInput.addEventListener('input', function () {
    eventNameCounter.textContent = eventNameInput.value.length + '/150';
  });

  // ── Photo upload & preview ─────────────────────────────────────────────────
  var photosInput   = document.getElementById('photosInput');
  var uploadArea    = document.getElementById('photoUploadArea');
  var previewGrid   = document.getElementById('photoPreviewGrid');
  var selectedFiles = [];

  if (photosInput) {
    uploadArea.addEventListener('click', function () { photosInput.click(); });

    uploadArea.addEventListener('dragover', function (e) {
      e.preventDefault();
      uploadArea.classList.add('border-primary');
    });

    uploadArea.addEventListener('dragleave', function () {
      uploadArea.classList.remove('border-primary');
    });

    uploadArea.addEventListener('drop', function (e) {
      e.preventDefault();
      uploadArea.classList.remove('border-primary');
      addFiles(Array.from(e.dataTransfer.files));
    });

    photosInput.addEventListener('change', function () {
      var files = Array.from(photosInput.files);
      photosInput.value = '';
      addFiles(files);
    });

    function addFiles(files) {
      files.forEach(function (file) {
        if (selectedFiles.length >= 5) return;
        if (!file.type.startsWith('image/')) return;
        selectedFiles.push(file);
      });
      renderPreviews();
      syncFilesToInput();
    }

    function renderPreviews() {
      previewGrid.innerHTML = '';
      selectedFiles.forEach(function (file, idx) {
        var reader = new FileReader();
        reader.onload = function (e) {
          var col = document.createElement('div');
          col.className = 'col-4 col-md-3 col-lg-2';
          col.innerHTML = '<div class="position-relative">' +
            '<img src="' + e.target.result + '" class="img-fluid rounded" style="height:100px;width:100%;object-fit:cover;">' +
            '<span class="badge bg-info position-absolute top-0 start-0 m-1" style="font-size:10px;">New</span>' +
            '<button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 p-0" style="width:20px;height:20px;line-height:1;" data-idx="' + idx + '">' +
            '<i class="ti tabler-x" style="font-size:11px;"></i>' +
            '</button>' +
            '</div>';
          col.querySelector('button').addEventListener('click', function () {
            selectedFiles.splice(idx, 1);
            renderPreviews();
            syncFilesToInput();
          });
          previewGrid.appendChild(col);
        };
        reader.readAsDataURL(file);
      });
    }

    function syncFilesToInput() {
      var dt = new DataTransfer();
      selectedFiles.forEach(function (f) { dt.items.add(f); });
      photosInput.files = dt.files;
    }
  }

  // ── CKEditor ───────────────────────────────────────────────────────────────
  (function initCKEditor() {
    if (typeof CKEDITOR !== 'undefined') {
      if (CKEDITOR.instances['description']) CKEDITOR.instances['description'].destroy(true);
      CKEDITOR.replace('description', {
        height: 300,
        toolbar: [
          { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
          { name: 'paragraph',   items: ['BulletedList', 'NumberedList', '-', 'Blockquote'] },
          { name: 'links',       items: ['Link', 'Unlink'] },
          { name: 'insert',      items: ['Image', 'Table', 'HorizontalRule'] },
          { name: 'styles',      items: ['Format', 'FontSize'] },
          { name: 'tools',       items: ['Maximize', 'Source'] }
        ]
      });
    } else {
      setTimeout(initCKEditor, 100);
    }
  })();


})();

  function detachRate(rateHashId) {
    if (!confirm('Remove this rate from the product?')) return;
    var form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ route("crm.products.custom-rates.detach", [$product->hash_id, "RATE_ID"]) }}'.replace('RATE_ID', rateHashId);
    var m = document.createElement('input'); m.type = 'hidden'; m.name = '_method'; m.value = 'DELETE';
    var t = document.createElement('input'); t.type = 'hidden'; t.name = '_token'; t.value = '{{ csrf_token() }}';
    form.appendChild(m); form.appendChild(t);
    document.body.appendChild(form);
    form.submit();
  }
</script>
@endsection