@extends('crm.master')

@section('title', 'Add 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">Add Product</h4>
          <p class="text-muted mb-0">Create a new product in your catalogue</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.store') }}" method="POST" enctype="multipart/form-data" id="productForm">
    @csrf
    @php
      $activeTab = old('active_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">

                <!-- Name -->
                <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') }}" placeholder="e.g. City Tour Experience" required>
                  @error('name') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>

                <!-- SKU -->
                <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') }}" placeholder="e.g. CITY-TOUR-001" required>
                  @error('sku') <span class="invalid-feedback">{{ $message }}</span> @enderror
                  <small class="form-text text-muted">Auto-generated from name. You can edit it manually.</small>
                </div>

                <!-- Category -->
                <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') == $cat->id ? 'selected' : '' }}>
                        {{ $cat->name }}
                      </option>
                    @endforeach
                  </select>
                  @error('category_id') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>

                <!-- Tags -->
                <div class="mb-4">
                  <label class="form-label">Tags</label>
                  <div class="d-flex flex-wrap gap-2">
                    @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, old('tags', [])) ? '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. <a href="{{ route('crm.tags.create') }}" target="_blank">Create tags</a> first.</small>
                    @endif
                  </div>
                  @error('tags') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                </div>

              </div>
            </div>

            <!-- Photos Card -->
            <div class="card mb-4">
              <div class="card-header">
                <h5 class="card-title mb-0">Product Photos</h5>
                <p class="card-subtitle text-muted mt-1 mb-0 small">Add up to 5 photos. The first image displayed 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:140px;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 5 images, 2MB each. JPG, PNG, GIF, WebP</small>
                  <input type="file" name="photos[]" id="photosInput" multiple accept="image/*"
                    class="d-none" style="display:none!important;">
                </div>

                <!-- Photo Preview Grid -->
                <div id="photoPreviewGrid" class="row g-2"></div>

                @error('photos') <div class="text-danger small mt-2">{{ $message }}</div> @enderror
                @error('photos.*') <div class="text-danger small mt-2">{{ $message }}</div> @enderror
              </div>
            </div>

            <!-- Description Card -->
            <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') }}</textarea>
                @error('description') <span class="invalid-feedback">{{ $message }}</span> @enderror
              </div>
            </div>

          </div>

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

            <!-- Status Card -->
            <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', 'draft') === 'draft'    ? 'selected' : '' }}>Draft</option>
                  <option value="active"   {{ old('status') === 'active'   ? 'selected' : '' }}>Active</option>
                  <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
                @error('status') <span class="invalid-feedback">{{ $message }}</span> @enderror
              </div>
            </div>

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

                <!-- Video Link -->
                <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') }}" placeholder="https://youtube.com/...">
                  @error('video_link') <span class="invalid-feedback">{{ $message }}</span> @enderror
                  <small class="text-muted">Optional YouTube or Vimeo URL</small>
                </div>

                <!-- Sort Order -->
                <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', 0) }}">
                  @error('sort_order') <span class="invalid-feedback">{{ $message }}</span> @enderror
                  <small class="text-muted">Lower numbers appear first</small>
                </div>

              </div>
            </div>

          </div>
        </div>

        <!-- Tab Navigation -->
        <div class="d-flex justify-content-between mt-2 mb-4">
          <a href="{{ route('crm.products.index') }}" class="btn btn-label-secondary">Cancel</a>
          <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>

      <!-- ===== 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">

            <!-- Inventory Type Card -->
            <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', 'simple') === 'simple' ? 'selected' : '' }}>Simple (fixed quantity)</option>
                    <option value="assets" {{ old('inventory_type') === 'assets' ? 'selected' : '' }}>Assets (linked to asset pool)</option>
                    <option value="unlimited" {{ old('inventory_type') === 'unlimited' ? 'selected' : '' }}>Unlimited (inventory is unlimited)</option>
                  </select>
                  @error('inventory_type') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>

                <!-- Simple Inventory Fields -->
                <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', 0) }}" placeholder="0">
                    @error('inventory_amount') <span class="invalid-feedback">{{ $message }}</span> @enderror
                    <small class="text-muted">Number of units available for booking</small>
                  </div>
                </div>

                <!-- Asset Inventory Fields -->
                <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') == $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">
                    {{-- Header --}}
                    <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">Quantity</option>
                          <option value="capacity">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>

                    {{-- Column Headers --}}
                    <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>

                      {{-- Asset Rows --}}
                      <div id="assetRowsList"></div>

                      {{-- Total Quantity --}}
                      <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>

                    {{-- Asset Picker --}}
                    <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>

                  {{-- Hidden inputs --}}
                  <input type="hidden" name="asset_category_id" id="hiddenAssetCategoryId" value="{{ old('asset_category_id') }}">
                  <div id="hiddenAssetIds"></div>
                </div>

              </div>
            </div>

          </div>
        </div>

        <!-- Tab Navigation -->
        <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>
          <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>

      <!-- ===== TAB 3: AVAILABILITY ===== -->
      <div class="tab-pane fade {{ $activeTab === 'availability' ? 'show active' : '' }}" id="tab-availability" 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">Availability Schedule</h5>
                <p class="card-subtitle text-muted mt-1 mb-0 small">Define when this product is available for booking</p>
              </div>
              <div class="card-body">

                <!-- Event Name -->
                <div class="mb-4">
                  <label class="form-label" for="avail_event_name">
                    Availability Name <span id="eventNameCounter" class="text-muted float-end small">0/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') }}" placeholder="e.g. Regular Season, Summer Schedule">
                  @error('availability.event_name') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>

                <!-- Date Range -->
                <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') }}">
                    @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') }}">
                    @error('availability.end_date') <span class="invalid-feedback">{{ $message }}</span> @enderror
                  </div>
                </div>

                <!-- Days of Week -->
                <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'];
                      $oldDays    = old('availability.days_of_week', $dayValues);
                    @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>
                  <small class="text-muted">Select which days of the week this product is available</small>
                </div>

                @php
                  $bookingRulesEnabled = old('availability.booking_rules_enabled');
                @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', 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', 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', 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', 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', 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', 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', 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', 0) }}" placeholder="Minutes">
                        <span class="input-group-text">m</span>
                      </div>
                    </div>
                  </div>

                </div>

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

        <!-- Tab Navigation -->
        <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>
          <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>

      <!-- ===== 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>
                <p class="card-subtitle text-muted mt-1 mb-0 small">Set the base pricing for this product</p>
              </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 (seasonal rates, group discounts) can be configured after saving the product.</span>
                </div>

                <div class="mb-4">
                  <label class="form-label" for="base_price">Base Price <span class="text-danger">*</span></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', '0.00') }}" placeholder="0.00">
                  </div>
                  <small class="text-muted">Required for publishing</small>
                </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', '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>
                    <select class="form-select" id="deposit_type" name="deposit_type">
                      <option value="system_default" {{ old('deposit_type', 'system_default') === 'system_default' ? 'selected' : '' }}>Use System Settings (100%)</option>
                      <option value="percent"        {{ old('deposit_type') === 'percent'        ? 'selected' : '' }}>% Percent</option>
                      <option value="fixed"          {{ old('deposit_type') === 'fixed'          ? 'selected' : '' }}>$ USD (Fixed Amount)</option>
                    </select>
                  </div>

                  {{-- Percent input --}}
                  <div id="depositPercentPanel" style="display:none; 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') }}" 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="display:none; 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') }}" 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
                    <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, old('tax_fees', [])) ? '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 -->
                <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">Shared Custom Rates</label>
                    <small class="text-muted">Create custom rates for this product from this pricing tab.</small>
                  </div>
                  <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#createDurationRateModal">
                    <i class="ti tabler-plus me-1"></i> Add Rate
                  </button>
                </div>

                <div class="mt-3">
                  <small class="text-muted d-block mb-2">New rates added here will be created as shared custom rates and linked to this product automatically.</small>
                  <div id="durationPricingPreview" style="display:none; margin-bottom:1rem;">
                    <div class="card border-primary">
                      <div class="card-header bg-light">
                        <h6 class="card-title mb-0 d-flex align-items-center gap-2">
                          <i class="ti tabler-table"></i> New Rate Preview
                        </h6>
                      </div>
                      <div class="card-body p-0">
                        <div style="overflow-x: auto;">
                          <table class="table table-sm table-hover mb-0">
                            <thead class="table-light">
                              <tr>
                                <th style="width:40%;">Duration</th>
                                <th style="width:30%;">Price Per Unit</th>
                                <th style="width:30%;">Total Price</th>
                              </tr>
                            </thead>
                            <tbody id="durationPricingBody"></tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div id="pendingRatesList"></div>
                  <div id="pendingRatesInputs"></div>
                </div>

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

        <!-- Tab Navigation -->
        <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> Save Product
            </button>
          </div>
        </div>
      </div>

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

</div>

{{-- Availability Rate Modal (create page) --}}
<div class="modal fade" id="createAvailabilityRateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="ti tabler-calendar me-2"></i> Add Availability Rate</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">Name <small class="text-muted">(optional)</small></label>
          <input type="text" class="form-control" id="cr_avail_name" maxlength="150" placeholder="e.g. Summer Rates">
        </div>
        <div class="mb-3">
          <label class="form-label">Rate Type <span class="text-danger">*</span></label>
          <input type="hidden" id="cr_avail_rate_type" value="per_booking">
          <div class="form-control bg-light">Per Booking</div>
        </div>
        <div class="row mb-3">
          <div class="col-md-6">
            <label class="form-label">Start Date <span class="text-danger">*</span></label>
            <input type="date" class="form-control" id="cr_avail_start_date">
          </div>
          <div class="col-md-6">
            <label class="form-label">End Date <small class="text-muted">(optional)</small></label>
            <input type="date" class="form-control" id="cr_avail_end_date">
          </div>
        </div>
        <div class="mb-1">
          <label class="form-label">Price Adjustment <span class="text-danger">*</span></label>
          <div class="d-flex align-items-center gap-2">
            <div class="btn-group btn-group-sm" role="group">
              <input type="radio" class="btn-check" name="cr_avail_adj_type" id="cr_avail_adj_fixed" value="fixed" checked>
              <label class="btn btn-outline-secondary px-3" for="cr_avail_adj_fixed">$</label>
              <input type="radio" class="btn-check" name="cr_avail_adj_type" id="cr_avail_adj_pct" value="percent">
              <label class="btn btn-outline-secondary px-3" for="cr_avail_adj_pct">%</label>
            </div>
            <input type="number" class="form-control" id="cr_avail_adj_amount" min="0" step="0.01" value="0" style="max-width:160px;">
          </div>
        </div>
        <div id="cr_avail_error" class="text-danger small mt-2" style="display:none;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" onclick="addPendingAvailRate()">Add Rate</button>
      </div>
    </div>
  </div>
</div>

{{-- Duration Rate Modal (create page) --}}
<div class="modal fade" id="createDurationRateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="ti tabler-clock me-2"></i> Add Duration Rate</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">Name <small class="text-muted">(optional)</small></label>
          <input type="text" class="form-control" id="cr_dur_name" maxlength="150" placeholder="e.g. Long Term Rental Rates">
        </div>
        <div class="mb-3">
          <label class="form-label">Rate Type <span class="text-danger">*</span></label>
          <input type="hidden" id="cr_dur_rate_type" value="per_booking">
          <div class="form-control bg-light">Per Booking</div>
        </div>
        <div class="row mb-3">
          <div class="col-md-6">
            <label class="form-label">Start Date <span class="text-danger">*</span></label>
            <input type="date" class="form-control" id="cr_dur_start_date">
          </div>
          <div class="col-md-6">
            <label class="form-label">End Date <small class="text-muted">(optional)</small></label>
            <input type="date" class="form-control" id="cr_dur_end_date">
          </div>
        </div>
        <div class="mb-2">
          <label class="form-label">Duration Tiers <span class="text-danger">*</span></label>
          <div class="text-muted small mb-2">Set price per day range. Leave upper blank for "Max".</div>
          <div id="cr_dur_tiers_container"></div>
          <button type="button" class="btn btn-sm btn-outline-secondary mt-2" onclick="crAddDurTier()">
            <i class="ti tabler-plus me-1"></i> Add Duration
          </button>
        </div>
        <div id="cr_dur_error" class="text-danger small mt-2" style="display:none;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" onclick="addPendingDurRate()">Add Rate</button>
      </div>
    </div>
  </div>
</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();
    // update dot colours
    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' });
  };

  // Update dots when tabs change via Bootstrap events
  document.getElementById('productTabs').addEventListener('shown.bs.tab', function (e) {
    if (activeTabInput) {
      activeTabInput.value = e.target.id.replace('tab-', '').replace('-btn', '');
    }
    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');
    }
  });

  // ── SKU auto-generation ────────────────────────────────────────────────────
  var nameInput = document.getElementById('name');
  var skuInput  = document.getElementById('sku');
  var skuManuallyEdited = false;

  nameInput.addEventListener('input', function () {
    if (!skuManuallyEdited) {
      var sku = nameInput.value
        .toUpperCase()
        .replace(/[^A-Z0-9]+/g, '-')
        .replace(/^-|-$/g, '');
      skuInput.value = sku;
    }
  });

  skuInput.addEventListener('input', function () {
    skuManuallyEdited = true;
  });

  // ── 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');
  var initialAssetIds       = @json(array_map('intval', old('asset_ids', [])));
  var initialAssetCategoryId = @json(old('asset_category_id'));

  function loadCategoryPool(categoryId, categoryName, preselectedIds) {
    hiddenAssetCategoryId.value = categoryId;
    selectedAssets = {};
    assetsForCategory = [];

    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 = '';

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

      if (Array.isArray(preselectedIds) && preselectedIds.length) {
        data.forEach(function (asset) {
          if (preselectedIds.indexOf(Number(asset.id)) !== -1) {
            selectedAssets[asset.id] = asset;
          }
        });
      }

      renderAssetRows();
      renderAssetOptions('');
      updatePickerPlaceholder();
    });
  }

  assetCategoryPicker.addEventListener('change', function () {
    var opt = this.options[this.selectedIndex];
    if (!this.value) { resetAssetPool(); return; }

    var categoryId   = this.value;
    var categoryName = opt.dataset.name || opt.textContent.trim();

    loadCategoryPool(categoryId, categoryName, []);
  });

  if (invTypeSelect.value === 'assets' && initialAssetCategoryId) {
    (function () {
      var opt = assetCategoryPicker.querySelector('option[value="' + initialAssetCategoryId + '"]');
      if (opt) {
        loadCategoryPool(String(initialAssetCategoryId), opt.dataset.name || opt.textContent.trim(), initialAssetIds);
      }
    })();
  }

  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);
  };

  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);

  // Picker show/hide
  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];
          isSelected = false;
        } else {
          selectedAssets[asset.id] = asset;
          isSelected = true;
        }
        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() {
    var count = Object.keys(selectedAssets).length;
    assetPickerPlaceholder.style.display = count > 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   = [];

  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;">' +
          (idx === 0 ? '<span class="badge bg-primary position-absolute top-0 start-0 m-1" style="font-size:10px;">Main</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);
    }
  })();

  // ── Guest Type Name → type_id auto-fill ───────────────────────────────────
  var gtName   = document.getElementById('gt_name');
  var gtTypeId = document.getElementById('gt_type_id');

})();

// ── Pending Rates (Create page) ────────────────────────────────────────────
var pendingRates      = [];
var crDurTierCount    = 0;
var editingPendingIdx = null;

function crDurTierRow(idx, tier) {
  tier = tier || {};
  var lower    = tier.lower  !== undefined ? tier.lower  : (idx + 1);
  var upper    = tier.upper  !== undefined ? tier.upper  : '';
  var adjType  = tier.adjustment_type   || 'fixed';
  var adjAmt   = tier.adjustment_amount !== undefined ? tier.adjustment_amount : '0';
  return '<div class="d-flex align-items-center gap-2 mb-2 tier-row" id="crdtier-' + idx + '">' +
    '<span class="text-muted small text-nowrap">Hour</span>' +
    '<input type="number" class="form-control form-control-sm" style="width:70px" data-lower value="' + lower + '" min="1" required>' +
    '<span class="text-muted">–</span>' +
    '<input type="number" class="form-control form-control-sm" style="width:70px" data-upper value="' + upper + '" placeholder="Max" min="1">' +
    '<input type="hidden" name="crdtier_adj_' + idx + '" value="fixed">' +
    '<span class="input-group-text" style="background:#f0f0f0;border:1px solid #ddd;border-radius:0.25rem;">$</span>' +
    '<input type="number" class="form-control form-control-sm" style="width:110px" data-amount value="' + adjAmt + '" min="0" step="0.01" required>' +
    '<button type="button" class="btn btn-sm btn-outline-danger" onclick="crRemoveDurTier(this)"' + (idx === 0 ? ' style="visibility:hidden"' : '') + '>' +
      '<i class="ti tabler-x"></i>' +
    '</button>' +
  '</div>';
}

function crAddDurTier() {
  var container = document.getElementById('cr_dur_tiers_container');
  container.insertAdjacentHTML('beforeend', crDurTierRow(crDurTierCount++));
}

function crRemoveDurTier(btn) {
  btn.closest('.tier-row').remove();
}

function addPendingAvailRate() {
  var errorEl = document.getElementById('cr_avail_error');
  errorEl.style.display = 'none';

  var name      = document.getElementById('cr_avail_name').value.trim();
  var rateType  = document.getElementById('cr_avail_rate_type').value;
  var startDate = document.getElementById('cr_avail_start_date').value;
  var endDate   = document.getElementById('cr_avail_end_date').value;
  var adjType   = document.querySelector('input[name="cr_avail_adj_type"]:checked').value;
  var adjAmount = document.getElementById('cr_avail_adj_amount').value;

  if (!startDate) {
    errorEl.textContent = 'Start date is required.';
    errorEl.style.display = '';
    return;
  }

  var rate = {
    mode: 'availability',
    name: name,
    rate_type: rateType,
    start_date: startDate,
    end_date: endDate,
    tiers: [{ lower: 1, upper: '', adjustment_type: adjType, adjustment_amount: adjAmount }]
  };

  if (editingPendingIdx !== null) {
    pendingRates[editingPendingIdx] = rate;
    editingPendingIdx = null;
  } else {
    pendingRates.push(rate);
  }
  renderPendingRates();
  bootstrap.Modal.getInstance(document.getElementById('createAvailabilityRateModal')).hide();
}

function addPendingDurRate() {
  var errorEl = document.getElementById('cr_dur_error');
  errorEl.style.display = 'none';

  var name      = document.getElementById('cr_dur_name').value.trim();
  var rateType  = document.getElementById('cr_dur_rate_type').value;
  var startDate = document.getElementById('cr_dur_start_date').value;
  var endDate   = document.getElementById('cr_dur_end_date').value;
  var multi     = 0;

  if (!startDate) {
    errorEl.textContent = 'Start date is required.';
    errorEl.style.display = '';
    return;
  }

  var tierRows = document.querySelectorAll('#cr_dur_tiers_container .tier-row');
  if (tierRows.length === 0) {
    errorEl.textContent = 'At least one duration tier is required.';
    errorEl.style.display = '';
    return;
  }

  var tiers = [];
  tierRows.forEach(function (row, i) {
    var adjTypeEl = row.querySelector('input[type="radio"]:checked');
    tiers.push({
      lower: row.querySelector('[data-lower]').value,
      upper: row.querySelector('[data-upper]').value,
      adjustment_type: adjTypeEl ? adjTypeEl.value : 'fixed',
      adjustment_amount: row.querySelector('[data-amount]').value,
      sort_order: i
    });
  });

  var rate = {
    mode: 'duration',
    name: name,
    rate_type: rateType,
    start_date: startDate,
    end_date: endDate,
    apply_multi_duration: multi ? 1 : 0,
    tiers: tiers
  };

  if (editingPendingIdx !== null) {
    pendingRates[editingPendingIdx] = rate;
    editingPendingIdx = null;
  } else {
    pendingRates.push(rate);
  }
  renderPendingRates();
  bootstrap.Modal.getInstance(document.getElementById('createDurationRateModal')).hide();
}

function pendingTierSummary(rate) {
  if (!rate.tiers || rate.tiers.length === 0) return '';
  var unit = 'Booking';
  var first = rate.tiers[0];
  var last  = rate.tiers[rate.tiers.length - 1];
  var minL  = first.lower;
  var maxU  = last.upper ? last.upper : '∞';
  var range = (rate.tiers.length === 1)
    ? (minL + (maxU !== String(minL) ? ' – ' + maxU : '') + ' ' + unit + (minL > 1 || maxU !== String(minL) ? 's' : ''))
    : (minL + ' – ' + maxU + ' ' + unit + 's');
  return range + (rate.tiers.length > 1 ? ' <span class="text-muted">(' + rate.tiers.length + ' tiers)</span>' : '');
}

function renderPendingRates() {
  var list   = document.getElementById('pendingRatesList');
  var inputs = document.getElementById('pendingRatesInputs');
  list.innerHTML   = '';
  inputs.innerHTML = '';

  if (pendingRates.length === 0) {
    document.getElementById('durationPricingPreview').style.display = 'none';
    return;
  }

  var html = '<div class="list-group mb-3">';
  pendingRates.forEach(function (r, idx) {
    var label   = r.name || (r.mode === 'duration' ? 'Duration Rate' : 'Availability Rate');
    var badge   = '<span class="badge ' + (r.mode === 'duration' ? 'bg-label-warning' : 'bg-label-info') + ' me-2">' + (r.mode === 'duration' ? 'Duration' : 'Availability') + '</span>';
    var rtLabel = r.rate_type.replace(/_/g, ' ');
    var summary = r.mode === 'duration' ? pendingTierSummary(r) : '';
    var dates   = r.start_date + (r.end_date ? ' – ' + r.end_date : ' – ∞');
    html += '<div class="list-group-item py-2">' +
      '<div class="d-flex align-items-center justify-content-between">' +
        '<div>' +
          badge +
          '<span class="fw-semibold">' + (label) + '</span>' +
          ' <small class="text-muted">' + rtLabel + '</small>' +
        '</div>' +
        '<div class="d-flex gap-1">' +
          '<button type="button" class="btn btn-sm btn-icon btn-outline-secondary" onclick="editPendingRate(' + idx + ')" title="Edit">' +
            '<i class="ti tabler-pencil" style="font-size:13px;"></i>' +
          '</button>' +
          '<button type="button" class="btn btn-sm btn-icon btn-outline-danger" onclick="removePendingRate(' + idx + ')" title="Remove">' +
            '<i class="ti tabler-x" style="font-size:13px;"></i>' +
          '</button>' +
        '</div>' +
      '</div>' +
      '<div class="mt-1" style="padding-left:4px;">' +
        '<small class="text-muted me-3"><i class="ti tabler-calendar-event me-1"></i>' + dates + '</small>' +
        (summary ? '<small class="text-muted"><i class="ti tabler-layers-subtract me-1"></i>' + summary + '</small>' : '') +
      '</div>' +
    '</div>';
  });
  html += '</div>';
  list.innerHTML = html;

  // Inject hidden inputs
  pendingRates.forEach(function (r, ridx) {
    function hi(field, val) {
      var inp = document.createElement('input');
      inp.type  = 'hidden';
      inp.name  = 'pending_rates[' + ridx + '][' + field + ']';
      inp.value = val;
      inputs.appendChild(inp);
    }
    hi('mode', r.mode);
    hi('name', r.name);
    hi('rate_type', r.rate_type);
    hi('start_date', r.start_date);
    hi('end_date', r.end_date);

    r.tiers.forEach(function (t, tidx) {
      function ti(field, val) {
        var inp = document.createElement('input');
        inp.type  = 'hidden';
        inp.name  = 'pending_rates[' + ridx + '][tiers][' + tidx + '][' + field + ']';
        inp.value = val;
        inputs.appendChild(inp);
      }
      ti('lower', t.lower);
      ti('upper', t.upper);
      ti('adjustment_type', t.adjustment_type);
      ti('adjustment_amount', t.adjustment_amount);
      ti('sort_order', t.sort_order || tidx);
    });
  });

  // Update pricing preview
  renderDurationPricingPreview();
}

function removePendingRate(idx) {
  pendingRates.splice(idx, 1);
  renderPendingRates();
}

function editPendingRate(idx) {
  var rate = pendingRates[idx];
  editingPendingIdx = idx;
  
  if (rate.mode === 'availability') {
    document.getElementById('cr_avail_name').value       = rate.name       || '';
    document.getElementById('cr_avail_start_date').value = rate.start_date || '';
    document.getElementById('cr_avail_end_date').value   = rate.end_date   || '';
    if (rate.tiers && rate.tiers[0]) {
      var t = rate.tiers[0];
      document.getElementById('cr_avail_adj_amount').value = t.adjustment_amount || '0';
      var adjFixed = document.getElementById('cr_avail_adj_fixed');
      var adjPct   = document.getElementById('cr_avail_adj_pct');
      if (t.adjustment_type === 'percent') { adjPct.checked = true; }
      else { adjFixed.checked = true; }
    }
    new bootstrap.Modal(document.getElementById('createAvailabilityRateModal')).show();
  } else {
    document.getElementById('cr_dur_name').value       = rate.name       || '';
    document.getElementById('cr_dur_start_date').value = rate.start_date || '';
    document.getElementById('cr_dur_end_date').value   = rate.end_date   || '';

    var container = document.getElementById('cr_dur_tiers_container');
    container.innerHTML = '';
    crDurTierCount = 0;
    (rate.tiers || []).forEach(function (t) {
      container.insertAdjacentHTML('beforeend', crDurTierRow(crDurTierCount++, t));
    });
    if (crDurTierCount === 0) crAddDurTier();
    new bootstrap.Modal(document.getElementById('createDurationRateModal')).show();
  }
}

// Reset modals on close
document.getElementById('createAvailabilityRateModal').addEventListener('hidden.bs.modal', function () {
  if (editingPendingIdx !== null) editingPendingIdx = null;
  document.getElementById('cr_avail_name').value = '';
  document.getElementById('cr_avail_start_date').value = '';
  document.getElementById('cr_avail_end_date').value = '';
  document.getElementById('cr_avail_adj_amount').value = '0';
  document.getElementById('cr_avail_adj_fixed').checked = true;
  document.getElementById('cr_avail_error').style.display = 'none';
});

document.getElementById('createDurationRateModal').addEventListener('show.bs.modal', function () {
  // Only auto-select rate type when opening fresh (not editing)
  if (editingPendingIdx === null) {
    var container = document.getElementById('cr_dur_tiers_container');
    if (container.children.length === 0) {
      crDurTierCount = 0;
      crAddDurTier();
    }
  }
});

document.getElementById('createDurationRateModal').addEventListener('hidden.bs.modal', function () {
  if (editingPendingIdx !== null) editingPendingIdx = null;
  document.getElementById('cr_dur_tiers_container').innerHTML = '';
  crDurTierCount = 0;
  document.getElementById('cr_dur_name').value = '';
  document.getElementById('cr_dur_start_date').value = '';
  document.getElementById('cr_dur_end_date').value = '';

  document.getElementById('cr_dur_error').style.display = 'none';
});

// ── Duration Pricing Preview Table ──────────────────────────────────────────
function renderDurationPricingPreview() {
  var durationRates = pendingRates.filter(function(r) { return r.mode === 'duration'; });
  var previewContainer = document.getElementById('durationPricingPreview');
  var tbody = document.getElementById('durationPricingBody');

  if (durationRates.length === 0) {
    previewContainer.style.display = 'none';
    return;
  }

  var basePrice = parseFloat(document.getElementById('base_price').value) || 0;
  var rateType = document.querySelector('input[name="price_rate_type"]');
  var rateTypeValue = rateType ? rateType.value : 'per_booking';

  // Use first duration rate's tiers for preview
  var rate = durationRates[0];
  var unit = 'Hours'; // Always show Hours for duration-based pricing previews
  var rows = '';

  if (!rate.tiers || rate.tiers.length === 0) {
    previewContainer.style.display = 'none';
    return;
  }

  // Sort tiers by lower bound
  var sortedTiers = rate.tiers.slice().sort(function(a, b) {
    return (parseInt(a.lower) || 0) - (parseInt(b.lower) || 0);
  });

  sortedTiers.forEach(function(tier, idx) {
    var lowerBound = parseInt(tier.lower) || 1;
    var upperBound = tier.upper ? parseInt(tier.upper) : null;
    var adjType = tier.adjustment_type || 'fixed';
    var adjAmount = parseFloat(tier.adjustment_amount) || 0;

    // Calculate price per unit
    var pricePerUnit = basePrice;
    if (adjType === 'fixed') {
      pricePerUnit = pricePerUnit + adjAmount;
    } else if (adjType === 'percent') {
      pricePerUnit = pricePerUnit * (1 + adjAmount / 100);
    }

    // Create duration label with proper formatting
    var durationLabel = '';
    if (upperBound === null || upperBound === 0) {
      // Open-ended range (e.g., "10 - ∞ Hours")
      durationLabel = lowerBound + ' - ∞ ' + unit;
    } else if (lowerBound === upperBound) {
      // Single value (e.g., "3 Hours")
      durationLabel = lowerBound + ' ' + unit;
    } else {
      // Range (e.g., "1 - 2 Hours")
      durationLabel = lowerBound + ' - ' + upperBound + ' ' + unit;
    }

    // Show the configured tier price directly instead of multiplying by a sample duration.
    var totalPrice = pricePerUnit;

    rows += '<tr>' +
      '<td><strong>' + durationLabel + '</strong></td>' +
      '<td><span class="badge bg-label-success">$' + pricePerUnit.toFixed(2) + '</span></td>' +
      '<td><strong>$' + totalPrice.toFixed(2) + '</strong></td>' +
    '</tr>';
  });

  tbody.innerHTML = rows;
  previewContainer.style.display = '';
}

// Update preview when base price changes
document.getElementById('base_price').addEventListener('change', renderDurationPricingPreview);
document.getElementById('base_price').addEventListener('input', renderDurationPricingPreview);
</script>
@endsection