@extends('crm.master')

@section('title', 'Assets')

@php
  $statusLabels = [
    'enabled' => 'Enabled',
    'disabled' => 'Disabled',
    'all' => 'All',
    'active' => 'Enabled',
    'inactive' => 'Disabled',
  ];
@endphp

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

  <div class="assets-header">
    <div>
      <h4 class="assets-title">Assets</h4>
      <p class="assets-subtitle">Manage asset pools, availability, capacity, and maintenance time.</p>
    </div>
    <button type="button" class="btn btn-primary assets-add-btn" data-bs-toggle="modal" data-bs-target="#createModal">
      <i class="icon-base ti tabler-plus me-2 icon-14px"></i>
      Add Asset
    </button>
  </div>

  <div class="assets-tabs">
    <a href="{{ route('crm.products.index') }}" class="assets-tab">Products</a>
    <a href="{{ route('crm.assets.index') }}" class="assets-tab assets-tab--active">Assets</a>
  </div>

  <div class="assets-toolbar-card">
    <form method="GET" action="{{ route('crm.assets.index') }}" class="row g-3 align-items-end">
      <div class="col-lg-4 col-md-6">
        <label class="assets-filter-label">Category Filter</label>
        <select name="category" class="form-select assets-filter-select">
          <option value="">Select...</option>
          @foreach($filterCategories as $cat)
            <option value="{{ $cat->id }}" {{ (string) $category === (string) $cat->id ? 'selected' : '' }}>
              {{ $cat->name }}
            </option>
          @endforeach
        </select>
      </div>
      <div class="col-lg-3 col-md-6">
        <label class="assets-filter-label">Show</label>
        <select name="status" class="form-select assets-filter-select">
          <option value="enabled" {{ $status === 'enabled' || $status === 'active' ? 'selected' : '' }}>Enabled</option>
          <option value="disabled" {{ $status === 'disabled' || $status === 'inactive' ? 'selected' : '' }}>Disabled</option>
          <option value="all" {{ $status === 'all' ? 'selected' : '' }}>All</option>
        </select>
      </div>
      <div class="col-lg-4 col-md-8">
        <label class="assets-filter-label">Search</label>
        <div class="assets-search-wrap">
          <input type="text" name="search" class="form-control assets-search-input" placeholder="Search asset pools or categories" value="{{ $search }}">
          <i class="ti tabler-search assets-search-icon"></i>
        </div>
      </div>
      <div class="col-lg-1 col-md-4">
        <div class="assets-toolbar-actions">
          <button type="submit" class="btn btn-secondary w-100">Apply</button>
        </div>
      </div>
    </form>
  </div>

  <div class="card crm-grid-card assets-table-card">
    <div class="assets-card-header">
      <div>
        <h5 class="assets-card-title">Asset Pools</h5>
        <p class="assets-card-subtitle">Each row represents one asset pool in the current system.</p>
      </div>
      <span class="assets-count-badge">{{ $assets->count() }} {{ \Illuminate\Support\Str::plural('Pool', $assets->count()) }}</span>
    </div>

    <div class="table-responsive crm-grid-wrap">
      @include('crm.components.alerts')

      <table class="table crm-grid-table assets-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Category</th>
            <th>Distribution</th>
            <th class="text-end">Quantity</th>
            <th class="text-end">Capacity</th>
            <th class="text-end">Total</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          @forelse($assets as $asset)
            @php
              $isShared = (int) $asset->capacity > 1;
              $maintenanceEnabled = (int) $asset->maintenance_time_hours > 0 || (int) $asset->maintenance_time_minutes > 0;
            @endphp
            <tr>
              <td data-label="Name">
                <div class="assets-name-cell">
                  <button type="button" class="assets-pool-link" data-bs-toggle="modal" data-bs-target="#editModal{{ $asset->hash_id }}">
                    <span class="assets-pool-chevron"><i class="ti tabler-chevron-right"></i></span>
                    <span>
                      <span class="assets-pool-name">{{ $asset->name }}</span>
                      <span class="assets-pool-meta">
                        {{ $asset->status === 'active' ? 'Enabled' : 'Disabled' }}
                        @if($maintenanceEnabled)
                          <span class="assets-dot"></span>
                          Maintenance enabled
                        @endif
                      </span>
                    </span>
                  </button>
                </div>
              </td>
              <td data-label="Category">
                <div class="assets-category-cell">
                  <span class="assets-category-name">{{ $asset->category->name ?? '-' }}</span>
                  <span class="assets-category-meta">Asset category</span>
                </div>
              </td>
              <td data-label="Distribution">
                <div class="assets-distribution-cell">
                  <span class="assets-distribution-pill {{ $isShared ? 'assets-distribution-pill--shared' : 'assets-distribution-pill--private' }}">
                    {{ $isShared ? 'Capacity' : 'Quantity' }}
                  </span>
                  <span class="assets-distribution-meta">{{ $isShared ? 'Shared inventory' : 'Private inventory' }}</span>
                </div>
              </td>
              <td data-label="Quantity" class="text-end assets-num">{{ number_format($asset->quantity) }}</td>
              <td data-label="Capacity" class="text-end assets-num">{{ number_format($asset->capacity) }}</td>
              <td data-label="Total" class="text-end assets-total">{{ number_format($asset->total) }}</td>
              <td data-label="Actions">
                <div class="assets-actions">
                  <button type="button" class="btn btn-sm btn-label-primary" data-bs-toggle="modal" data-bs-target="#editModal{{ $asset->hash_id }}">
                    <i class="ti tabler-edit me-1"></i> Edit
                  </button>
                </div>
              </td>
            </tr>

            <div class="modal fade assets-modal" id="editModal{{ $asset->hash_id }}" tabindex="-1" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <div>
                      <h5 class="modal-title">{{ $asset->name }}</h5>
                      <p class="assets-modal-subtitle">Edit asset pool details, capacity, and maintenance settings.</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                  </div>
                  <form action="{{ route('crm.assets.update', $asset->hash_id) }}" method="POST" class="asset-form">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                      <div class="row g-3">
                        <div class="col-12">
                          <label class="form-label">Name <span class="text-danger">*</span></label>
                          <input type="text" class="form-control" name="name" maxlength="100" value="{{ $asset->name }}" required>
                        </div>
                        <div class="col-md-8">
                          <label class="form-label">Asset Category <span class="text-danger">*</span></label>
                          <select name="asset_category_id" class="form-select" required>
                            <option value="">Select...</option>
                            @foreach($categories as $cat)
                              <option value="{{ $cat->id }}" {{ (string) $asset->asset_category_id === (string) $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                              </option>
                            @endforeach
                          </select>
                        </div>
                        <div class="col-md-4">
                          <label class="form-label">Status <span class="text-danger">*</span></label>
                          <select name="status" class="form-select" required>
                            <option value="active" {{ $asset->status === 'active' ? 'selected' : '' }}>Enabled</option>
                            <option value="inactive" {{ $asset->status === 'inactive' ? 'selected' : '' }}>Disabled</option>
                          </select>
                        </div>

                        <div class="col-md-4 assets-create-metric">
                          <label class="form-label">Quantity: Total assets <span class="text-danger">*</span></label>
                          <div class="input-group assets-stepper">
                            <input type="number" class="form-control asset-quantity" name="quantity" min="1" value="{{ $asset->quantity }}" required>
                            <span class="input-group-text assets-stepper-controls">
                              <button type="button" class="assets-stepper-btn" data-step-target="quantity" data-step-delta="1" aria-label="Increase quantity"><i class="ti tabler-plus"></i></button>
                              <button type="button" class="assets-stepper-btn" data-step-target="quantity" data-step-delta="-1" aria-label="Decrease quantity"><i class="ti tabler-minus"></i></button>
                            </span>
                          </div>
                        </div>
                        <div class="col-md-4 assets-create-metric">
                          <label class="form-label">Capacity: Total seats <span class="text-danger">*</span></label>
                          <div class="input-group assets-stepper">
                            <input type="number" class="form-control asset-capacity" name="capacity" min="1" value="{{ $asset->capacity }}" required>
                            <span class="input-group-text assets-stepper-controls">
                              <button type="button" class="assets-stepper-btn" data-step-target="capacity" data-step-delta="1" aria-label="Increase capacity"><i class="ti tabler-plus"></i></button>
                              <button type="button" class="assets-stepper-btn" data-step-target="capacity" data-step-delta="-1" aria-label="Decrease capacity"><i class="ti tabler-minus"></i></button>
                            </span>
                          </div>
                        </div>
                        <div class="col-md-4 assets-create-metric">
                          <label class="form-label">Total</label>
                          <input type="text" class="form-control asset-total assets-total-readonly" value="{{ $asset->quantity * $asset->capacity }}" readonly>
                        </div>

                        <div class="col-12">
                          <div class="assets-formula-bar">
                            <span class="assets-formula-pill asset-formula-quantity">{{ number_format($asset->quantity) }}</span>
                            <span class="assets-formula-text">Total assets</span>
                            <span class="assets-formula-operator">x</span>
                            <span class="assets-formula-pill asset-formula-capacity">{{ number_format($asset->capacity) }}</span>
                            <span class="assets-formula-text">Total seats</span>
                            <span class="assets-formula-operator">=</span>
                            <span class="assets-formula-pill assets-formula-pill--primary asset-formula-total">{{ number_format($asset->quantity * $asset->capacity) }}</span>
                            <span class="assets-formula-text fw-semibold">Total</span>
                          </div>
                        </div>

                        <div class="col-12">
                            <div class="assets-maintenance-card">
                              <div class="assets-maintenance-card__header">
                                <div>
                                  <h6 class="assets-maintenance-card__title">Maintenance Time</h6>
                                  <p class="assets-maintenance-card__subtitle">Allow downtime before the next booking for prep, cleaning, or servicing.</p>
                                </div>
                              </div>
                            <div class="col-12 asset-maintenance-fields">
                              <div class="row g-3 mt-1">
                                <div class="col-sm-6">
                                  <label class="form-label">Hours</label>
                                  <input type="number" class="form-control asset-maintenance-hours" name="maintenance_time_hours" min="0" max="10000" step="1" value="{{ $asset->maintenance_time_hours }}">
                                </div>
                                <div class="col-sm-6">
                                  <label class="form-label">Minutes</label>
                                  <input type="number" class="form-control asset-maintenance-minutes" name="maintenance_time_minutes" min="0" max="59" step="1" value="{{ $asset->maintenance_time_minutes }}">
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                      <button type="button" class="btn btn-link text-danger px-0"
                        onclick="if(confirm('Archive this asset pool?')) document.getElementById('deleteAssetForm{{ $asset->hash_id }}').submit();">
                        Archive
                      </button>
                      <div class="d-flex gap-2">
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                      </div>
                    </div>
                  </form>
                  <form id="deleteAssetForm{{ $asset->hash_id }}" action="{{ route('crm.assets.destroy', $asset->hash_id) }}" method="POST" class="d-none">
                    @csrf
                    @method('DELETE')
                  </form>
                </div>
              </div>
            </div>
          @empty
            <tr>
              <td colspan="7" class="text-center">
                <div class="assets-empty-state">
                  <div class="assets-empty-icon">
                    <i class="ti tabler-package"></i>
                  </div>
                  <h5>No Asset Pools</h5>
                  <p>Once added, asset pools will show up here with quantity, capacity, and total availability.</p>
                  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
                    <i class="icon-base ti tabler-plus me-2 icon-14px"></i>
                    Add Asset
                  </button>
                </div>
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

</div>

<div class="modal fade assets-modal" id="createModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content assets-create-modal">
      <div class="modal-header">
        <div class="assets-create-modal__header-copy">
          <h5 class="modal-title">Create Assets</h5>
          <p class="assets-modal-subtitle">Add a new asset pool with quantity, capacity, and optional maintenance time.</p>
        </div>
        <div class="d-flex align-items-center gap-2">
          <a
            href="https://support.checkfront.com/hc/en-us/articles/360035623434"
            target="_blank"
            rel="noopener noreferrer"
            class="btn btn-sm btn-icon btn-label-secondary assets-help-link"
            title="Asset Builder Help"
          >
            <i class="ti tabler-help-circle"></i>
          </a>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
      </div>
      <form action="{{ route('crm.assets.store') }}" method="POST" class="asset-form">
        @csrf
        <div class="modal-body">
          <div class="row g-4">
            <div class="col-12">
              <label class="form-label d-flex justify-content-between align-items-center gap-3">
                <span>Name <span class="text-danger">*</span></span>
                <small class="text-muted"><span class="asset-name-count">{{ strlen(old('name', '')) }}</span> / 100</small>
              </label>
              <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" maxlength="100" value="{{ old('name') }}" placeholder="e.g. Single Kayaks" required>
              @error('name') <span class="invalid-feedback">{{ $message }}</span> @enderror
            </div>
            <div class="col-md-8">
              <label class="form-label">Asset Category <span class="text-danger">*</span></label>
              <div class="assets-create-help mb-2">
                <div>Select or create a category of your asset.</div>
                <div>Ex. Category: Boats, Name of an Asset: Kayaks, Canoes, etc.</div>
              </div>
              <select name="asset_category_id" class="form-select @error('asset_category_id') is-invalid @enderror" required>
                <option value="">Select...</option>
                @foreach($categories as $cat)
                  <option value="{{ $cat->id }}" {{ old('asset_category_id') == $cat->id ? 'selected' : '' }}>
                    {{ $cat->name }}
                  </option>
                @endforeach
              </select>
              @error('asset_category_id') <span class="invalid-feedback">{{ $message }}</span> @enderror
            </div>
            <div class="col-md-4">
              <label class="form-label">Status <span class="text-danger">*</span></label>
              <select name="status" class="form-select" required>
                <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Enabled</option>
                <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Disabled</option>
              </select>
            </div>

            <div class="col-md-4 assets-create-metric">
              <label class="form-label">Quantity: Total assets <span class="text-danger">*</span></label>
              <div class="input-group assets-stepper">
                <input type="number" class="form-control asset-quantity @error('quantity') is-invalid @enderror" name="quantity" min="1" value="{{ old('quantity', 1) }}" required>
                <span class="input-group-text assets-stepper-controls">
                  <button type="button" class="assets-stepper-btn" data-step-target="quantity" data-step-delta="1" aria-label="Increase quantity">
                    <i class="ti tabler-plus"></i>
                  </button>
                  <button type="button" class="assets-stepper-btn" data-step-target="quantity" data-step-delta="-1" aria-label="Decrease quantity">
                    <i class="ti tabler-minus"></i>
                  </button>
                </span>
              </div>
              @error('quantity') <span class="invalid-feedback">{{ $message }}</span> @enderror
            </div>
            <div class="col-md-4 assets-create-metric">
              <label class="form-label">Capacity: Total seats <span class="text-danger">*</span></label>
              <div class="input-group assets-stepper">
                <input type="number" class="form-control asset-capacity @error('capacity') is-invalid @enderror" name="capacity" min="1" value="{{ old('capacity', 1) }}" required>
                <span class="input-group-text assets-stepper-controls">
                  <button type="button" class="assets-stepper-btn" data-step-target="capacity" data-step-delta="1" aria-label="Increase capacity">
                    <i class="ti tabler-plus"></i>
                  </button>
                  <button type="button" class="assets-stepper-btn" data-step-target="capacity" data-step-delta="-1" aria-label="Decrease capacity">
                    <i class="ti tabler-minus"></i>
                  </button>
                </span>
              </div>
              @error('capacity') <span class="invalid-feedback">{{ $message }}</span> @enderror
            </div>
            <div class="col-md-4 assets-create-metric">
              <label class="form-label">Total</label>
              <input type="text" class="form-control asset-total assets-total-readonly" value="{{ old('quantity', 1) * old('capacity', 1) }}" readonly>
              <small class="assets-total-help">Auto-calculated when Total assets or Total seats changes.</small>
            </div>
            <div class="col-12">
              <div class="assets-formula-bar">
                <span class="assets-formula-pill asset-formula-quantity">{{ number_format(old('quantity', 1)) }}</span>
                <span class="assets-formula-text">Total assets</span>
                <span class="assets-formula-operator">x</span>
                <span class="assets-formula-pill asset-formula-capacity">{{ number_format(old('capacity', 1)) }}</span>
                <span class="assets-formula-text">Total seats</span>
                <span class="assets-formula-operator">=</span>
                <span class="assets-formula-pill assets-formula-pill--primary asset-formula-total">{{ number_format(old('quantity', 1) * old('capacity', 1)) }}</span>
                <span class="assets-formula-text fw-semibold">Total</span>
              </div>
            </div>

            <div class="col-12">
              <div class="assets-illustration-card assets-create-illustration">
                <div class="assets-create-illustration__panel">
                  <div class="assets-create-illustration__stat">
                    <span class="assets-illustration-label">Quantity</span>
                    <strong class="assets-illustration-value asset-quantity-preview">{{ number_format(old('quantity', 1)) }}</strong>
                    <span class="assets-create-illustration__hint">Total assets in the pool</span>
                  </div>
                  <div class="assets-create-illustration__icon assets-create-illustration__icon--vehicle">
                    <i class="ti tabler-car"></i>
                  </div>
                </div>
                <div class="assets-create-illustration__connector">
                  <span></span>
                  <i class="ti tabler-arrows-down-up"></i>
                  <span></span>
                </div>
                <div class="assets-create-illustration__panel">
                  <div class="assets-create-illustration__stat">
                    <span class="assets-illustration-label">Capacity</span>
                    <strong class="assets-illustration-value asset-capacity-preview">{{ number_format(old('capacity', 1)) }}</strong>
                    <span class="assets-create-illustration__hint">Seats or spaces per asset</span>
                  </div>
                  <div class="assets-create-illustration__icon assets-create-illustration__icon--people">
                    <i class="ti tabler-users"></i>
                  </div>
                </div>
                <div class="assets-create-illustration__summary">
                  <span class="assets-illustration-label">Total availability</span>
                  <strong class="assets-illustration-value asset-total-preview">{{ number_format(old('quantity', 1) * old('capacity', 1)) }}</strong>
                  <span class="assets-create-illustration__hint">Calculated automatically from quantity x capacity</span>
                </div>
              </div>
            </div>

            <div class="col-12">
              <div class="assets-maintenance-card">
                <div class="assets-maintenance-card__header">
                  <div>
                    <h6 class="assets-maintenance-card__title">Maintenance Time</h6>
                    <p class="assets-maintenance-card__subtitle">Allow downtime before the next booking for prep, cleaning, or servicing.</p>
                  </div>
                </div>
                <div class="col-12 asset-maintenance-fields">
                  <div class="row g-3 mt-1">
                    <div class="col-sm-6">
                      <label class="form-label">Hours</label>
                      <input type="number" class="form-control asset-maintenance-hours" name="maintenance_time_hours" min="0" max="10000" step="1" value="{{ old('maintenance_time_hours', 0) }}">
                    </div>
                    <div class="col-sm-6">
                      <label class="form-label">Minutes</label>
                      <input type="number" class="form-control asset-maintenance-minutes" name="maintenance_time_minutes" min="0" max="59" step="1" value="{{ old('maintenance_time_minutes', 0) }}">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('page-script')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    function bindAssetForm(form) {
      if (!form || form.dataset.assetBound === '1') {
        return;
      }

      form.dataset.assetBound = '1';

      var qty = form.querySelector('.asset-quantity');
      var cap = form.querySelector('.asset-capacity');
      var total = form.querySelector('.asset-total');
      var qtyPreview = form.querySelector('.asset-quantity-preview');
      var capPreview = form.querySelector('.asset-capacity-preview');
      var totalPreview = form.querySelector('.asset-total-preview');
      var qtyFormula = form.querySelector('.asset-formula-quantity');
      var capFormula = form.querySelector('.asset-formula-capacity');
      var totalFormula = form.querySelector('.asset-formula-total');
      var nameField = form.querySelector('input[name="name"]');
      var nameCount = form.querySelector('.asset-name-count');
      var maintenanceCheckbox = null;
      var maintenanceFields = form.querySelector('.asset-maintenance-fields');
      var maintenanceHours = form.querySelector('.asset-maintenance-hours');
      var maintenanceMinutes = form.querySelector('.asset-maintenance-minutes');

      function getSanitizedInt(input, fallback, min, max) {
        if (!input) return fallback;

        var value = parseInt(input.value, 10);

        if (Number.isNaN(value)) {
          value = fallback;
        }

        if (typeof min === 'number') value = Math.max(min, value);
        if (typeof max === 'number') value = Math.min(max, value);

        return value;
      }

      function updateTotals() {
        var q = getSanitizedInt(qty, 1, 1);
        var c = getSanitizedInt(cap, 1, 1);
        var computed = q * c;

        if (total) total.value = computed;

        if (qtyPreview) qtyPreview.textContent = q.toLocaleString();
        if (capPreview) capPreview.textContent = c.toLocaleString();
        if (totalPreview) totalPreview.textContent = computed.toLocaleString();
        if (qtyFormula) qtyFormula.textContent = q.toLocaleString();
        if (capFormula) capFormula.textContent = c.toLocaleString();
        if (totalFormula) totalFormula.textContent = computed.toLocaleString();
      }

      function normalizePrimaryInputs() {
        if (qty) qty.value = getSanitizedInt(qty, 1, 1);
        if (cap) cap.value = getSanitizedInt(cap, 1, 1);
        updateTotals();
      }

      function updateNameCount() {
        if (!nameField || !nameCount) return;
        nameCount.textContent = (nameField.value || '').length;
      }

      function syncMaintenance() {
        if (!maintenanceFields || !maintenanceCheckbox) return;

        var enabled = maintenanceCheckbox.checked;

        if (maintenanceFields.classList.contains('assets-maintenance-fields--always-visible')) {
          maintenanceFields.classList.toggle('assets-maintenance-fields--inactive', !enabled);
        } else {
          maintenanceFields.classList.toggle('d-none', !enabled);
        }

        // Never use disabled — it prevents form submission.
        // Clear values to 0 when toggled off so the server receives 0.
        if (!enabled) {
          if (maintenanceHours)  { maintenanceHours.value  = 0; }
          if (maintenanceMinutes){ maintenanceMinutes.value = 0; }
        }
      }

      if (qty) qty.addEventListener('input', updateTotals);
      if (qty) qty.addEventListener('change', updateTotals);
      if (qty) qty.addEventListener('blur', normalizePrimaryInputs);
      if (cap) cap.addEventListener('input', updateTotals);
      if (cap) cap.addEventListener('change', updateTotals);
      if (cap) cap.addEventListener('blur', normalizePrimaryInputs);
      if (nameField) nameField.addEventListener('input', updateNameCount);
      if (maintenanceCheckbox) maintenanceCheckbox.addEventListener('change', syncMaintenance);

      form._assetUpdateTotals = updateTotals;
      form._assetNormalizePrimaryInputs = normalizePrimaryInputs;

      updateTotals();
      updateNameCount();
      syncMaintenance();
    }

    document.querySelectorAll('.asset-form').forEach(function (form) {
      bindAssetForm(form);
    });

    document.addEventListener('shown.bs.modal', function (event) {
      var modal = event.target;
      if (!modal) return;

      var form = modal.querySelector('.asset-form');
      bindAssetForm(form);

      if (form) {
        var qty = form.querySelector('.asset-quantity');
        var cap = form.querySelector('.asset-capacity');
        if (qty) qty.dispatchEvent(new Event('input', { bubbles: true }));
        if (cap) cap.dispatchEvent(new Event('input', { bubbles: true }));
      }
    });

    document.addEventListener('click', function (event) {
      var button = event.target.closest('.assets-stepper-btn');
      if (!button) return;

      var form = button.closest('.asset-form');
      if (!form) return;

      var targetName = button.getAttribute('data-step-target');
      var delta = parseInt(button.getAttribute('data-step-delta'), 10) || 0;
      var input = form.querySelector('[name="' + targetName + '"]');

      if (!input) {
        if (targetName === 'quantity') input = form.querySelector('.asset-quantity');
        if (targetName === 'capacity') input = form.querySelector('.asset-capacity');
      }

      if (!input) return;

      var min = input.min !== '' ? parseInt(input.min, 10) : null;
      var max = input.max !== '' ? parseInt(input.max, 10) : null;
      var current = parseInt(input.value || 0, 10) || 0;
      var next = current + delta;

      if (min !== null) next = Math.max(min, next);
      if (max !== null) next = Math.min(max, next);

      input.value = next;
      input.dispatchEvent(new Event('input', { bubbles: true }));
      input.dispatchEvent(new Event('change', { bubbles: true }));
    });

    document.addEventListener('input', function (event) {
      if (!event.target.matches('.asset-quantity, .asset-capacity')) return;

      var form = event.target.closest('.asset-form');
      if (form && typeof form._assetUpdateTotals === 'function') {
        form._assetUpdateTotals();
      }
    });

    document.addEventListener('change', function (event) {
      if (!event.target.matches('.asset-quantity, .asset-capacity')) return;

      var form = event.target.closest('.asset-form');
      if (form && typeof form._assetNormalizePrimaryInputs === 'function') {
        form._assetNormalizePrimaryInputs();
      }
    });

    @if($errors->any())
      new bootstrap.Modal(document.getElementById('createModal')).show();
    @endif
  });
</script>

<style>
.assets-page {
  --assets-border: #e6ebf2;
  --assets-muted: #6b7280;
  --assets-soft: #f8fafc;
}

.assets-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.assets-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: #172554;
}

.assets-subtitle,
.assets-card-subtitle,
.assets-modal-subtitle {
  margin: 6px 0 0;
  color: var(--assets-muted);
  font-size: 0.92rem;
}

.assets-add-btn {
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.assets-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--assets-border);
}

.assets-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 2px 12px;
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 600;
}

.assets-tab:hover,
.assets-tab:focus {
  color: #2563eb;
}

.assets-tab--active {
  color: #2563eb;
}

.assets-tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: #2563eb;
}

.assets-toolbar-card,
.assets-table-card {
  background: #fff;
  border: 1px solid var(--assets-border);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.assets-toolbar-card {
  padding: 16px 18px;
  margin-bottom: 18px;
}

.assets-filter-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #334155;
}

.assets-filter-select,
.assets-search-input,
.assets-modal input.form-control,
.assets-modal select.form-select {
  min-height: 42px;
  border-radius: 12px;
  border-color: #d7dfeb;
  font-size: 0.92rem;
}

.assets-search-wrap {
  position: relative;
}

.assets-search-input {
  padding-right: 42px;
}

.assets-search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1rem;
}

.assets-toolbar-actions {
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.assets-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 10px;
}

.assets-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

.assets-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 700;
}

.assets-table {
  min-width: 920px;
}

.assets-table thead th {
  background: #f8fafc;
  color: #334155;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--assets-border);
  padding: 13px 14px;
}

.assets-table tbody td {
  padding: 15px 14px;
  font-size: 0.9rem;
  vertical-align: middle;
}

.assets-table tbody tr:nth-child(even) td {
  background: #fcfdff;
}

.assets-table tbody tr:hover td {
  background: #f8fbff;
}

.assets-name-cell,
.assets-category-cell,
.assets-distribution-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.assets-pool-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.assets-pool-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #94a3b8;
}

.assets-pool-name {
  display: block;
  color: #0f172a;
  font-weight: 700;
}

.assets-pool-meta,
.assets-category-meta,
.assets-distribution-meta {
  display: block;
  color: var(--assets-muted);
  font-size: 0.78rem;
}

.assets-category-name {
  color: #475569;
  font-weight: 600;
}

.assets-distribution-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

.assets-distribution-pill--private {
  background: #e0f2fe;
  color: #0369a1;
}

.assets-distribution-pill--shared {
  background: #ede9fe;
  color: #6d28d9;
}

.assets-num {
  color: #334155;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.assets-total {
  color: #0f172a;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.assets-actions {
  display: flex;
  justify-content: flex-start;
}

.assets-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 6px;
  border-radius: 999px;
  background: #cbd5e1;
  vertical-align: middle;
}

.assets-empty-state {
  padding: 48px 16px;
}

.assets-empty-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 1.8rem;
}

.assets-empty-state h5 {
  margin-bottom: 6px;
  font-weight: 700;
}

.assets-empty-state p {
  color: var(--assets-muted);
  margin-bottom: 16px;
}

.assets-modal .modal-content {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
}

.assets-modal .modal-header,
.assets-modal .modal-footer {
  border-color: var(--assets-border);
  padding: 18px 22px;
}

.assets-modal .modal-body {
  padding: 22px;
}

.assets-create-modal .modal-header {
  align-items: flex-start;
}

.assets-create-modal__header-copy {
  max-width: 80%;
}

.assets-help-link {
  width: 34px;
  height: 34px;
  border-radius: 999px;
}

.assets-create-help {
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.5;
}

.assets-create-metric .form-label {
  min-height: 40px;
}

.assets-stepper {
  overflow: hidden;
  border-radius: 12px;
}

.assets-stepper .form-control {
  border-right: 0;
}

.assets-stepper-controls {
  padding: 0;
  background: #f8fafc;
  border-color: #d7dfeb;
}

.assets-stepper-btn {
  width: 32px;
  height: 20px;
  border: 0;
  background: transparent;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.assets-stepper-btn + .assets-stepper-btn {
  border-top: 1px solid #d7dfeb;
}

.assets-stepper-btn:hover {
  background: #eef4ff;
  color: #1d4ed8;
}

.assets-total-readonly {
  background: #f8fafc;
  font-weight: 700;
  color: #0f172a;
}

.assets-total-help {
  display: inline-block;
  margin-top: 6px;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.4;
}

.assets-formula-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed #d7dfeb;
  border-radius: 14px;
  background: #fbfdff;
}

.assets-formula-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.assets-formula-pill--primary {
  background: #dbeafe;
  color: #1d4ed8;
}

.assets-formula-text {
  color: #475569;
  font-size: 0.92rem;
}

.assets-formula-operator {
  color: #94a3b8;
  font-size: 1rem;
  font-weight: 800;
}

.assets-illustration-card {
  border: 1px solid #e7edf5;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
  padding: 18px;
}

.assets-create-illustration {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.assets-create-illustration__panel,
.assets-create-illustration__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.assets-create-illustration__summary {
  grid-column: 1 / -1;
}

.assets-create-illustration__stat {
  display: flex;
  flex-direction: column;
}

.assets-create-illustration__hint {
  margin-top: 6px;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.45;
}

.assets-create-illustration__icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.assets-create-illustration__icon--vehicle {
  background: #dbeafe;
  color: #2563eb;
}

.assets-create-illustration__icon--people {
  background: #ede9fe;
  color: #7c3aed;
}

.assets-create-illustration__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #94a3b8;
}

.assets-create-illustration__connector span {
  width: 1px;
  height: 30px;
  background: #cbd5e1;
}

.assets-illustration-copy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.assets-illustration-label {
  display: block;
  margin-bottom: 6px;
  color: var(--assets-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.assets-illustration-value {
  display: block;
  color: #0f172a;
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.assets-maintenance-toggle {
  padding: 12px 14px;
  border: 1px solid var(--assets-border);
  border-radius: 14px;
  background: #fbfdff;
}

.assets-maintenance-toggle .form-check-label {
  font-weight: 600;
  color: #334155;
}

.assets-maintenance-card {
  border-top: 1px solid var(--assets-border);
  padding-top: 20px;
}

.assets-maintenance-fields--inactive {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

.assets-maintenance-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.assets-maintenance-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.assets-maintenance-card__subtitle {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.9rem;
}

@media (max-width: 991.98px) {
  .assets-header,
  .assets-card-header {
    flex-direction: column;
    align-items: stretch;
  }

  .assets-create-illustration {
    grid-template-columns: 1fr;
  }

  .assets-create-illustration__connector {
    flex-direction: row;
  }

  .assets-create-illustration__connector span {
    width: 30px;
    height: 1px;
  }

  .assets-illustration-copy {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .assets-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .assets-title {
    font-size: 1.6rem;
  }

  .assets-maintenance-card__header {
    flex-direction: column;
  }

  .assets-table,
  .assets-table thead,
  .assets-table tbody,
  .assets-table th,
  .assets-table td,
  .assets-table tr {
    display: block;
  }

  .assets-table {
    min-width: 100%;
  }

  .assets-table thead {
    display: none;
  }

  .assets-table tbody tr {
    margin: 0 12px 12px;
    border: 1px solid var(--assets-border);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }

  .assets-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f7;
    text-align: right !important;
  }

  .assets-table tbody td:last-child {
    border-bottom: 0;
  }

  .assets-table tbody td::before {
    content: attr(data-label);
    color: #475569;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
  }

  .assets-name-cell,
  .assets-category-cell,
  .assets-distribution-cell,
  .assets-actions {
    align-items: flex-end;
  }

  .assets-pool-link {
    justify-content: flex-end;
  }
}
</style>
@endsection