@extends('layouts.app')

@section('title', 'Warehouse Masters')

@section('content')
<div class="card mb-3" id="warehousesTableCard" data-list='{"valueNames":["warehouse_code","warehouse_name","company","status","created_at"],"page":10,"pagination":true}'>
  <div class="card-header">
    <div class="row flex-between-center">
      <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
        <h5 class="fs-9 mb-0 text-nowrap py-2 py-xl-0">Warehouse Masters</h5>
      </div>
      <div class="col-8 col-sm-auto text-end ps-2">
        <div class="d-none" id="table-warehouses-actions">
          <div class="d-flex">
            <select class="form-select form-select-sm" aria-label="Bulk actions">
              <option value="">Bulk actions</option>
              <option value="activate">Activate</option>
              <option value="deactivate">Deactivate</option>
              <option value="delete">Delete</option>
              <option value="export">Export Selected</option>
            </select>
            <button class="btn btn-falcon-default btn-sm ms-2" type="button" id="applyBulkWarehouseActions">Apply</button>
          </div>
        </div>
        <div id="table-warehouses-replace-element">
          @can('masters-organization-warehouse-masters.create')
          <button class="btn btn-falcon-default btn-sm" type="button" id="addWarehouseBtn" data-bs-toggle="offcanvas" data-bs-target="#warehouseFormOffcanvas" aria-controls="warehouseFormOffcanvas">
            <span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">New</span>
          </button>
          @endcan
           <!--@can('masters-organization-warehouse-masters.import')
          <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#importWarehouseModal">
            <span class="fas fa-file-import" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">Import</span>
          </button>
          @endcan-->
          <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#warehouseFilters">
            <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">Filter</span>
          </button>
           <!--@can('masters-organization-warehouse-masters.export')
          <button class="btn btn-falcon-default btn-sm" type="button" id="exportWarehouses">
            <span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">Export</span>
          </button>
          @endcan-->
        </div>
      </div>
    </div>
  </div>

  <!-- Advanced Filters (Collapsible) -->
  <div class="collapse" id="warehouseFilters">
    <div class="card-body border-top fs-10">
      <div class="row g-3">
        <form id="warehouseFilterForm" class="row gy-2 gx-2 align-items-end">
          <div class="col-auto">
            <select id="filter_company_id" class="form-select form-select-sm" name="company_id">
              <option value="">All Companies</option>
            </select>
          </div>
          <div class="col-auto">
            <select id="filter_status" class="form-select form-select-sm" name="status">
              <option value="">Any Status</option>
              <option value="ACTIVE">Active</option>
              <option value="INACTIVE">Inactive</option>
              <option value="MAINTENANCE">Maintenance</option>
            </select>
          </div>
          <div class="col-auto">
            <input id="filter_search" type="text" class="form-control form-control-sm" placeholder="Code / Name" name="search">
          </div>
          <div class="col-auto">
            <button class="btn btn-primary btn-sm me-2" type="button" id="applyWarehouseFilters"><i class="fas fa-search"></i> Apply</button>
            <button class="btn btn-outline-secondary btn-sm" type="button" id="clearWarehouseFilters"> <i class="fas fa-times"></i> Clear</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive scrollbar" style="height:calc(100vh - 180px);max-height:calc(100vh - 180px); overflow:auto;">
      <table class="table table-sm table-striped fs-10 mb-0 overflow-hidden">
        <thead class="bg-200">
          <tr>
            <th style="width:28px;">
              <div class="form-check fs-9 mb-0 d-flex align-items-center">
                <input class="form-check-input" id="checkbox-bulk-warehouses-select" type="checkbox" />
              </div>
            </th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="warehouse_code">Code</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="warehouse_name">Name</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="company">Company</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="status">Status</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="created_at">Created</th>
            <th class="align-middle no-sort"></th>
          </tr>
        </thead>
        <tbody class="list" id="table-warehouses-body">
          <tr class="btn-reveal-trigger">
            <td class="align-middle py-2" style="width: 28px;">
              <div class="form-check fs-9 mb-0 d-flex align-items-center"></div>
            </td>
            <td class="warehouse_code align-middle white-space-nowrap py-2"></td>
            <td class="warehouse_name align-middle py-2"></td>
            <td class="company align-middle py-2"></td>
            <td class="status align-middle py-2"></td>
            <td class="created_at align-middle py-2"></td>
            <td class="align-middle white-space-nowrap py-2 text-end">
              <div class="dropdown font-sans-serif position-static"></div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>

<!-- Offcanvas Form -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="warehouseFormOffcanvas" aria-labelledby="warehouseFormOffcanvasLabel">
  <div class="offcanvas-header bg-light offcanvas-header-polished">
    <h5 class="offcanvas-title" id="warehouseFormOffcanvasLabel"><span class="fas fa-warehouse me-2"></span><span id="warehouseFormTitle">New Warehouse</span></h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body p-0 d-flex flex-column form-standard">
    <div class="form-scroll-container flex-grow-1 p-3">
  <div class="card h-100 border-0 d-flex flex-column">
        <div class="card-body py-3 overflow-auto">
           <div class="px-sm-2 px-md-4">
          <form id="warehouseForm" class="needs-validation" novalidate>
            @csrf
            <input type="hidden" name="_method" id="warehouseFormMethod" value="POST">
            <input type="hidden" name="id" id="warehouse_id" />

            <div class="mb-3">
              <div class="row g-3">
                <div class="col-12">
                  <label class="form-label" for="war_company_id">Company <span class="text-danger">*</span></label>
                  <select id="war_company_id" name="company_id" class="form-select" required>
                    <option value="">Select company</option>
                  </select>
                  <div class="invalid-feedback">Please select a company</div>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="warehouse_code">Warehouse Code <span class="text-danger">*</span></label>
                  <input id="warehouse_code" name="warehouse_code" type="text" class="form-control" maxlength="50" placeholder="e.g., WH-MUM-001" required />
                  <div class="form-text">Max 50 characters. Use a consistent code like WH-LOC-###.</div>
                  <div class="invalid-feedback">Please enter warehouse code</div>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="warehouse_name">Warehouse Name <span class="text-danger">*</span></label>
                  <input id="warehouse_name" name="warehouse_name" type="text" class="form-control" placeholder="e.g., Mumbai Central Warehouse" required />
                  <div class="invalid-feedback">Please enter warehouse name</div>
                </div>
              </div>
            </div>

            <div class="mb-3">
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label" for="warehouse_function">Warehouse Function <span class="text-danger">*</span></label>
                  <select id="warehouse_function" name="warehouse_function" class="form-select" required>
                    <option value="GENERAL">General</option>
                    <option value="STORAGE">Storage</option>
                    <option value="RAW_MATERIAL">Raw Material</option>
                    <option value="WORK_IN_PROGRESS">Work in Progress</option>
                    <option value="FINISHED_GOODS">Finished Goods</option>
                    <option value="DISTRIBUTION">Distribution</option>
                    <option value="TRANSIT">Transit</option>
                    <option value="QUARANTINE">Quarantine</option>
                    <option value="RETURN_GOODS">Return Goods</option>
                    <option value="OTHER">Other</option>
                  </select>
                  <div class="invalid-feedback">Please select warehouse function</div>
                </div>
                <div id="relationshipGroup" class="col-md-6 d-none">
                  <label class="form-label" for="relationship_type">Relationship <span class="text-danger">*</span></label>
                  <select id="relationship_type" name="relationship_type" class="form-select" required>
                    <option value="PLANT_BASED" selected>Plant-based</option>
                    <option value="INDEPENDENT">Independent</option>
                    <option value="SHARED">Shared</option>
                    <option value="THIRD_PARTY">Third Party</option>
                  </select>
                  <div class="invalid-feedback">Please select relationship type</div>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="plant_id">Plant</label>
                  <select id="plant_id" name="plant_id" class="form-select">
                    <option value="">Select plant (if plant-based)</option>
                  </select>
                  <div class="invalid-feedback">Please select a plant</div>
                </div>
              </div>
            </div>

            <!-- Address (auto from plant) -->
            <div id="addressCard" class="mb-3 border rounded p-3 bg-body-tertiary" style="display:none;">
              <div class="row g-3" id="plantAddressRow">
                <div class="col-md-6">
                  <label class="form-label" for="warehouse_address">Address</label>
                  <input id="warehouse_address" name="address" type="text" class="form-control" placeholder="Auto-filled from plant" readonly />
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="warehouse_city">City</label>
                  <input id="warehouse_city" name="city" type="text" class="form-control" placeholder="Auto-filled from plant" readonly />
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="warehouse_state_name">State</label>
                  <input id="warehouse_state_name" type="text" class="form-control" placeholder="Auto-resolved" readonly />
                  <input id="state_id" name="state_id" type="hidden" />
                  <input id="state_code" name="state_code" type="hidden" />
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="warehouse_pincode">PIN Code</label>
                  <input id="warehouse_pincode" name="pincode" type="text" class="form-control" placeholder="Auto-filled from plant" readonly />
                </div>
              </div>
                 <div class="form-text">Address fields are populated from the selected plant. You can edit after creation if required.</div>
            </div>

            <!-- Flags -->
            <div class="mb-3">
              <div class="d-flex flex-wrap gap-3">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="is_main_warehouse" name="is_main_warehouse" value="1">
                  <label class="form-check-label" for="is_main_warehouse">Main Warehouse</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="is_sales_warehouse" name="is_sales_warehouse" value="1">
                  <label class="form-check-label" for="is_sales_warehouse">Sales</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="is_purchase_warehouse" name="is_purchase_warehouse" value="1">
                  <label class="form-check-label" for="is_purchase_warehouse">Purchase</label>
                </div>
              </div>
            </div>

            <!-- Contacts -->
            <div class="mb-3">
              <div class="row g-3">
                <div class="col-md-4">
                  <label class="form-label" for="manager_id">Manager <span class="text-danger">*</span></label>
                  <select id="manager_id" name="manager_id" class="form-select" required>
                    <option value="">Select a manager</option>
                  </select>
                  <div class="invalid-feedback">Please select a manager</div>
                </div>
                <div class="col-md-4">
                  <label class="form-label" for="phone">Phone <span class="text-danger">*</span></label>
                  <input id="phone" name="phone" type="text" class="form-control" placeholder="e.g., +91 9876543210" required />
                  <div class="invalid-feedback">Please enter phone</div>
                </div>
                <div class="col-md-4">
                  <label class="form-label" for="email">Email <span class="text-danger">*</span></label>
                  <input id="email" name="email" type="email" class="form-control" placeholder="e.g., warehouse@sod.com" required />
                  <div class="invalid-feedback">Please enter a valid email</div>
                </div>
              </div>
            </div>

            <!-- Other Details -->
            <div class="mb-2">
              <div class="row g-3">
                <div class="col-md-8">
                  <label class="form-label" for="capacity_info">Capacity Info <span class="text-danger">*</span></label>
                  <input id="capacity_info" name="capacity_info" type="text" class="form-control" placeholder="e.g., 10,000 sq ft • 2,000 pallets" required />
                  <div class="invalid-feedback">Please enter capacity info</div>
                </div>
                <div class="col-md-4">
                  <label class="form-label" for="status">Status <span class="text-danger">*</span></label>
                  <select id="status" name="status" class="form-select" required>
                    <option value="ACTIVE" selected>Active</option>
                    <option value="INACTIVE">Inactive</option>
                    <option value="MAINTENANCE">Maintenance</option>
                  </select>
                  <div class="invalid-feedback">Please select status</div>
                </div>
              </div>
            </div>

          </form>
          </div>
        </div>
      </div>
    </div>
  <div class="border-top px-3 py-2 d-flex justify-content-between align-items-center mt-auto sticky-bottom-footer offcanvas-footer-polished">
      <div>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="resetWarehouseBtn"><span class="fas fa-redo me-1"></span>Reset</button>
        <button type="button" class="btn btn-sm btn-falcon-default ms-2" data-bs-dismiss="offcanvas">Cancel</button>
      </div>
      @php
        if(!isset($caps)) {
          $user = auth()->user();
          $caps = [
            'view'   => (bool) ($user?->can('masters-organization-warehouse-masters.view')),
            'create' => (bool) ($user?->can('masters-organization-warehouse-masters.create')),
            'update' => (bool) ($user?->can('masters-organization-warehouse-masters.update')),
            'delete' => (bool) ($user?->can('masters-organization-warehouse-masters.delete')),
            'export' => (bool) ($user?->can('masters-organization-warehouse-masters.export')),
            'toggle' => (bool) ($user?->can('masters-organization-warehouse-masters.update')),
            // Related entity select/view permissions (used for dynamic field enable/disable)
            'companyView' => (bool) ($user?->can('masters-organization-company-masters.view')),
            'plantView' => (bool) ($user?->can('masters-organization-plant-masters.view')),
            'managerView' => (bool) ($user?->can('system-administration-manage-users-user-accounts.view')),
          ];
        }
      @endphp
      @if(($caps['create'] ?? false) || ($caps['update'] ?? false))
        <button type="button" id="saveWarehouseBtn" class="btn btn-sm btn-primary"><span class="fas fa-save me-1"></span><span id="warehouseSaveBtnText">Save Warehouse</span></button>
      @endif
    </div>
  </div>
</div>

<!-- Import Warehouse Modal -->
<div class="modal fade" id="importWarehouseModal" tabindex="-1" aria-labelledby="importWarehouseModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="importWarehouseModalLabel">
          <span class="fas fa-file-import me-2"></span>Import Warehouses
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Guidelines -->
        <div class="alert alert-info">
          <h6 class="alert-heading"><i class="fas fa-info-circle me-2"></i>Import Guidelines</h6>
          <ul class="mb-0 small">
            <li>Download the template below and fill in your warehouse data</li>
            <li>Required fields: company_code, plant_code, warehouse_code, warehouse_name</li>
            <li>Optional fields: department_code, address, city, state_code, pincode, phone, email, manager_email</li>
            <li>Warehouse types: MAIN, SALES, PURCHASE, GENERAL</li>
            <li>Relationship types: OWNED, RENTED, LEASED, THIRD_PARTY</li>
            <li>Maximum file size: 5MB (CSV or Excel format)</li>
            <li>Company, Plant, and Department codes must exist in the system</li>
          </ul>
        </div>

        <!-- Template Download -->
        <div class="mb-3">
          <label class="form-label fw-bold">Step 1: Download Template</label>
          <div>
            <a href="{{ route('organization.warehouse-masters.import-template') }}" class="btn btn-outline-primary btn-sm">
              <i class="fas fa-download me-2"></i>Download CSV Template
            </a>
          </div>
        </div>

        <!-- File Upload -->
        <div class="mb-3">
          <label class="form-label fw-bold">Step 2: Upload Filled Template</label>
          <input type="file" class="form-control" id="importWarehouseFileInput" accept=".csv,.xlsx,.xls" style="display: none;">
          <div class="dropzone-container" id="importWarehouseDropzone">
            <div class="text-center p-4" id="warehouseDropzonePlaceholder">
              <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
              <p class="mb-2">Drag and drop your file here, or <button type="button" class="btn btn-link p-0" id="browseWarehouseFileBtn">browse</button></p>
              <p class="text-muted small mb-0">Supported formats: CSV, Excel (.xlsx, .xls) - Max 5MB</p>
            </div>
            <div id="warehouseFileInfo" class="d-none">
              <div class="d-flex align-items-center justify-content-between p-3">
                <div>
                  <i class="fas fa-file-csv fa-2x text-success me-3"></i>
                  <span id="warehouseFileName" class="fw-bold"></span>
                  <span id="warehouseFileSize" class="text-muted small ms-2"></span>
                </div>
                <button type="button" class="btn btn-sm btn-outline-danger" id="clearWarehouseFileBtn">
                  <i class="fas fa-times"></i> Remove
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Import Options -->
        <div class="mb-3">
          <label class="form-label fw-bold">Step 3: Import Options</label>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="skipWarehouseDuplicates" checked>
            <label class="form-check-label" for="skipWarehouseDuplicates">
              Skip duplicate warehouse codes (if unchecked, duplicates will cause errors)
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="validateWarehouseOnly">
            <label class="form-check-label" for="validateWarehouseOnly">
              Validate only (don't save data - dry run)
            </label>
          </div>
        </div>

        <!-- Progress Bar -->
        <div class="mb-3 d-none" id="importWarehouseProgress">
          <label class="form-label fw-bold">Import Progress</label>
          <div class="progress" style="height: 25px;">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" id="importWarehouseProgressBar" style="width: 0%">0%</div>
          </div>
          <p class="text-muted small mt-2 mb-0" id="importWarehouseProgressText">Preparing import...</p>
        </div>

        <!-- Results -->
        <div id="importWarehouseResults" class="d-none">
          <hr>
          <h6 class="fw-bold">Import Results</h6>
          <div class="alert" id="importWarehouseResultsAlert">
            <div class="row g-3">
              <div class="col-md-3 text-center">
                <div class="fs-4 fw-bold text-primary" id="warehouseTotalCount">0</div>
                <div class="small text-muted">Total Rows</div>
              </div>
              <div class="col-md-3 text-center">
                <div class="fs-4 fw-bold text-success" id="warehouseImportedCount">0</div>
                <div class="small text-muted">Imported</div>
              </div>
              <div class="col-md-3 text-center">
                <div class="fs-4 fw-bold text-warning" id="warehouseSkippedCount">0</div>
                <div class="small text-muted">Skipped</div>
              </div>
              <div class="col-md-3 text-center">
                <div class="fs-4 fw-bold text-danger" id="warehouseErrorCount">0</div>
                <div class="small text-muted">Errors</div>
              </div>
            </div>
          </div>

          <!-- Error Details -->
          <div id="warehouseErrorDetails" class="d-none">
            <div class="alert alert-danger">
              <h6 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>Errors Found</h6>
              <ul id="warehouseErrorsList" class="mb-0 small" style="max-height: 200px; overflow-y: auto;"></ul>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="startWarehouseImportBtn" disabled>
          <i class="fas fa-file-import me-2"></i>Start Import
        </button>
      </div>
    </div>
  </div>
</div>
@endsection

@push('styles')
<style>
  #warehousesTableCard table td { vertical-align: middle; }
  .badge-status-active { background: var(--falcon-success-bg-subtle,#d1e7dd); color:#0f5132; }
  .badge-status-inactive { background: var(--falcon-secondary-bg-subtle,#e2e3e5); color:#41464b; }

  /* Import Modal Styles */
  .dropzone-container {
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .dropzone-container:hover {
    border-color: #4e73df;
    background-color: #eef2f7;
  }
  .dropzone-container.dragover {
    border-color: #2e59d9;
    background-color: #e3f2fd;
    border-style: solid;
  }
  #importWarehouseModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }
  /* Offcanvas width and sticky footer pattern (flex layout) */
  #warehouseFormOffcanvas {
    --bs-offcanvas-width: clamp(700px, 60vw, 960px);
    width: clamp(700px, 60vw, 960px) !important;
    max-width: 100vw;
  }
  @media (max-width: 768px) {
    #warehouseFormOffcanvas { --bs-offcanvas-width: 100vw; width: 100vw !important; }
  }
  /* header color handled globally via .offcanvas-header-polished */
  /* Offcanvas sticky footer; scroll content only */
  #warehouseFormOffcanvas .offcanvas-body { display: flex; flex-direction: column; height: 100%; }
  #warehouseFormOffcanvas .form-scroll-container { flex: 1 1 auto; overflow: visible; min-height: 0; }
  #warehouseFormOffcanvas .card.h-100 { display: flex; flex-direction: column; min-height: 0; }
  #warehouseFormOffcanvas .card-body { flex: 1 1 auto; min-height: 0; }
  #warehouseFormOffcanvas .sticky-bottom-footer { flex: 0 0 auto; position: sticky; bottom: 0; }
  /* ensure readonly state name remains legible */
  #warehouse_state_name.form-control[readonly] { background-color: #fff; color: #111; opacity: 1; }
  .bg-body-tertiary { background-color: var(--falcon-body-bg,#f8f9fa) !important; }
  /* Compact and professional field sizing */
  #warehouseFormOffcanvas .form-control,
  #warehouseFormOffcanvas .form-select { font-size: 0.875rem; }
  #warehouseFormOffcanvas .form-label { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; }

  /* Validation styling: green only when filled and valid; red on errors */
  .form-control.is-valid,
  .form-select.is-valid {
    border-color: #198754 !important;
    box-shadow: none !important;
  }
  .form-control.is-invalid,
  .form-select.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: none !important;
  }
  /* Avoid Bootstrap auto-validating everything when using was-validated */
  .was-validated .form-control:valid,
  .was-validated .form-select:valid {
    border-color: inherit !important;
    box-shadow: none !important;
  }

  /* Nice thin scrollbar inside scroll container */
  #warehouseFormOffcanvas .card-body.overflow-auto::-webkit-scrollbar { width: 6px; }
  #warehouseFormOffcanvas .card-body.overflow-auto::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
  #warehouseFormOffcanvas .card-body.overflow-auto::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
  #warehouseFormOffcanvas .card-body.overflow-auto::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
</style>
@endpush

@push('scripts')
<!-- SweetAlert2 for nice alerts (CDN) -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
<script src="{{ asset('assets/js/state-service.js') }}"></script>
<script src="{{ asset('assets/js/custom/organization/warehouse_masters.js') }}"></script>
<script>
  window.pageCaps = @json($caps ?? []);
  document.addEventListener('DOMContentLoaded', function(){
    const c = window.pageCaps || {};
    if(!c.create) document.getElementById('addWarehouseBtn')?.classList.add('d-none');
    if(!c.export) document.getElementById('exportWarehouses')?.classList.add('d-none');
  const saveBtn = document.getElementById('saveWarehouseBtn');
  if(saveBtn && !(c.create || c.update)) saveBtn.classList.add('d-none');
  });
</script>
@endpush