@extends('layouts.app')

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

@section('content')
<div class="card mb-3" id="plantsTableCard">
  <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">Plant Masters</h5>
      </div>
      <div class="col-8 col-sm-auto text-end ps-2">
        <div class="d-none" id="table-plants-actions">
          <div class="d-flex">
            <select class="form-select form-select-sm" aria-label="Bulk actions">
              <option selected>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">Apply</button>
          </div>
        </div>
        <div id="table-plants-replace-element">
          @can('masters-organization-plant-masters.create')
          <button class="btn btn-falcon-default btn-sm" type="button" id="addPlantBtn" data-bs-toggle="offcanvas" data-bs-target="#plantFormOffcanvas" aria-controls="plantFormOffcanvas">
            <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-plant-masters.import')
         <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#importPlantModal">
            <span class="fas fa-upload" 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="#plantFilters">
            <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-plant-masters.export')
          <button class="btn btn-falcon-default btn-sm" type="button" id="exportPlants">
            <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="plantFilters">
    <div class="card-body border-top fs-10">
      <div class="row g-2 align-items-end">

        <form id="plantFilterForm" class="w-100">
          <!-- use a single horizontal flex strip that doesn't wrap; it'll show a horizontal scrollbar on small screens -->
          <div class="d-flex flex-nowrap gap-2 align-items-end w-100 overflow-auto py-1">
        <div class="col-md-3">
          <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="">All Status</option>
            <option value="ACTIVE">Active</option>
            <option value="INACTIVE">Inactive</option>
            <option value="MAINTENANCE">Maintenance</option>
          </select>
        </div>

        <div class="col-auto">
          <select id="filter_type" class="form-select form-select-sm" name="filter_type">
            <option value="">All Types</option>
            @foreach ([
                'MANUFACTURING',
                'WAREHOUSE / STORAGE',
                'SALES / DISTRIBUTION',
                'SUBCONTRACTING / 3RD PARTY',
                'SERVICE / MAINTENANCE',
                'HEAD OFFICE / ADMIN',
                'PROJECT SITE / TEMPORARY'
            ] as $type)
                <option value="{{ $type }}">{{ $type }}</option>
            @endforeach
          </select>
        </div>

        <div class="col-auto">
          <select id="filter_manager_user_id" class="form-select form-select-sm" name="manager_user_id">
            <option value="">All Managers</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>

        <!-- buttons pinned to the right of the strip -->
         <div class="col-auto d-flex align-items-center">
          <button class="btn btn-primary btn-sm me-2" type="button" id="applyPlantFilters"><i class="fas fa-search"></i> Apply</button>

          <button class="btn btn-outline-secondary btn-sm" type="button" id="clearPlantFilters"> <i class="fas fa-times"></i> Clear</button>
        </div>
          </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-plants-select" type="checkbox" data-bulk-select='{"body":"table-plants-body","actions":"table-plants-actions","replacedElement":"table-plants-replace-element"}' />
              </div>
            </th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="plant_code">Plant Code</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="plant_name">Plant 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="type">Type</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="manager">Manager</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-plants-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">
                <input class="form-check-input checkbox-bulk-plant-row" type="checkbox" value="" />
              </div>
            </td>
            <td class="plant_code align-middle white-space-nowrap py-2"></td>
            <td class="plant_name align-middle py-2"></td>
            <td class="company align-middle py-2"></td>
            <td class="type align-middle py-2"></td>
            <td class="manager 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 offcanvas-wide" tabindex="-1" id="plantFormOffcanvas" aria-labelledby="plantFormOffcanvasLabel" data-bs-scroll="true" data-bs-backdrop="true">
  <div class="offcanvas-header bg-light offcanvas-header-polished">
    <h5 class="offcanvas-title" id="plantFormOffcanvasLabel"><span class="fas fa-industry me-2"></span><span id="plantFormTitle">New Plant</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="plantForm" class="needs-validation" novalidate>
      @csrf
      <input type="hidden" name="_method" id="plantFormMethod" value="POST">
      <input type="hidden" name="id" id="plant_id" />
      <div class="mb-3">
  <label class="form-label" for="plant_company_id">Company <span class="text-danger">*</span></label>
  <select id="plant_company_id" name="company_id" class="form-select" required></select>
        <div class="invalid-feedback">Please select a company</div>
      </div>
      <div class="row g-3">
        <div class="col-md-6 mb-3">
          <label class="form-label" for="code">Code <span class="text-danger">*</span></label>
          <input id="code" name="code" type="text" class="form-control" maxlength="20" placeholder="e.g., PLT001" required />
          <div class="invalid-feedback">Please enter plant code</div>
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label" for="name">Name <span class="text-danger">*</span></label>
          <input id="name" name="name" type="text" class="form-control" placeholder="e.g., Main Manufacturing Plant" required />
          <div class="invalid-feedback">Please enter plant name</div>
        </div>
      </div>
      <div class="row g-3">
        <div class="col-md-6 mb-3">
          <label class="form-label" for="type">Plant Type <span class="text-danger">*</span></label>
          <select id="type" name="type" class="form-select" required>
             <option value="">-- SELECT PLANT TYPE --</option>
            @foreach ([
                'MANUFACTURING',
                'WAREHOUSE / STORAGE',
                'SALES / DISTRIBUTION',
                'SUBCONTRACTING / 3RD PARTY',
                'SERVICE / MAINTENANCE',
                'HEAD OFFICE / ADMIN',
                'PROJECT SITE / TEMPORARY'
            ] as $type)
                <option value="{{ $type }}">{{ $type }}</option>
            @endforeach
          </select>
          <div class="invalid-feedback">Please select a plant type</div>
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label" for="manager_user_id">Manager User</label>
          <select id="manager_user_id" name="manager_user_id" class="form-select"></select>
        </div>
      </div>
      <div class="row g-3">
        <div class="col-12 mb-3">
          <label class="form-label" for="address">Address</label>
          <input id="address" name="address" type="text" class="form-control" placeholder="Address line" />
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label" for="city">City</label>
          <input id="city" name="city" type="text" class="form-control" placeholder="e.g., Mumbai" />
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label" for="state_id">State <span class="text-danger">*</span></label>
          <select id="state_id" name="state_id" class="form-select" required></select>
          <div class="invalid-feedback">Please select a state</div>
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label" for="country">Country</label>
          <input id="country" name="country" type="text" class="form-control" value="India" />
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label" for="pincode">Pincode</label>
          <input id="pincode" name="pincode" type="text" class="form-control" placeholder="e.g., 400001" inputmode="numeric" pattern="\d{6}" maxlength="6" />
          <div class="invalid-feedback">Pincode must be exactly 6 digits</div>
        </div>
        <div class="col-md-6 mb-3">
          <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., 9876543210" inputmode="numeric" pattern="\d{10,15}" maxlength="15" required />
          <div class="invalid-feedback">Phone must be 10–15 digits (numbers only)</div>
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label" for="email">Email</label>
          <input id="email" name="email" type="email" class="form-control" placeholder="e.g., info@plant.com" />
          <div class="invalid-feedback">Please enter a valid email address</div>
        </div>
      </div>
      <div class="row g-3">
        <div class="col-md-3 mb-3">
          <label class="form-label" for="geo_lat">Lat</label>
          <input id="geo_lat" name="geo_lat" type="number" class="form-control" step="any" min="-90" max="90" placeholder="-90 to 90" />
          <div class="invalid-feedback">Latitude must be between -90 and 90</div>
        </div>
        <div class="col-md-3 mb-3">
          <label class="form-label" for="geo_long">Long</label>
          <input id="geo_long" name="geo_long" type="number" class="form-control" step="any" min="-180" max="180" placeholder="-180 to 180" />
          <div class="invalid-feedback">Longitude must be between -180 and 180</div>
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label" for="status">Status</label>
          <select id="status" name="status" class="form-select">
            <option value="ACTIVE" selected>Active</option>
            <option value="INACTIVE">Inactive</option>
            <option value="MAINTENANCE">Maintenance</option>
          </select>
        </div>
      </div>
      <div class="row g-3">
        <div class="col-12 mb-3" id="gstin_field_group" style="display:none;">
          <label class="form-label" for="gstin_id">GSTIN (Filtered by State) <span class="text-danger">*</span></label>
          <select id="gstin_id" name="gstin_id" class="form-select" required></select>
          <div class="invalid-feedback" id="gstin_no_match_msg">No GSTIN registered for the selected state</div>
          <div class="form-text">Select a state to load same-state GSTINs.</div>
        </div>
      </div>

          </form>
          </div>
        </div>
      </div>
    </div>
  <div class="border-top px-3 py-2 d-flex justify-content-between align-items-center sticky-bottom-footer offcanvas-footer-polished">
    <div>
        <button type="button" class="btn btn-outline-danger ms-2" data-bs-dismiss="offcanvas">
           <i class="fas fa-times me-2"></i>Cancel
       </button>
        <button type="button" class="btn btn-outline-secondary ms-2" id="resetPlantBtn" >
            <i class="fas fa-eraser me-2"></i>Reset
        </button>
  </div>
      <button type="button" id="savePlantBtn" class="btn btn-sm btn-primary"><span class="fas fa-save me-1"></span><span id="plantSaveBtnText">Save Plant</span></button>
    </div>
  </div>
</div>
@endsection

@push('styles')
<style>
  #plantsTableCard 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; }
  /* Use default form-label styling to match company form */

  /* Sort icon styling for table headers */
  #plantsTableCard .sort[data-sort] {
    cursor: pointer;
    white-space: nowrap;
    position: relative;
  }
  #plantsTableCard .sort[data-sort]::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNyA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNi41MjU1NiAzLjVDNi45NDkzNyAzLjUgNy4xNjEyOCAzLjA2MjUgNi44NTUxOSAyLjc5MTY3TDMuODQxNCAwLjEyNUMzLjY1MzA0IC0wLjA0MTY2NjcgMy4zNDY5NiAtMC4wNDE2NjY3IDMuMTU4NTkgMC4xMjVMMC4xNDQ4MDkgMi43OTE2N0MtMC4xNjEyNzkgMy4wNjI1IDAuMDUwNjI3OSAzLjUgMC40NzQ0NDEgMy41SDYuNTI1NTZaIiBmaWxsPSIjQjZDMkQyIi8+CjxwYXRoIGQ9Ik0wLjQ3NDQ0MiA1LjVDMC4wNTA2MjgyIDUuNSAtMC4xNjEyNzkgNS45Mzc1IDAuMTQ0ODA5IDYuMjA4MzNMMy4xNTg1OSA4Ljg3NUMzLjM0Njk2IDkuMDQxNjcgMy42NTMwNCA5LjA0MTY3IDMuODQxNDEgOC44NzVMNi44NTUxOSA2LjIwODMzQzcuMTYxMjggNS45Mzc1IDYuOTQ5MzcgNS41IDYuNTI1NTYgNS41TDAuNDc0NDQyIDUuNVoiIGZpbGw9IiNCNkMyRDIiLz4KPC9zdmc+Cg==");
    margin-left: 0.25rem;
    display: inline-block;
    vertical-align: middle;
  }
  #plantsTableCard .sort[data-sort].asc::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNyA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC40NzQ0NDIgMC41MDAwMDFDMC4wNTA2MjgyIDAuNTAwMDAxIC0wLjE2MTI3OSAwLjkzNzUgMC4xNDQ4MDkgMS4yMDgzM0wzLjE1ODU5IDMuODc1QzMuMzQ2OTYgNC4wNDE2NyAzLjY1MzA0IDQuMDQxNjcgMy44NDE0MSAzLjg3NUw2Ljg1NTE5IDEuMjA4MzNDNy4xNjEyOCAwLjkzNzUwMSA2Ljk0OTM3IDAuNTAwMDAxIDYuNTI1NTYgMC41MDAwMDFMMC40NzQ0NDIgMC41MDAwMDFaIiBmaWxsPSIjQjZDMkQyIi8+Cjwvc3ZnPgo=") !important;
    margin-top: -1px !important;
  }
  #plantsTableCard .sort[data-sort].desc::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNyA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNi41MjU1NiAzLjVDNi45NDkzNyAzLjUgNy4xNjEyOCAzLjA2MjUgNi44NTUxOSAyLjc5MTY3TDMuODQxNCAwLjEyNUMzLjY1MzA0IC0wLjA0MTY2NjcgMy4zNDY5NiAtMC4wNDE2NjY3IDMuMTU4NTkgMC4xMjVMMC4xNDQ4MDkgMi43OTE2N0MtMC4xNjEyNzkgMy4wNjI1IDAuMDUwNjI3OSAzLjUgMC40NzQ0NDEgMy41SDYuNTI1NTZaIiBmaWxsPSIjQjZDMkQyIi8+Cjwvc3ZnPgo=") !important;
    margin-top: -1px !important;
  }

  /* Offcanvas width handled by global .offcanvas-wide helper */

  /* Polished header similar to Warehouse */
  /* header color handled globally via .offcanvas-header-polished */

  /* Offcanvas sticky footer; scroll content only */
  #plantFormOffcanvas .offcanvas-body { display: flex; flex-direction: column; height: 100%; }
  #plantFormOffcanvas .form-scroll-container { flex: 1 1 auto; overflow: visible; min-height: 0; }
  #plantFormOffcanvas .card.h-100 { display: flex; flex-direction: column; min-height: 0; }
  #plantFormOffcanvas .card-body { flex: 1 1 auto; min-height: 0; }
  #plantFormOffcanvas .sticky-bottom-footer { flex: 0 0 auto; position: sticky; bottom: 0; }

  /* Import Modal Styles */
  .dropzone-container {
    background: #fafbfc;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .dropzone-container:hover {
    border-color: var(--bs-primary);
    background: #f0f7ff;
  }

  .dropzone-container.dragover {
    border-color: var(--bs-primary);
    background: #e6f2ff;
    transform: scale(1.02);
  }

  #importPlantModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Compact and professional field sizing */
  #plantFormOffcanvas .form-control,
  #plantFormOffcanvas .form-select { font-size: 0.875rem; }
  #plantFormOffcanvas .form-label { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; }

  /* Tighten vertical rhythm to reduce gaps between rows */
  #plantFormOffcanvas .mb-3 { margin-bottom: 0.75rem !important; }
  #plantFormOffcanvas .row.g-3 { --bs-gutter-y: 0.5rem; --bs-gutter-x: 0.75rem; margin-bottom: 0.75rem; }
  /* Remove duplicate bottom margin on columns that already have row gutters */
  #plantFormOffcanvas .row.g-3 > [class^="col-"].mb-3,
  #plantFormOffcanvas .row.g-3 > [class*=" col-"].mb-3 { margin-bottom: 0 !important; }

  /* Validation styling */
  #plantFormOffcanvas .form-control.is-valid,
  #plantFormOffcanvas .form-select.is-valid {
    border-color: #198754 !important;
    box-shadow: none !important;
  }
  #plantFormOffcanvas .form-control.is-invalid,
  #plantFormOffcanvas .form-select.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: none !important;
  }
  /* Do NOT show green success state for untouched fields. Only show when user interacted or explicit .is-valid applied. */
  #plantFormOffcanvas .form-control:not(.user-touched):not(.is-valid):valid,
  #plantFormOffcanvas .form-select:not(.user-touched):not(.is-valid):valid {
    background-image: none !important;
    border-color: var(--falcon-input-border, #ced4da) !important;
    box-shadow: none !important;
  }
  .was-validated #plantFormOffcanvas .form-control:valid,
  .was-validated #plantFormOffcanvas .form-select:valid {
    border-color: inherit !important;
    box-shadow: none !important;
  }

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

  /* Subtle bg helper */
  .bg-body-tertiary { background-color: var(--falcon-body-bg,#f8f9fa) !important; }

  /* Manage Departments Offcanvas width */
  #plantDepartmentsOffcanvas {
    --bs-offcanvas-width: clamp(800px, 60vw, 1080px);
    width: clamp(800px, 60vw, 1080px) !important;
    max-width: 100vw;
  }
  /* Keep department form inputs aligned regardless of validation messages */
  #plantDepartmentsOffcanvas .row.g-3.align-items-end > .col-md-3,
  #plantDepartmentsOffcanvas .row.g-3.align-items-end > .col-md-6 {
    display: flex;
    flex-direction: column;
  }
  #plantDepartmentsOffcanvas .row.g-3.align-items-end > .col-md-3 .form-control,
  #plantDepartmentsOffcanvas .row.g-3.align-items-end > .col-md-6 .form-control,
  #plantDepartmentsOffcanvas .row.g-3.align-items-end > .col-md-3 .form-select,
  #plantDepartmentsOffcanvas .row.g-3.align-items-end > .col-md-6 .form-select {
    width: 100%;
  }
  #plantDepartmentsOffcanvas .row.g-3.align-items-end > .col-md-3 .invalid-feedback,
  #plantDepartmentsOffcanvas .row.g-3.align-items-end > .col-md-6 .invalid-feedback {
    min-height: 18px; /* reserve space to avoid layout jump */
  }
  /* Avoid green ticks for untouched fields in Departments offcanvas */
  #plantDepartmentsOffcanvas .form-control:not(.user-touched):not(.is-valid):valid,
  #plantDepartmentsOffcanvas .form-select:not(.user-touched):not(.is-valid):valid {
    background-image: none !important;
    border-color: var(--falcon-input-border, #ced4da) !important;
    box-shadow: none !important;
  }
  @media (max-width: 768px) {
    #plantDepartmentsOffcanvas {
      --bs-offcanvas-width: 100vw;
      width: 100vw !important;
    }
  }
</style>
@endpush

@push('scripts')
<script>
  window.pageCaps = {
    view: @json(auth()->user()?->can('masters-organization-plant-masters.view') ?? false),
    create: @json(auth()->user()?->can('masters-organization-plant-masters.create') ?? false),
    update: @json(auth()->user()?->can('masters-organization-plant-masters.update') ?? false),
    delete: @json(auth()->user()?->can('masters-organization-plant-masters.delete') ?? false),
    toggle: @json(auth()->user()?->can('masters-organization-plant-masters.update') ?? false),
    export: @json(auth()->user()?->can('masters-organization-plant-masters.export') ?? false),
    manageDepartments: @json(auth()->user()?->can('masters-organization-plant-departments.view') ?? false)
  };
</script>
@php
  $__acc = auth()->user()?->accessibleCompanyIds() ?? [];
  $__currentCompanyId = session('company_id')
      ?? request()->query('company_id')
      ?? (count($__acc) === 1 ? $__acc[0] : null);
@endphp
<script>
  // Selected company from session/query or single-access fallback
  window.currentCompanyId = @json($__currentCompanyId);
</script>
<script src="{{ asset('assets/js/common/states.js') }}"></script>
<script src="{{ asset('assets/js/custom/organization/plant_masters.js') }}"></script>
<script>
  // Populate state dropdown using id values for clean state_id storage
  document.addEventListener('DOMContentLoaded', function(){
    if (window.StateService) {
      StateService.populateSelect($('#state_id'), { valueKey: 'id', textFn: s => `${s.state_name} (${s.state_code})` });
    }
  });
  document.getElementById('plantFormOffcanvas').addEventListener('shown.bs.offcanvas', function(){
    if (window.StateService) {
      StateService.populateSelect($('#state_id'), { valueKey: 'id', textFn: s => `${s.state_name} (${s.state_code})` });
    }
  });
</script>
@endpush

@push('modals')
<!-- Plant Departments Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="plantDepartmentsOffcanvas" aria-labelledby="plantDepartmentsOffcanvasLabel">
  <div class="offcanvas-header bg-light">
    <h5 class="offcanvas-title" id="plantDepartmentsOffcanvasLabel">
      <span class="fas fa-stream me-2"></span>
      Manage Departments: <span id="deptOffcanvasPlantName">-</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 id="plantDepartmentsForm" class="needs-validation flex-grow-1 px-3 py-3" novalidate>
      <input type="hidden" id="dept_plant_id" />
      <div class="row g-3 align-items-end">
        <div class="col-md-4">
          <label class="form-label" for="assign_department_id">Department</label>
          <select id="assign_department_id" class="form-select" required></select>
          <div class="invalid-feedback">Please select a department</div>
        </div>
        <div class="col-md-4">
          <label class="form-label" for="assign_effective_from">Effective From <span class="text-danger">*</span></label>
          <input id="assign_effective_from" type="date" class="form-control" required />
          <div class="invalid-feedback">Please choose a start date (today or later)</div>
        </div>
        <div class="col-md-4">
          <label class="form-label" for="assign_effective_to">Effective To <span class="text-danger">*</span></label>
          <input id="assign_effective_to" type="date" class="form-control" required />
          <div class="invalid-feedback">Please choose an end date (on/after start date)</div>
        </div>
        <div class="col-md-4">
          <label class="form-label" for="assign_status">Status</label>
          <select id="assign_status" class="form-select">
            <option value="ACTIVE" selected>Active</option>
            <option value="INACTIVE">Inactive</option>
            <option value="MAINTENANCE">Maintenance</option>
          </select>
        </div>
        <div class="col-md-3 d-flex gap-2">
          <button type="button" id="assignDepartmentBtn" class="btn btn-primary mt-3 mt-md-0 flex-grow-1">
            <span class="fas fa-plus me-1"></span>Assign
          </button>

        </div>
        <div class="col-md-3 d-flex gap-2">

          <button type="button" id="cancelDeptEditBtn" class="btn btn-falcon-default mt-3 mt-md-0 d-none">Cancel</button>
        </div>
      </div>

      <div class="mt-4">
        <div class="table-responsive scrollbar">
          <table class="table table-sm table-striped fs-10 mb-0">
            <thead class="bg-200">
              <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Type</th>
                <th>Effective</th>
                <th>Status</th>
                <th class="text-end"></th>
              </tr>
            </thead>
            <tbody id="plantDepartmentsTableBody">
              <tr><td colspan="6" class="text-center py-4 text-muted">No departments assigned</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </form>
    <div class="border-top px-3 py-2 bg-body-tertiary d-flex justify-content-between align-items-center">
      <button type="button" class="btn btn-sm btn-falcon-default" data-bs-dismiss="offcanvas">Close</button>
      <button type="button" class="btn btn-sm btn-falcon-default" id="refreshPlantDepartmentsBtn"><span class="fas fa-sync-alt me-1"></span>Refresh</button>
    </div>
  </div>
</div>

<!-- Import Plant Modal -->
<div class="modal fade" id="importPlantModal" tabindex="-1" aria-labelledby="importPlantModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="importPlantModalLabel">
                    <i class="fas fa-upload me-2"></i>Import Plant Masters
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Import Guidelines -->
                <div class="alert alert-info alert-dismissible fade show" role="alert">
                    <strong><i class="fas fa-info-circle me-2"></i>Import Guidelines:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Download the template and fill in your plant data</li>
                        <li>Supported formats: Excel (.xlsx) or CSV (.csv)</li>
                        <li>Maximum file size: 5MB</li>
                        <li>Ensure all required fields are filled correctly</li>
                        <li>Company codes must exist in the system</li>
                    </ul>
                </div>

                <!-- Error Display -->
                <div id="importPlantFileError" class="alert alert-danger d-none" role="alert"></div>

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

                <!-- File Upload -->
                <div class="mb-3">
                    <label class="form-label fw-semi-bold">Step 2: Upload Filled Template</label>
                    <div class="dropzone-container border rounded p-4 text-center" id="importPlantDropzone">
                        <input type="file" id="importPlantFileInput" accept=".xlsx,.csv" class="d-none">
                        <div class="dropzone-placeholder" id="plantDropzonePlaceholder">
                            <i class="fas fa-cloud-upload-alt text-muted fs-1 mb-2 d-block"></i>
                            <p class="text-muted mb-2">Drag & drop your file here or</p>
                            <button type="button" class="btn btn-sm btn-falcon-primary" id="browsePlantFileBtn">
                                <i class="fas fa-folder-open me-1"></i>Browse Files
                            </button>
                            <p class="text-muted fs-10 mt-2 mb-0">Supported: .xlsx, .csv (Max 5MB)</p>
                        </div>
                        <div class="dropzone-preview d-none" id="plantDropzonePreview">
                            <i class="fas fa-file-excel text-success fs-1 mb-2 d-block"></i>
                            <p class="mb-1 fw-semi-bold" id="plantFileNameDisplay"></p>
                            <p class="text-muted fs-10 mb-2" id="plantFileSizeDisplay"></p>
                            <button type="button" class="btn btn-sm btn-falcon-danger" id="clearPlantImportFile">
                                <i class="fas fa-times me-1"></i>Remove File
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Import Options -->
                <div class="mb-3">
                    <label class="form-label fw-semi-bold">Import Options</label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="skipPlantDuplicates" checked>
                        <label class="form-check-label" for="skipPlantDuplicates">
                            Skip duplicate plants (by plant code)
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="validatePlantOnly">
                        <label class="form-check-label" for="validatePlantOnly">
                            Validate only (don't import, just check for errors)
                        </label>
                    </div>
                </div>

                <!-- Progress Bar -->
                <div id="importPlantProgress" class="d-none mb-3">
                    <label class="form-label fw-semi-bold">Import Progress</label>
                    <div class="progress" style="height: 25px;">
                        <div id="importPlantProgressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%">
                            <span id="importPlantProgressText">0%</span>
                        </div>
                    </div>
                </div>

                <!-- Results Display -->
                <div id="importPlantResults" class="d-none">
                    <label class="form-label fw-semi-bold">Import Results</label>
                    <div class="row g-2 mb-3">
                        <div class="col-3">
                            <div class="card border-success">
                                <div class="card-body text-center p-2">
                                    <i class="fas fa-check-circle text-success fs-1"></i>
                                    <h6 class="mb-0 mt-2">Imported</h6>
                                    <h4 class="mb-0" id="plantImportedCount">0</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card border-warning">
                                <div class="card-body text-center p-2">
                                    <i class="fas fa-exclamation-triangle text-warning fs-1"></i>
                                    <h6 class="mb-0 mt-2">Skipped</h6>
                                    <h4 class="mb-0" id="plantSkippedCount">0</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card border-danger">
                                <div class="card-body text-center p-2">
                                    <i class="fas fa-times-circle text-danger fs-1"></i>
                                    <h6 class="mb-0 mt-2">Errors</h6>
                                    <h4 class="mb-0" id="plantErrorsCount">0</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card border-info">
                                <div class="card-body text-center p-2">
                                    <i class="fas fa-list text-info fs-1"></i>
                                    <h6 class="mb-0 mt-2">Total</h6>
                                    <h4 class="mb-0" id="plantTotalCount">0</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="plantErrorDetailsList" class="d-none">
                        <div class="alert alert-danger">
                            <strong><i class="fas fa-exclamation-circle me-2"></i>Errors Found:</strong>
                            <ul id="plantErrorsList" class="mb-0 mt-2"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="startPlantImportBtn" disabled>
                    <i class="fas fa-upload me-2"></i>Start Import
                </button>
            </div>
        </div>
    </div>
</div>

@endpush