@extends('layouts.app')

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

@section('content')
<div class="card mb-3" id="departmentsTableCard">
  <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">Department Masters</h5>
      </div>
      <div class="col-8 col-sm-auto text-end ps-2">
        <div class="d-none" id="table-departments-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-departments-replace-element">
          @can('masters-organization-departments.create')
          <button class="btn btn-falcon-default btn-sm" type="button" id="addDepartmentBtn">
            <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-departments.import')
          <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#importDepartmentModal">
            <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="#departmentFilters">
            <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-departments.export')
          <button class="btn btn-falcon-default btn-sm" type="button" id="exportDepartments">
            <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>

  <!-- Filters -->
  <div class="collapse" id="departmentFilters">
    <div class="card-body border-top fs-10">
      <form id="departmentFilterForm" class="row gy-2 gx-2 align-items-end">
        <div class=" col-md-2">
          <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_department_type" class="form-select form-select-sm" name="department_type">
            <option value="">Any Type</option>
            <option value="OFFICE">Office</option>
            <option value="MANUFACTURING">Manufacturing</option>
            <option value="WAREHOUSE">Warehouse</option>
            <option value="QA">QA</option>
            <option value="MAINTENANCE">Maintenance</option>
            <option value="LOGISTICS">Logistics</option>
            <option value="HR">HR</option>
            <option value="FINANCE">Finance</option>
            <option value="IT">IT</option>
            <option value="RND">R&D</option>
            <option value="SALES">Sales</option>
            <option value="PURCHASE">Purchase</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="applyDepartmentFilters"><i class="fas fa-search"></i> Apply</button>
          <button class="btn btn-outline-secondary btn-sm" type="button" id="clearDepartmentFilters"> <i class="fas fa-times"></i> Clear</button>
        </div>
      </form>
    </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-departments-select" type="checkbox" data-bulk-select='{"body":"table-departments-body","actions":"table-departments-actions","replacedElement":"table-departments-replace-element"}' />
              </div>
            </th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="code">Code</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="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="type">Type</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-departments-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="code align-middle white-space-nowrap py-2"></td>
            <td class="name align-middle py-2"></td>
            <td class="company align-middle py-2"></td>
            <td class="type 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>

<!-- Department → Manage Shifts Offcanvas -->
<div class="offcanvas offcanvas-end offcanvas-wide" tabindex="-1" id="deptShiftManageOffcanvas" aria-labelledby="deptShiftManageOffcanvasLabel">
  <div class="offcanvas-header bg-light offcanvas-header-polished">
    <div>
      <h5 class="offcanvas-title mb-0" id="deptShiftManageOffcanvasLabel">
        <span class="fas fa-clock me-2"></span>Manage Shifts
      </h5>
      <div class="small text-muted"><strong id="dsm_dept_title">Department</strong> · <span id="dsm_dept_meta">Company</span></div>
    </div>
    <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">
            <div id="dsmDisabledNote" class="alert alert-info py-2 px-3 d-none">Save the department first to manage shifts.</div>
            <div id="dsmControls" class="row g-3 align-items-end">
              <div class="col-md-6">
                <label class="form-label" for="dsm_plant_select">Plant</label>
                <select id="dsm_plant_select" class="form-select">
                  <option value="">Select Plant</option>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="dsm_shift_select">Shift</label>
                <select id="dsm_shift_select" class="form-select">
                  <option value="">Select Shift</option>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="dsm_from">Effective From</label>
                <input id="dsm_from" type="text" class="form-control" />
              </div>
              <div class="col-md-6">
                <label class="form-label" for="dsm_to">Effective To</label>
                <input id="dsm_to" type="text" class="form-control" />
              </div>
              <div class="col-12 mt-1">
                <button type="button" id="dsmAddShiftBtn" class="btn btn-falcon-default"><span class="fas fa-plus me-1"></span>Add Shift</button>
              </div>
            </div>

            <div class="table-responsive scrollbar mt-3">
              <table class="table table-sm fs-10 mb-0">
                <thead>
                  <tr>
                    <th>Shift</th>
                    <th>Effective From</th>
                    <th>Effective To</th>
                    <th class="text-end" style="width:60px;">Actions</th>
                  </tr>
                </thead>
                <tbody id="dsmShiftTableBody">
                  <tr><td colspan="4" class="text-muted small text-center py-3">No shifts</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="border-top px-3 py-2 d-flex justify-content-end align-items-center mt-auto sticky-bottom-footer offcanvas-footer-polished">
      <button type="button" class="btn btn-sm btn-falcon-default" data-bs-dismiss="offcanvas">Close</button>
    </div>
  </div>
</div>

<!-- Offcanvas Form -->
<div class="offcanvas offcanvas-end offcanvas-wide" tabindex="-1" id="departmentFormOffcanvas" aria-labelledby="departmentFormOffcanvasLabel" data-bs-scroll="true" data-bs-backdrop="true">
  <div class="offcanvas-header bg-light offcanvas-header-polished">
    <h5 class="offcanvas-title" id="departmentFormOffcanvasLabel"><span class="fas fa-stream me-2"></span><span id="departmentFormTitle">New Department</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 tight">
    <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="departmentForm" class="needs-validation" novalidate>
              @csrf
              <input type="hidden" name="_method" id="departmentFormMethod" value="POST">
              <input type="hidden" name="id" id="department_id" />
              <div class="mb-3">
                <label class="form-label" for="dept_company_id">Company <span class="text-danger">*</span></label>
                <select id="dept_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="dept_code">Department Code <span class="text-danger">*</span></label>
                  <input id="dept_code" name="code" type="text" class="form-control" maxlength="20" placeholder="e.g., QA" required />
                  <div class="invalid-feedback">Please enter department code</div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label" for="dept_name">Department Name <span class="text-danger">*</span></label>
                  <input id="dept_name" name="name" type="text" class="form-control" placeholder="e.g., Quality Assurance" required />
                  <div class="invalid-feedback">Please enter department name</div>
                </div>
              </div>
              <div class="row g-3">
                <div class="col-md-6 mb-3">
                  <label class="form-label" for="dept_type">Department Type <span class="text-danger">*</span></label>
                  <select id="dept_type" name="department_type" class="form-select" required>
                    <option value="">-- Select --</option>
                    <option value="OFFICE">Office</option>
                    <option value="MANUFACTURING">Manufacturing</option>
                    <option value="WAREHOUSE">Warehouse</option>
                    <option value="QA">QA</option>
                    <option value="MAINTENANCE">Maintenance</option>
                    <option value="LOGISTICS">Logistics</option>
                    <option value="HR">HR</option>
                    <option value="FINANCE">Finance</option>
                    <option value="IT">IT</option>
                    <option value="RND">R&D</option>
                    <option value="SALES">Sales</option>
                    <option value="PURCHASE">Purchase</option>
                  </select>
                <div class="invalid-feedback">Please select a department type</div>

                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label" for="parent_department_id">Parent Department</label>
                  <select id="parent_department_id" name="parent_id" class="form-select"></select>
                </div>
              </div>
              <div class="row g-3">
                <div class="col-md-6 mb-3">
                  <label class="form-label" for="dept_status">Status</label>
                  <select id="dept_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>
            </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="resetDepartmentBtn" >
            <i class="fas fa-eraser me-2"></i>Reset
        </button>
  </div>
      @php
        // Fallback caps computation (in case controller did not pass) to align with company masters pattern
        if(!isset($caps)) {
          $user = auth()->user();
          $caps = [
            'view'   => (bool) ($user?->can('masters-product-management-category-management.view') ?? $user?->can('masters-organization-departments.view')),
            'create' => (bool) ($user?->can('masters-organization-departments.create')),
            'update' => (bool) ($user?->can('masters-organization-departments.update')),
            'delete' => (bool) ($user?->can('masters-organization-departments.delete')),
            'export' => (bool) ($user?->can('masters-organization-departments.export')),
            'toggle' => (bool) ($user?->can('masters-organization-departments.update')),
            'manageShifts' => (bool) ($user?->can('masters-organization-departments.update')),
            // Related entity permissions for dynamic validation (company, parent department view requirement)
            'companyView' => (bool) ($user?->can('masters-organization-company-masters.view')),
            'departmentView' => (bool) ($user?->can('masters-organization-departments.view')),
          ];
        }
      @endphp
      @if(($caps['create'] ?? false) || ($caps['update'] ?? false))
        <button type="button" id="saveDepartmentBtn" class="btn btn-sm btn-primary"><span class="fas fa-save me-1"></span><span id="departmentSaveBtnText">Save Department</span></button>
      @endif
    </div>
  </div>
</div>

<!-- Import Department Modal -->
<div class="modal fade" id="importDepartmentModal" tabindex="-1" aria-labelledby="importDepartmentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="importDepartmentModalLabel">
                    <i class="fas fa-upload me-2"></i>Import Department 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 department 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>
                        <li>Parent department codes must exist (for hierarchical structure)</li>
                    </ul>
                </div>

                <!-- Error Display -->
                <div id="importDepartmentFileError" 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.departments.import-template') }}" class="btn btn-outline-primary" id="downloadDepartmentTemplateBtn">
                            <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="importDepartmentDropzone">
                        <input type="file" id="importDepartmentFileInput" accept=".xlsx,.csv" class="d-none">
                        <div class="dropzone-placeholder" id="departmentDropzonePlaceholder">
                            <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="browseDepartmentFileBtn">
                                <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="departmentDropzonePreview">
                            <i class="fas fa-file-excel text-success fs-1 mb-2 d-block"></i>
                            <p class="mb-1 fw-semi-bold" id="departmentFileNameDisplay"></p>
                            <p class="text-muted fs-10 mb-2" id="departmentFileSizeDisplay"></p>
                            <button type="button" class="btn btn-sm btn-falcon-danger" id="clearDepartmentImportFile">
                                <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="skipDepartmentDuplicates" checked>
                        <label class="form-check-label" for="skipDepartmentDuplicates">
                            Skip duplicate departments (by department code)
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="validateDepartmentOnly">
                        <label class="form-check-label" for="validateDepartmentOnly">
                            Validate only (don't import, just check for errors)
                        </label>
                    </div>
                </div>

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

                <!-- Results Display -->
                <div id="importDepartmentResults" 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="departmentImportedCount">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="departmentSkippedCount">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="departmentErrorsCount">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="departmentTotalCount">0</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="departmentErrorDetailsList" class="d-none">
                        <div class="alert alert-danger">
                            <strong><i class="fas fa-exclamation-circle me-2"></i>Errors Found:</strong>
                            <ul id="departmentErrorsList" 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="startDepartmentImportBtn" disabled>
                    <i class="fas fa-upload me-2"></i>Start Import
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
  #departmentsTableCard table td { vertical-align: middle; }
  /* Reusable wide offcanvas helper + specific offcanvas widths */
  .offcanvas-wide { --bs-offcanvas-width: clamp(960px, 80vw, 1280px); width: clamp(960px, 80vw, 1280px) !important; max-width: 100vw; }
  @media (max-width: 768px) { .offcanvas-wide { --bs-offcanvas-width: 100vw; width: 100vw !important; } }
  #deptShiftManageOffcanvas { --bs-offcanvas-width: clamp(960px, 80vw, 1280px); width: clamp(960px, 80vw, 1280px) !important; max-width: 100vw; }
  @media (max-width: 768px) { #deptShiftManageOffcanvas { --bs-offcanvas-width: 100vw; width: 100vw !important; } }

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

  #importDepartmentModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }
</style>
@endpush

@push('scripts')
<!-- flatpickr for polished date picking -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr" defer></script>
<script src="{{ asset('assets/js/custom/organization/department_masters.js') }}"></script>
<script src="{{ asset('assets/js/custom/organization/department_shifts.js') }}"></script>
<script>
  window.pageCaps = @json($caps ?? []);
  // Progressive enhancement: hide runtime if backend locked something after render
  document.addEventListener('DOMContentLoaded', function(){
    const caps = window.pageCaps || {};
    if(!caps.create){ document.getElementById('addDepartmentBtn')?.classList.add('d-none'); }
    if(!caps.export){ document.getElementById('exportDepartments')?.classList.add('d-none'); }
    // Save button dynamic guard (form can be reused for create/update)
    const saveBtn = document.getElementById('saveDepartmentBtn');
    if(saveBtn && !(caps.create || caps.update)) { saveBtn.classList.add('d-none'); }
  });
</script>
@endpush