@extends('layouts.app')
@section('title','Settings')
@section('page-title','System Settings')
@section('breadcrumb','SpaceHR/ Settings')

@section('content')
<div class="page-body">
  <div class="page-header animate-entry">
    <div class="page-header-title">
      <h1>System Settings</h1>
      <p>Configure company information, working hours, leave policies and payroll rules</p>
    </div>
  </div>

  <div class="tab-row">
    <button class="tab-btn active" onclick="switchSettingsTab('company')">
      <i class="fas fa-building" style="margin-right:6px"></i>Company
    </button>
    <button class="tab-btn" onclick="switchSettingsTab('hours')">
      <i class="fas fa-clock" style="margin-right:6px"></i>Working Hours
    </button>
    <button class="tab-btn" onclick="switchSettingsTab('leave')">
      <i class="fas fa-umbrella-beach" style="margin-right:6px"></i>Leave Policy
    </button>
    <button class="tab-btn" onclick="switchSettingsTab('payroll')">
      <i class="fas fa-wallet" style="margin-right:6px"></i>Payroll
    </button>
    <button class="tab-btn" onclick="switchSettingsTab('hierarchy')">
      <i class="fas fa-ranking-star" style="margin-right:6px"></i>Hierarchy
    </button>
    <button class="tab-btn" onclick="switchSettingsTab('permissions')">
      <i class="fas fa-shield-halved" style="margin-right:6px"></i>Permissions
    </button>
    <button class="tab-btn" onclick="switchSettingsTab('departments');loadDepts()">
      <i class="fas fa-sitemap" style="margin-right:6px"></i>Departments
    </button>
  </div>

  {{-- ── Company Tab ─────────────────────────────────────────── --}}
  <div id="st-company">
    <div class="grid-2">
      <div class="panel">
        <div class="panel-header">
          <span class="panel-title"><i class="fas fa-building" style="color:var(--accent-cyan);margin-right:8px"></i>Company Information</span>
        </div>
        <div class="panel-body">
          <div class="form-grid">
            <div class="form-group full">
              <label class="form-label">Company Name *</label>
              <input class="form-control" id="c-name" value="{{ $company['company_name'] ?? 'SpaceHREnterprise Solutions Ltd.' }}">
            </div>
            <div class="form-group">
              <label class="form-label">Industry</label>
              <input class="form-control" id="c-industry" value="{{ $company['industry'] ?? 'Technology' }}">
            </div>
            <div class="form-group">
              <label class="form-label">Country</label>
              <input class="form-control" id="c-country" value="{{ $company['country'] ?? 'Bangladesh' }}">
            </div>
            <div class="form-group">
              <label class="form-label">Currency</label>
              <select class="form-control" id="c-currency">
                @foreach(['USD ($)' => 'USD', 'BDT (৳)' => 'BDT', 'EUR (€)' => 'EUR', 'GBP (£)' => 'GBP', 'INR (₹)' => 'INR', 'AED (د.إ)' => 'AED', 'SGD (S$)' => 'SGD'] as $label => $val)
                  <option value="{{ $val }}" {{ ($company['currency'] ?? 'USD') === $val ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Fiscal Year Start</label>
              <input type="month" class="form-control" id="c-fiscal" value="{{ $company['fiscal_year_start'] ?? '2026-01' }}">
            </div>
            <div class="form-group full">
              <label class="form-label">Head Office Address</label>
              <input class="form-control" id="c-address" value="{{ $company['address'] ?? '' }}" placeholder="Street, City, Country">
            </div>
          </div>
          <button class="btn btn-primary" style="margin-top:16px" onclick="saveCompany()">
            <i class="fas fa-save"></i> Save Company Settings
          </button>
        </div>
      </div>

      <div class="panel">
        <div class="panel-header">
          <span class="panel-title"><i class="fas fa-info-circle" style="color:var(--accent-violet);margin-right:8px"></i>System Information</span>
        </div>
        <div class="panel-body">
          <div style="display:flex;flex-direction:column;gap:12px">
            @php
              $items = [
                ['SpaceHRVersion', 'v3.0 Enterprise', 'fas fa-code-branch', 'var(--accent-cyan)'],
                ['Laravel Version', '11.x', 'fab fa-laravel', '#FF2D20'],
                ['PHP Version', phpversion(), 'fab fa-php', '#777BB4'],
                ['Database', config('database.default').' — '.config('database.connections.'.config('database.default').'.database','nexahr'), 'fas fa-database', 'var(--accent-teal)'],
                ['Environment', app()->environment(), 'fas fa-server', app()->isProduction() ? 'var(--accent-teal)' : 'var(--accent-amber)'],
                ['Timezone', config('app.timezone'), 'fas fa-globe', 'var(--accent-violet)'],
              ];
            @endphp
            @foreach($items as [$label, $val, $icon, $color])
            <div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)">
              <span style="font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:8px">
                <i class="{{ $icon }}" style="color:{{ $color }};width:16px"></i> {{ $label }}
              </span>
              <span style="font-size:12px;font-weight:600">{{ $val }}</span>
            </div>
            @endforeach
          </div>

          <div style="margin-top:20px">
            <div style="font-size:11px;color:var(--text-muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.8px">Quick Actions</div>
            <div style="display:flex;flex-direction:column;gap:8px">
              <button class="btn btn-secondary" onclick="clearCache()"><i class="fas fa-broom"></i> Clear Application Cache</button>
              <button class="btn btn-secondary" onclick="showToast('Config cache cleared!','success')"><i class="fas fa-cog"></i> Clear Config Cache</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- ── Working Hours Tab ───────────────────────────────────── --}}
  <div id="st-hours" style="display:none">
    <div class="grid-2">
      <div class="panel">
        <div class="panel-header">
          <span class="panel-title"><i class="fas fa-clock" style="color:var(--accent-amber);margin-right:8px"></i>Working Hours Policy</span>
        </div>
        <div class="panel-body">
          <div class="form-grid">
            <div class="form-group">
              <label class="form-label">Work Start Time</label>
              <input type="time" class="form-control" id="h-start" value="{{ $hours['work_start'] ?? '09:00' }}">
            </div>
            <div class="form-group">
              <label class="form-label">Work End Time</label>
              <input type="time" class="form-control" id="h-end" value="{{ $hours['work_end'] ?? '18:00' }}">
            </div>
            <div class="form-group">
              <label class="form-label">Work Days Per Week</label>
              <select class="form-control" id="h-days">
                <option value="5" {{ ($hours['work_days_per_week'] ?? 5) == 5 ? 'selected' : '' }}>5 days (Mon–Fri)</option>
                <option value="6" {{ ($hours['work_days_per_week'] ?? 5) == 6 ? 'selected' : '' }}>6 days (Mon–Sat)</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Overtime Rate</label>
              <select class="form-control" id="h-ot">
                <option value="1.5" {{ ($hours['overtime_rate'] ?? '1.5') === '1.5' ? 'selected' : '' }}>1.5× Hourly Rate</option>
                <option value="2.0" {{ ($hours['overtime_rate'] ?? '') === '2.0' ? 'selected' : '' }}>2.0× Hourly Rate</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Late Grace Period (minutes)</label>
              <input type="number" class="form-control" id="h-grace" value="{{ $hours['late_grace_minutes'] ?? 15 }}" min="0" max="60">
              <span style="font-size:10px;color:var(--text-muted);margin-top:3px;display:block">Employees arriving within this window are not marked as late</span>
            </div>
            <div class="form-group">
              <label class="form-label">Payroll Processing Day</label>
              <input type="number" class="form-control" id="h-payday" value="{{ $hours['payroll_day'] ?? 28 }}" min="1" max="31">
              <span style="font-size:10px;color:var(--text-muted);margin-top:3px;display:block">Day of month to run payroll automatically</span>
            </div>
          </div>
          <button class="btn btn-primary" style="margin-top:16px" onclick="saveHours()">
            <i class="fas fa-save"></i> Save Hours Settings
          </button>
        </div>
      </div>

      <div class="panel">
        <div class="panel-header"><span class="panel-title">Attendance Rules</span></div>
        <div class="panel-body">
          <div style="display:flex;flex-direction:column;gap:14px">
            @php
              $rules = [
                ['Auto-mark Absent', 'Employees with no attendance record are auto-marked absent at midnight', true],
                ['Overtime Tracking', 'Track and calculate overtime hours automatically', true],
                ['Half-day Detection', 'Allow marking attendance as half-day', true],
                ['Weekend Override', 'Allow marking attendance on weekends', false],
                ['Holiday Blocking', 'Block attendance marking on declared holidays', true],
              ];
            @endphp
            @foreach($rules as [$label, $desc, $default])
            <div style="display:flex;align-items:flex-start;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)">
              <div style="flex:1;padding-right:16px">
                <div style="font-size:12px;font-weight:600;margin-bottom:2px">{{ $label }}</div>
                <div style="font-size:11px;color:var(--text-muted)">{{ $desc }}</div>
              </div>
              <label style="cursor:pointer;flex-shrink:0">
                <input type="checkbox" {{ $default ? 'checked' : '' }} style="accent-color:var(--accent-cyan);width:16px;height:16px">
              </label>
            </div>
            @endforeach
          </div>
          <button class="btn btn-secondary" style="margin-top:16px" onclick="showToast('Attendance rules saved!','success')">
            <i class="fas fa-save"></i> Save Attendance Rules
          </button>
        </div>
      </div>
    </div>
  </div>

  {{-- ── Leave Policy Tab ────────────────────────────────────── --}}
  <div id="st-leave" style="display:none">
    <div class="grid-2">
      <div class="panel">
        <div class="panel-header">
          <span class="panel-title"><i class="fas fa-umbrella-beach" style="color:var(--accent-teal);margin-right:8px"></i>Leave Entitlements</span>
        </div>
        <div class="panel-body">
          <div class="form-grid">
            <div class="form-group">
              <label class="form-label">Annual Leave Days</label>
              <input type="number" class="form-control" id="l-annual" value="{{ $leavePolicy['annual_leave_days'] ?? 21 }}" min="0">
            </div>
            <div class="form-group">
              <label class="form-label">Sick Leave Days</label>
              <input type="number" class="form-control" id="l-sick" value="{{ $leavePolicy['sick_leave_days'] ?? 14 }}" min="0">
            </div>
            <div class="form-group">
              <label class="form-label">Casual Leave Days</label>
              <input type="number" class="form-control" id="l-casual" value="{{ $leavePolicy['casual_leave_days'] ?? 10 }}" min="0">
            </div>
            <div class="form-group">
              <label class="form-label">Maternity Leave Days</label>
              <input type="number" class="form-control" id="l-maternity" value="{{ $leavePolicy['maternity_leave_days'] ?? 120 }}" min="0">
            </div>
            <div class="form-group">
              <label class="form-label">Paternity Leave Days</label>
              <input type="number" class="form-control" id="l-paternity" value="{{ $leavePolicy['paternity_leave_days'] ?? 14 }}" min="0">
            </div>
            <div class="form-group">
              <label class="form-label">Max Carry-Forward Days</label>
              <input type="number" class="form-control" id="l-carry" value="{{ $leavePolicy['carry_forward_max'] ?? 10 }}" min="0">
            </div>
          </div>
          <button class="btn btn-primary" style="margin-top:16px" onclick="saveLeave()">
            <i class="fas fa-save"></i> Save Leave Policy
          </button>
        </div>
      </div>

      <div class="panel">
        <div class="panel-header"><span class="panel-title">Leave Rules</span></div>
        <div class="panel-body">
          <div style="display:flex;flex-direction:column;gap:14px">
            @php
              $leaveRules = [
                ['Advance Notice Required', 'Require employees to apply leave in advance', '3 days', true],
                ['Medical Certificate', 'Require medical cert for sick leave > 2 days', '2+ days', true],
                ['Manager Approval', 'All leaves need manager approval', 'Always', true],
                ['Half-Day Leave', 'Allow half-day leave applications', 'Enabled', true],
                ['Leave Encashment', 'Allow unused leave encashment', 'Disabled', false],
              ];
            @endphp
            @foreach($leaveRules as [$label, $desc, $badge, $active])
            <div style="display:flex;align-items:flex-start;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)">
              <div style="flex:1;padding-right:12px">
                <div style="font-size:12px;font-weight:600;margin-bottom:2px">{{ $label }}</div>
                <div style="font-size:11px;color:var(--text-muted)">{{ $desc }}</div>
              </div>
              <div style="display:flex;align-items:center;gap:8px;flex-shrink:0">
                <span style="font-size:10px;background:var(--bg-hover);padding:2px 8px;border-radius:4px;color:var(--text-muted)">{{ $badge }}</span>
                <label style="cursor:pointer">
                  <input type="checkbox" {{ $active ? 'checked' : '' }} style="accent-color:var(--accent-cyan);width:16px;height:16px">
                </label>
              </div>
            </div>
            @endforeach
          </div>
          <button class="btn btn-secondary" style="margin-top:16px" onclick="showToast('Leave rules saved!','success')">
            <i class="fas fa-save"></i> Save Leave Rules
          </button>
        </div>
      </div>
    </div>
  </div>

  {{-- ── Payroll Tab ─────────────────────────────────────────── --}}
  <div id="st-payroll" style="display:none">
    <div class="grid-2">
      <div class="panel">
        <div class="panel-header">
          <span class="panel-title"><i class="fas fa-wallet" style="color:var(--accent-cyan);margin-right:8px"></i>Payroll Configuration</span>
        </div>
        <div class="panel-body">
          <div class="form-grid">
            <div class="form-group">
              <label class="form-label">Income Tax %</label>
              <input type="number" class="form-control" id="p-tax" value="{{ $payroll['income_tax_pct'] ?? 12 }}" min="0" max="100" step="0.5">
              <span style="font-size:10px;color:var(--text-muted);margin-top:3px;display:block">Applied on gross salary</span>
            </div>
            <div class="form-group">
              <label class="form-label">Provident Fund %</label>
              <input type="number" class="form-control" id="p-pf" value="{{ $payroll['provident_fund_pct'] ?? 8 }}" min="0" max="30">
              <span style="font-size:10px;color:var(--text-muted);margin-top:3px;display:block">Applied on basic salary</span>
            </div>
            <div class="form-group">
              <label class="form-label">Health Insurance %</label>
              <input type="number" class="form-control" id="p-health" value="{{ $payroll['health_insurance_pct'] ?? 2 }}" min="0" max="20">
            </div>
            <div class="form-group">
              <label class="form-label">HRA % of Basic</label>
              <input type="number" class="form-control" id="p-hra" value="{{ $payroll['hra_pct'] ?? 40 }}" min="0" max="100">
              <span style="font-size:10px;color:var(--text-muted);margin-top:3px;display:block">House Rent Allowance</span>
            </div>
            <div class="form-group">
              <label class="form-label">Annual Bonus Month</label>
              <select class="form-control" id="p-bonus-month">
                @foreach(['January','February','March','April','May','June','July','August','September','October','November','December'] as $m)
                  <option value="{{ $m }}" {{ ($payroll['bonus_month'] ?? 'December') === $m ? 'selected' : '' }}>{{ $m }}</option>
                @endforeach
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Bonus Amount</label>
              <select class="form-control" id="p-bonus-type">
                <option value="1 Month Salary" {{ ($payroll['bonus_type'] ?? '') === '1 Month Salary' ? 'selected' : '' }}>1 Month Basic Salary</option>
                <option value="2 Months Salary" {{ ($payroll['bonus_type'] ?? '') === '2 Months Salary' ? 'selected' : '' }}>2 Months Basic Salary</option>
                <option value="Fixed Amount">Fixed Amount</option>
              </select>
            </div>
          </div>
          <div id="payroll-preview" style="background:var(--bg-hover);border-radius:8px;padding:14px;margin-top:16px">
            <div style="font-size:11px;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.8px">Preview (based on $5,000 basic)</div>
            <div id="preview-breakdown" style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px"></div>
          </div>
          <button class="btn btn-primary" style="margin-top:16px" onclick="savePayroll()">
            <i class="fas fa-save"></i> Save Payroll Settings
          </button>
        </div>
      </div>

      <div class="panel">
        <div class="panel-header"><span class="panel-title">Deduction Rules</span></div>
        <div class="panel-body">
          <div style="display:flex;flex-direction:column;gap:14px">
            @php
              $deductRules = [
                ['Absent Day Deduction', 'Deduct salary for absent days proportionally', true],
                ['Late Deduction', 'Deduct for repeated late arrivals (3+/month)', false],
                ['TDS Calculation', 'Auto-calculate Tax Deducted at Source', true],
                ['PF Employer Match', 'Employer matches provident fund contribution', true],
                ['ESI / Health Cover', 'Deduct for employee health insurance', true],
              ];
            @endphp
            @foreach($deductRules as [$label, $desc, $active])
            <div style="display:flex;align-items:flex-start;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)">
              <div style="flex:1;padding-right:12px">
                <div style="font-size:12px;font-weight:600;margin-bottom:2px">{{ $label }}</div>
                <div style="font-size:11px;color:var(--text-muted)">{{ $desc }}</div>
              </div>
              <label style="cursor:pointer;flex-shrink:0">
                <input type="checkbox" {{ $active ? 'checked' : '' }} style="accent-color:var(--accent-cyan);width:16px;height:16px">
              </label>
            </div>
            @endforeach
          </div>
          <div style="background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:12px 14px;margin-top:16px;font-size:12px;color:var(--accent-amber)">
            <i class="fas fa-exclamation-triangle"></i>
            Changes to deduction rules take effect from the <strong>next payroll run</strong>. Existing processed payrolls are not affected.
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- ── Departments Tab ─────────────────────────────────────── --}}
  <div id="st-hierarchy" style="display:none">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title"><i class="fas fa-ranking-star" style="color:var(--accent-cyan);margin-right:8px"></i>Organization Hierarchy</span>
        <button class="btn btn-primary btn-sm" onclick="addHierarchyRow()"><i class="fas fa-plus"></i> Add Level</button>
      </div>
      <div class="panel-body">
        <div style="background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:14px;font-size:12px;color:var(--text-secondary)">
          Configure the keys used in employee profiles. Higher rank means higher in the organization.
        </div>
        <div id="hierarchy-rows" style="display:flex;flex-direction:column;gap:10px"></div>
        <button class="btn btn-primary" style="margin-top:16px" onclick="saveHierarchy()">
          <i class="fas fa-save"></i> Save Hierarchy
        </button>
      </div>
    </div>
  </div>

  <div id="st-permissions" style="display:none">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title"><i class="fas fa-shield-halved" style="color:var(--accent-teal);margin-right:8px"></i>Role Permissions</span>
        <button class="btn btn-primary btn-sm" onclick="savePermissions()"><i class="fas fa-save"></i> Save Permissions</button>
      </div>
      <div class="panel-body">
        <div style="background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:14px;font-size:12px;color:var(--text-secondary)">
          Configure which modules appear for each role. Manager leave approval is limited to direct reports from the reporting hierarchy.
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);margin-bottom:14px">
          <div>
            <div style="font-size:13px;font-weight:700">Manager Leave Approval</div>
            <div style="font-size:11px;color:var(--text-muted)">Allow configured managers to approve or reject direct-report leave requests.</div>
          </div>
          <label style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);cursor:pointer">
            <input type="checkbox" id="perm-manager-approval" {{ $managerApprovalEnabled ? 'checked' : '' }} style="accent-color:var(--accent-cyan);width:16px;height:16px">
            Enabled
          </label>
        </div>
        <div style="overflow:auto">
          <table class="data-table">
            <thead>
              <tr>
                <th style="min-width:150px">Role</th>
                @foreach($availablePermissions as $key => $label)
                  <th style="min-width:120px;text-align:center" title="{{ $label }}">{{ ucwords(str_replace('_',' ', $key)) }}</th>
                @endforeach
              </tr>
            </thead>
            <tbody>
              @foreach($rolePermissions as $role => $permissions)
                <tr>
                  <td>
                    <div style="font-weight:700">{{ ucwords(str_replace('_',' ', $role)) }}</div>
                    <div style="font-size:10px;color:var(--text-muted)">{{ $role }}</div>
                  </td>
                  @foreach($availablePermissions as $key => $label)
                    <td style="text-align:center">
                      <input type="checkbox"
                        class="permission-check"
                        data-role="{{ $role }}"
                        value="{{ $key }}"
                        {{ in_array($key, $permissions, true) ? 'checked' : '' }}
                        style="accent-color:var(--accent-cyan);width:16px;height:16px">
                    </td>
                  @endforeach
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div id="st-departments" style="display:none">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title"><i class="fas fa-sitemap" style="color:var(--accent-violet);margin-right:8px"></i>Departments</span>
        <button class="btn btn-primary btn-sm" onclick="openModal('modal-add-dept')">
          <i class="fas fa-plus"></i> Add Department
        </button>
      </div>
      <div id="dept-loading" style="text-align:center;padding:32px;color:var(--text-muted)">
        <i class="fas fa-spinner fa-spin fa-2x"></i>
      </div>
      <table class="data-table" id="dept-table" style="display:none">
        <thead>
          <tr><th>Department</th><th>Code</th><th>Employees</th><th>Head</th><th>Status</th><th style="text-align:center">Actions</th></tr>
        </thead>
        <tbody id="depts-tbody"></tbody>
      </table>
    </div>
  </div>
</div>

{{-- Add Department Modal --}}
<div class="modal-overlay" id="modal-add-dept">
  <div class="modal" style="max-width:420px">
    <div class="modal-header">
      <span class="modal-title"><i class="fas fa-building" style="color:var(--accent-cyan);margin-right:8px"></i>Add Department</span>
      <button class="modal-close" onclick="closeModal('modal-add-dept')"><i class="fas fa-times"></i></button>
    </div>
    <div class="modal-body">
      <div class="form-group" style="margin-bottom:14px">
        <label class="form-label">Department Name *</label>
        <input class="form-control" id="df-name" placeholder="e.g. Engineering">
      </div>
      <div class="form-group" style="margin-bottom:14px">
        <label class="form-label">Department Code *</label>
        <input class="form-control" id="df-code" placeholder="e.g. ENG" maxlength="10" oninput="this.value=this.value.toUpperCase()">
        <span style="font-size:10px;color:var(--text-muted);margin-top:3px;display:block">Short code, max 10 characters (auto uppercase)</span>
      </div>
      <div class="form-group">
        <label class="form-label">Description</label>
        <textarea class="form-control" id="df-desc" rows="2" placeholder="Brief description of this department…"></textarea>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('modal-add-dept')">Cancel</button>
      <button class="btn btn-primary" onclick="saveDept()"><i class="fas fa-check"></i> Add Department</button>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
let hierarchyLevels = @json($hierarchy);
let permissionRoles = @json(array_keys($rolePermissions));
$(document).ready(function () {
  updatePayrollPreview();
  renderHierarchyRows();
  $('#p-tax, #p-pf, #p-health, #p-hra').on('input', updatePayrollPreview);
});

function switchSettingsTab(tab) {
  ['company','hours','leave','payroll','hierarchy','permissions','departments'].forEach(t => $(`#st-${t}`).hide());
  $(`#st-${tab}`).show();
  const map = { company:'Company', hours:'Working Hours', leave:'Leave Policy', payroll:'Payroll', hierarchy:'Hierarchy', permissions:'Permissions', departments:'Departments' };
  $('.tab-btn').removeClass('active');
  $(`.tab-btn:contains('${map[tab]}')`).addClass('active');
}

function saveCompany() {
  const d = {
    company_name:       $('#c-name').val().trim(),
    industry:           $('#c-industry').val().trim(),
    country:            $('#c-country').val().trim(),
    currency:           $('#c-currency').val(),
    fiscal_year_start:  $('#c-fiscal').val(),
    address:            $('#c-address').val().trim(),
    _method:            'PUT',
  };
  if (!d.company_name) { showToast('Company name is required', 'error'); return; }
  $.post('/settings/company', d, () => showToast('Company settings saved!', 'success'))
   .fail(() => showToast('Error saving settings', 'error'));
}

function saveHours() {
  const d = {
    work_start:         $('#h-start').val(),
    work_end:           $('#h-end').val(),
    work_days_per_week: $('#h-days').val(),
    overtime_rate:      $('#h-ot').val(),
    late_grace_minutes: $('#h-grace').val(),
    payroll_day:        $('#h-payday').val(),
    _method:            'PUT',
  };
  $.post('/settings/working-hours', d, () => showToast('Working hours saved!', 'success'))
   .fail(xhr => showToast(Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error saving','error'));
}

function saveLeave() {
  const d = {
    annual_leave_days:    $('#l-annual').val(),
    sick_leave_days:      $('#l-sick').val(),
    casual_leave_days:    $('#l-casual').val(),
    maternity_leave_days: $('#l-maternity').val(),
    paternity_leave_days: $('#l-paternity').val(),
    carry_forward_max:    $('#l-carry').val(),
    _method:              'PUT',
  };
  $.post('/settings/leave-policy', d, () => showToast('Leave policy saved!', 'success'))
   .fail(() => showToast('Error saving leave policy', 'error'));
}

function savePayroll() {
  const d = {
    income_tax_pct:       $('#p-tax').val(),
    provident_fund_pct:   $('#p-pf').val(),
    health_insurance_pct: $('#p-health').val(),
    hra_pct:              $('#p-hra').val(),
    bonus_month:          $('#p-bonus-month').val(),
    bonus_type:           $('#p-bonus-type').val(),
    _method:              'PUT',
  };
  $.post('/settings/payroll', d, () => showToast('Payroll settings saved!', 'success'))
   .fail(() => showToast('Error saving payroll settings', 'error'));
}

function updatePayrollPreview() {
  const basic   = 5000;
  const hra     = Math.round(basic * (parseFloat($('#p-hra').val()) || 40) / 100);
  const trans   = 400; const med = 300;
  const gross   = basic + hra + trans + med;
  const tax     = Math.round(gross * (parseFloat($('#p-tax').val()) || 12) / 100);
  const pf      = Math.round(basic * (parseFloat($('#p-pf').val()) || 8) / 100);
  const health  = Math.round(gross * (parseFloat($('#p-health').val()) || 2) / 100);
  const net     = gross - tax - pf - health;

  $('#preview-breakdown').html(`
    <div><span style="color:var(--text-muted)">Basic:</span> <strong>$${basic.toLocaleString()}</strong></div>
    <div><span style="color:var(--text-muted)">HRA:</span> <strong style="color:var(--accent-teal)">$${hra.toLocaleString()}</strong></div>
    <div><span style="color:var(--text-muted)">Gross:</span> <strong>$${gross.toLocaleString()}</strong></div>
    <div><span style="color:var(--text-muted)">Income Tax:</span> <strong style="color:var(--accent-rose)">-$${tax.toLocaleString()}</strong></div>
    <div><span style="color:var(--text-muted)">Prov. Fund:</span> <strong style="color:var(--accent-rose)">-$${pf.toLocaleString()}</strong></div>
    <div><span style="color:var(--text-muted)">Health:</span> <strong style="color:var(--accent-rose)">-$${health.toLocaleString()}</strong></div>
    <div style="grid-column:1/-1;border-top:1px solid var(--border);padding-top:8px;margin-top:4px">
      <span style="color:var(--text-muted)">Est. Net Pay:</span>
      <strong style="color:var(--accent-cyan);font-family:'Syne',sans-serif;font-size:16px">$${net.toLocaleString()}</strong>
    </div>`);
}

function renderHierarchyRows() {
  const wrap = $('#hierarchy-rows').empty();
  hierarchyLevels
    .sort((a,b) => Number(b.rank || 0) - Number(a.rank || 0))
    .forEach((level, index) => wrap.append(hierarchyRow(level, index)));
}

function hierarchyRow(level, index) {
  return `<div class="hierarchy-row" data-index="${index}" style="display:grid;grid-template-columns:1fr 1.4fr 100px auto;gap:10px;align-items:end">
    <div class="form-group"><label class="form-label">Key</label><input class="form-control h-key" value="${level.key || ''}" placeholder="TECH_LEAD" oninput="this.value=this.value.toUpperCase().replace(/\\s+/g,'_')"></div>
    <div class="form-group"><label class="form-label">Label</label><input class="form-control h-label" value="${level.label || ''}" placeholder="Tech Lead"></div>
    <div class="form-group"><label class="form-label">Rank</label><input class="form-control h-rank" type="number" min="1" value="${level.rank || 1}"></div>
    <button class="btn btn-danger btn-sm" onclick="removeHierarchyRow(${index})" title="Remove"><i class="fas fa-trash"></i></button>
  </div>`;
}

function addHierarchyRow() {
  hierarchyLevels.push({ key:'', label:'', rank:1 });
  renderHierarchyRows();
}

function removeHierarchyRow(index) {
  hierarchyLevels.splice(index, 1);
  renderHierarchyRows();
}

function collectHierarchyLevels() {
  return $('.hierarchy-row').map(function () {
    return {
      key: $(this).find('.h-key').val().trim().toUpperCase(),
      label: $(this).find('.h-label').val().trim(),
      rank: $(this).find('.h-rank').val(),
    };
  }).get().filter(level => level.key && level.label && level.rank);
}

function saveHierarchy() {
  const levels = collectHierarchyLevels();
  if (!levels.length) { showToast('Add at least one hierarchy level', 'error'); return; }
  $.ajax({ url:'/settings/hierarchy', type:'PUT', data:{ levels } })
    .done(res => { hierarchyLevels = res.levels || levels; renderHierarchyRows(); showToast('Hierarchy saved!', 'success'); })
    .fail(xhr => showToast(Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error saving hierarchy','error'));
}

function savePermissions() {
  const roles = {};
  permissionRoles.forEach(role => {
    roles[role] = $(`.permission-check[data-role="${role}"]:checked`).map(function () {
      return $(this).val();
    }).get();
  });

  $.ajax({
    url: '/settings/permissions',
    type: 'PUT',
    data: {
      roles,
      manager_leave_approval_enabled: $('#perm-manager-approval').is(':checked') ? 1 : 0,
    },
  }).done(() => showToast('Role permissions saved!', 'success'))
    .fail(xhr => showToast(Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error saving permissions','error'));
}

function loadDepts() {
  $('#dept-loading').show(); $('#dept-table').hide();
  $.get('/settings/departments', function (data) {
    $('#dept-loading').hide(); $('#dept-table').show();
    const tbody = $('#depts-tbody').empty();
    if (!data.length) {
      tbody.html('<tr><td colspan="6" style="text-align:center;padding:28px;color:var(--text-muted)">No departments found</td></tr>');
      return;
    }
    data.forEach(d => {
      tbody.append(`<tr>
        <td>
          <div style="display:flex;align-items:center;gap:10px">
            <div style="width:36px;height:36px;border-radius:8px;background:rgba(139,92,246,.12);display:grid;place-items:center">
              <i class="fas fa-sitemap" style="color:var(--accent-violet);font-size:14px"></i>
            </div>
            <div>
              <div style="font-weight:600;font-size:13px">${d.name}</div>
              ${d.description ? `<div style="font-size:11px;color:var(--text-muted)">${d.description}</div>` : ''}
            </div>
          </div>
        </td>
        <td><span class="badge badge-approved" style="font-family:'Syne',sans-serif;font-weight:700">${d.code}</span></td>
        <td>
          <span style="font-family:'Syne',sans-serif;font-weight:700;color:var(--accent-cyan)">${d.employees_count || 0}</span>
          <span style="font-size:11px;color:var(--text-muted)"> employees</span>
        </td>
        <td style="font-size:11px;color:var(--text-secondary)">${d.head?.full_name || '—'}</td>
        <td>${statusBadge(d.is_active ? 'active' : 'inactive')}</td>
        <td style="text-align:center">
          <div style="display:flex;gap:4px;justify-content:center">
            <button class="btn btn-amber btn-sm" title="Edit" onclick="editDept(${d.id},'${d.name}','${d.code}')"><i class="fas fa-edit"></i></button>
            <button class="btn btn-danger btn-sm" title="Delete" onclick="deleteDept(${d.id},'${d.name}')"><i class="fas fa-trash"></i></button>
          </div>
        </td>
      </tr>`);
    });
  }).fail(() => { $('#dept-loading').html('<i class="fas fa-exclamation-triangle" style="color:var(--accent-rose)"></i> Error loading'); });
}

function saveDept() {
  const d = { name: $('#df-name').val().trim(), code: $('#df-code').val().toUpperCase().trim(), description: $('#df-desc').val().trim() };
  if (!d.name || !d.code) { showToast('Name and code are required', 'error'); return; }
  $.post('/settings/departments', d, () => {
    showToast('Department added!', 'success');
    closeModal('modal-add-dept');
    $('#df-name, #df-code, #df-desc').val('');
    loadDepts();
  }).fail(xhr => showToast(Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error adding department','error'));
}

function editDept(id, name, code) {
  const newName = prompt('Department name:', name);
  if (!newName) return;
  $.ajax({ url:`/settings/departments/${id}`, type:'PUT', data:{ name:newName }, success:() => { showToast('Department updated!','success'); loadDepts(); }});
}

function deleteDept(id, name) {
  if (!confirm(`Delete "${name}"?\n\nThis cannot be done if the department has employees.`)) return;
  $.ajax({
    url:`/settings/departments/${id}`, type:'DELETE',
    success: () => { showToast('Department deleted', 'success'); loadDepts(); },
    error: xhr => showToast(xhr.responseJSON?.message || 'Cannot delete this department', 'error'),
  });
}

function clearCache() {
  showToast('Cache cleared successfully!', 'success');
}
</script>
@endpush