@extends('layouts.app')

@section('title', 'Work Centers')

@section('content')
<div class="card mb-3" id="workCentersTableCard" data-list='{"valueNames":["code","name","plant","department","capacity","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">Work Centers</h5>
      </div>
      <div class="col-8 col-sm-auto text-end ps-2">
        <div class="d-none" id="table-wc-actions">
          <div class="d-flex">
            <select class="form-select form-select-sm" aria-label="Bulk actions" id="bulk-actions-wc-select">
              <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" id="bulk-actions-wc-apply">Apply</button>
          </div>
        </div>
        <div id="table-wc-replace-element">
          @can('masters-organization-work-centers.create')
          <button class="btn btn-falcon-default btn-sm" type="button" id="addWorkCenterBtn" data-bs-toggle="offcanvas" data-bs-target="#workCenterFormOffcanvas" aria-controls="workCenterFormOffcanvas">
            <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
          <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#wcFilters">
            <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>
        </div>
      </div>
    </div>
  </div>

  <!-- Filters -->
  <div class="collapse" id="wcFilters">
    <div class="card-body border-top fs-10">
      <form id="wcFilterForm" class="row gy-2 gx-2 align-items-end">
        <div class="col-auto">
          <select id="filter_plant_id" class="form-select form-select-sm" name="plant_id">
            <option value="">Any Plant</option>
          </select>
        </div>
        <div class="col-auto">
          <select id="filter_department_id" class="form-select form-select-sm" name="department_id">
            <option value="">Any Department</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="applyWcFilters"><i class="fas fa-search"></i> Apply</button>
          <button class="btn btn-outline-secondary btn-sm" type="button" id="clearWcFilters"> <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-wc-select" type="checkbox" data-bulk-select='{"body":"table-wc-body","actions":"table-wc-actions","replacedElement":"table-wc-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="plant">Plant</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="department">Department</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="capacity">Capacity/Hr</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="status">Status</th>
            <th class="align-middle no-sort text-end" style="width:54px;"></th>
          </tr>
        </thead>
        <tbody class="list" id="table-wc-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="plant align-middle py-2"></td>
            <td class="department align-middle py-2"></td>
            <td class="capacity align-middle py-2"></td>
            <td class="status align-middle py-2"></td>
            <td class="align-middle white-space-nowrap py-2 text-end"><div class="dropdown position-static"></div></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>

<!-- Offcanvas Form -->
<div class="offcanvas offcanvas-end offcanvas-wide" tabindex="-1" id="workCenterFormOffcanvas" aria-labelledby="workCenterFormOffcanvasLabel">
  <div class="offcanvas-header bg-light offcanvas-header-polished">
    <h5 class="offcanvas-title" id="workCenterFormOffcanvasLabel"><span class="fas fa-cogs me-2"></span><span id="wcFormTitle">New Work Center</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="wcForm" class="needs-validation" novalidate>
              @csrf
              <input type="hidden" name="_method" id="wcFormMethod" value="POST">
              <input type="hidden" name="id" id="wc_id" />

              <div class="mb-3">
                <div class="row g-3">
                  <div class="col-md-6">
                    <label class="form-label" for="plant_id">Plant <span class="text-danger">*</span></label>
                    <select id="plant_id" name="plant_id" class="form-select" required>
                      <option value="">Select Plant</option>
                    </select>
                    <div class="invalid-feedback">Please select a plant</div>
                  </div>
                  <div class="col-md-6">
                    <label class="form-label" for="department_id">Department <span class="text-danger">*</span></label>
                    <select id="department_id" name="department_id" class="form-select" required>
                      <option value="">Select Department</option>
                    </select>
                    <div class="invalid-feedback">Please select a department</div>
                  </div>
                </div>
              </div>

              <div class="mb-3">
                <div class="row g-3">
                  <div class="col-md-6">
                    <label class="form-label" for="code">Code <span class="text-danger">*</span></label>
                    <input id="code" name="code" type="text" class="form-control" maxlength="50" placeholder="Enter unique code" required />
                    <div class="invalid-feedback">Please enter code</div>
                  </div>
                  <div class="col-md-6">
                    <label class="form-label" for="name">Name <span class="text-danger">*</span></label>
                    <input id="name" name="name" type="text" class="form-control" maxlength="255" placeholder="Enter work center name" required />
                    <div class="invalid-feedback">Please enter name</div>
                  </div>
                </div>
              </div>

              <div class="mb-3">
                <div class="row g-3">
                  <div class="col-md-6">
                    <label class="form-label" for="work_center_type">Type <span class="text-danger">*</span></label>
                    <select id="work_center_type" name="work_center_type" class="form-select" required>
                      <option value="MACHINE">Machine</option>
                      <option value="LABOR">Labor</option>
                      <option value="PACKING">Packing</option>
                      <option value="QUALITY">Quality</option>
                      <option value="MAINTENANCE">Maintenance</option>
                      <option value="OUTSOURCE">Outsource</option>
                    </select>
                    <div class="invalid-feedback">Please select type</div>
                  </div>
                  <div class="col-md-6">
                    <label class="form-label" for="workers_required">Workers Required</label>
                    <input id="workers_required" name="workers_required" type="number" min="1" class="form-control" placeholder="e.g., 2" />
                  </div>
                </div>
              </div>

              <div class="mb-3">
                <div class="row g-3">
                  <div class="col-md-4">
                    <label class="form-label" for="capacity_per_hour">Capacity/Hr</label>
                    <input id="capacity_per_hour" name="capacity_per_hour" type="number" min="0" class="form-control" placeholder="e.g., 100" />
                  </div>
                  <div class="col-md-4">
                    <label class="form-label" for="standard_cycle_time_seconds">Cycle Time (sec)</label>
                    <input id="standard_cycle_time_seconds" name="standard_cycle_time_seconds" type="number" min="0" class="form-control" placeholder="e.g., 30" />
                  </div>
                  <div class="col-md-4">
                    <label class="form-label" for="efficiency_target_percent">Efficiency %</label>
                    <input id="efficiency_target_percent" name="efficiency_target_percent" type="number" min="0" step="0.01" class="form-control" placeholder="e.g., 85" />
                  </div>
                </div>
              </div>

              <div class="mb-3">
                <div class="row g-3">
                  <div class="col-md-6">
                    <label class="form-label" for="cost_rate_per_hour">Cost Rate/Hr</label>
                    <input id="cost_rate_per_hour" name="cost_rate_per_hour" type="number" min="0" step="0.01" class="form-control" placeholder="e.g., 500.00" />
                  </div>
                  <div class="col-md-6 d-flex align-items-center">
                    <div class="form-check mt-4">
                      <input class="form-check-input" type="checkbox" id="is_critical" name="is_critical" value="1">
                      <label class="form-check-label" for="is_critical">Critical Work Center</label>
                    </div>
                  </div>
                </div>
              </div>

              <div class="mb-2">
                <div class="row g-3">
                  <div class="col-md-6">
                    <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 class="col-md-6">
                    <label class="form-label" for="description">Description</label>
                    <input id="description" name="description" type="text" class="form-control" placeholder="Optional" />
                  </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">
      <button type="button" class="btn btn-sm btn-falcon-default" data-bs-dismiss="offcanvas">Cancel</button>
      @php
        if(!isset($caps)) {
          $user = auth()->user();
          $caps = [
            'view'   => (bool) ($user?->can('masters-organization-work-centers.view')),
            'create' => (bool) ($user?->can('masters-organization-work-centers.create')),
            'update' => (bool) ($user?->can('masters-organization-work-centers.update')),
            'delete' => (bool) ($user?->can('masters-organization-work-centers.delete')),
            'export' => (bool) ($user?->can('masters-organization-work-centers.export')),
            'toggle' => (bool) ($user?->can('masters-organization-work-centers.update')),
            'plantView' => (bool) ($user?->can('masters-organization-plant-masters.view')),
            'departmentView' => (bool) ($user?->can('masters-organization-departments.view')),
          ];
        }
      @endphp
      @if(($caps['create'] ?? false) || ($caps['update'] ?? false))
        <button type="button" id="saveWcBtn" class="btn btn-sm btn-primary"><span class="fas fa-save me-1"></span><span id="wcSaveBtnText">Save Work Center</span></button>
      @endif
    </div>
  </div>
</div>
@endsection

@push('styles')
<style>
  /* Reusable wide offcanvas helper */
  .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; } }
  #workCentersTableCard table td { vertical-align: middle; }
  /* Keep status badge visible and not collapsed */
  #workCentersTableCard td.status { min-width: 110px; }
  #workCenterFormOffcanvas { --bs-offcanvas-width: clamp(960px, 80vw, 1280px); width: clamp(960px, 80vw, 1280px) !important; max-width: 100vw; }
  @media (max-width: 768px) { #workCenterFormOffcanvas { --bs-offcanvas-width: 100vw; width: 100vw !important; } }
  #workCenterFormOffcanvas .offcanvas-body { display: flex; flex-direction: column; height: 100%; }
  #workCenterFormOffcanvas .form-scroll-container { flex: 1 1 auto; overflow: visible; min-height: 0; }
  #workCenterFormOffcanvas .card.h-100 { display: flex; flex-direction: column; min-height: 0; }
  #workCenterFormOffcanvas .card-body { flex: 1 1 auto; min-height: 0; }
  #workCenterFormOffcanvas .sticky-bottom-footer { flex: 0 0 auto; position: sticky; bottom: 0; }
  #workCenterFormOffcanvas .form-control, #workCenterFormOffcanvas .form-select { font-size: 0.875rem; }
  #workCenterFormOffcanvas .form-label { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; }

  /* Manage Shifts Offcanvas: match form standards */
  #wcShiftManageOffcanvas { --bs-offcanvas-width: clamp(960px, 80vw, 1280px); width: clamp(960px, 80vw, 1280px) !important; max-width: 100vw; }
  @media (max-width: 768px) { #wcShiftManageOffcanvas { --bs-offcanvas-width: 100vw; width: 100vw !important; } }
  #wcShiftManageOffcanvas .offcanvas-body { display: flex; flex-direction: column; height: 100%; }
  #wcShiftManageOffcanvas .form-scroll-container { flex: 1 1 auto; overflow: visible; min-height: 0; }
  #wcShiftManageOffcanvas .card.h-100 { display: flex; flex-direction: column; min-height: 0; }
  #wcShiftManageOffcanvas .card-body { flex: 1 1 auto; min-height: 0; }
  #wcShiftManageOffcanvas .sticky-bottom-footer { flex: 0 0 auto; position: sticky; bottom: 0; }
  #wcShiftManageOffcanvas .form-control, #wcShiftManageOffcanvas .form-select { font-size: 0.875rem; }
  #wcShiftManageOffcanvas .form-label { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; }
</style>
@endpush

<!-- Work Center → Manage Shifts Offcanvas -->
<div class="offcanvas offcanvas-end offcanvas-wide" tabindex="-1" id="wcShiftManageOffcanvas" aria-labelledby="wcShiftManageOffcanvasLabel">
  <div class="offcanvas-header bg-light offcanvas-header-polished">
    <div>
      <h5 class="offcanvas-title mb-0" id="wcShiftManageOffcanvasLabel">
        <span class="fas fa-clock me-2"></span>Manage Shifts
      </h5>
      <div class="small text-muted"><strong id="wcms_wc_title">Work Center</strong> · <span id="wcms_wc_meta">Plant · Department</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="wcShiftsDisabledNote" class="alert alert-info py-2 px-3 d-none">Save the work center first to manage shifts.</div>
            <div id="wcShiftsControls" class="row g-3 align-items-end">
              <div class="col-md-6">
                <label class="form-label" for="wc_shift_select">Shift</label>
                <select id="wc_shift_select" class="form-select">
                  <option value="">Select Shift</option>
                </select>
              </div>
                <div class="col-md-6">
                <label class="form-label" for="wc_shift_capacity">Capacity O/R</label>
                <input id="wc_shift_capacity" type="number" min="0" class="form-control" placeholder="e.g., 120" />
              </div>
              <div class="col-md-6">
                <label class="form-label" for="wc_shift_from">Effective From</label>
                <input id="wc_shift_from" type="text" class="form-control" />
              </div>
              <div class="col-md-6">
                <label class="form-label" for="wc_shift_to">Effective To</label>
                <input id="wc_shift_to" type="text" class="form-control" />
              </div>

              <div class="col-12 mt-1">
                <button type="button" id="wcAddShiftBtn" 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>Capacity O/R</th>
                    <th class="text-end" style="width:60px;">Actions</th>
                  </tr>
                </thead>
                <tbody id="wcShiftTableBody">
                  <tr><td colspan="5" 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>

@push('scripts')
<!-- SweetAlert2 for standardized alerts -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
<!-- 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/work_centers.js') }}"></script>
<script>
  window.pageCaps = @json($caps ?? []);
  document.addEventListener('DOMContentLoaded', function(){
    const c = window.pageCaps || {};
    if(!c.create) document.getElementById('addWorkCenterBtn')?.classList.add('d-none');
    const saveBtn = document.getElementById('saveWcBtn');
    if(saveBtn && !(c.create || c.update)) saveBtn.classList.add('d-none');
  });
</script>
@endpush