@extends('layouts.app')
@section('title', 'Payroll & HR')

@php
  $qparams = request()->only(['q','status','employment_type','project_id','sort','direction','per_page']);
  $att = (float) ($stats['attendance_rate'] ?? 0);
  $attClass = $att >= 85 ? 'text-emerald-600' : ($att >= 60 ? 'text-amber-600' : 'text-red-600');
  $hasFilters = ($filters['q'] ?? '') !== ''
    || ($filters['status'] ?? 'all') !== 'all'
    || ($filters['employment_type'] ?? 'all') !== 'all'
    || ($filters['project_id'] ?? '') !== '';
@endphp

@section('content')
<div class="p-4 sm:p-6 lg:p-7">
  @if ($errors->any())
    <div class="mb-4 rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-red-800 text-[13px]">
      <p class="font-semibold mb-1">Please fix the following:</p>
      <ul class="list-disc pl-5 space-y-0.5">
        @foreach ($errors->all() as $err)
          <li>{{ $err }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  @if (session('payroll_employees_import_summary'))
    @php $sum = session('payroll_employees_import_summary'); @endphp
    <div class="mb-4 rounded-xl border border-slate-200 bg-white px-4 py-3 text-[13px] text-slate-700">
      <p class="font-semibold text-slate-900 mb-2">Import summary</p>
      <p class="text-slate-600">Created: {{ $sum['created'] ?? 0 }} · Updated: {{ $sum['updated'] ?? 0 }} · Skipped: {{ $sum['skipped'] ?? 0 }}</p>
      @if (!empty($sum['errors']))
        <ul class="mt-2 text-amber-800 text-[12px] list-disc pl-5 space-y-0.5">
          @foreach (array_slice($sum['errors'], 0, 25) as $line)
            <li>{{ $line }}</li>
          @endforeach
          @if (count($sum['errors']) > 25)
            <li>… and {{ count($sum['errors']) - 25 }} more.</li>
          @endif
        </ul>
      @endif
    </div>
  @endif

  <div class="flex flex-col xl:flex-row xl:items-start xl:justify-between gap-4 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900">Payroll &amp; HR</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Employees, salaries and attendance</p>
    </div>
    <div class="flex flex-wrap gap-2 justify-end">
      <button type="button" onclick="document.getElementById('importEmpModal').classList.add('open')" class="bsm bg-slate-100 text-slate-600 hover:bg-slate-200">
        <i class="fa-solid fa-file-import"></i> Import
      </button>
      <a href="{{ route('payroll.export.employees.excel', $qparams) }}" class="bsm bg-slate-100 text-slate-600 hover:bg-slate-200"><i class="fa-regular fa-file-excel"></i> Excel</a>
      <a href="{{ route('payroll.export.employees.pdf', $qparams) }}" class="bsm bg-slate-100 text-slate-600 hover:bg-slate-200"><i class="fa-regular fa-file-pdf"></i> PDF</a>
      <button type="button" onclick="document.getElementById('payrollRunModal').classList.add('open')" class="bsm bg-slate-100 text-slate-600 hover:bg-slate-200">
        <i class="fa-solid fa-money-check-dollar"></i> Generate Payroll
      </button>
      <button type="button" onclick="document.getElementById('addEmpModal').classList.add('open')" class="ba"><i class="fa-solid fa-plus text-xs"></i> Add Employee</button>
    </div>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="stat">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider"><i class="fa-solid fa-users text-blue-500 mr-1"></i>Total Employees</p>
      <p class="text-[22px] font-bold text-slate-900 mt-2">{{ $stats['total_employees'] }}</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider"><i class="fa-solid fa-money-bill-wave text-blue-500 mr-1"></i>Monthly Payroll</p>
      <p class="text-[22px] font-bold text-slate-900 mt-2">{{ \App\Support\Format::mwk($stats['monthly_payroll']) }}</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider"><i class="fa-solid fa-calendar-check text-emerald-500 mr-1"></i>Attendance Rate</p>
      <p class="text-[22px] font-bold mt-2 {{ $attClass }}">{{ number_format($att, 1) }}%</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider"><i class="fa-solid fa-plane-departure text-amber-500 mr-1"></i>On Leave</p>
      <p class="text-[22px] font-bold text-amber-700 mt-2">{{ $stats['on_leave'] }}</p>
    </div>
  </div>

  <form method="get" action="{{ route('payroll.index') }}" class="card p-4 mb-4 flex flex-col lg:flex-row flex-wrap gap-3 lg:items-end">
    <div class="flex-1 min-w-[180px]">
      <label class="fl">Search</label>
      <input type="text" name="q" value="{{ $filters['q'] }}" class="fi" placeholder="Search employees, role, department, phone, email…">
    </div>
    <div class="w-full sm:w-40">
      <label class="fl">Status</label>
      <select name="status" class="fi">
        @foreach(['all'=>'All Statuses','Active'=>'Active','On Leave'=>'On Leave','Inactive'=>'Inactive','Terminated'=>'Terminated'] as $val=>$lab)
          <option value="{{ $val }}" @selected($filters['status'] === $val)>{{ $lab }}</option>
        @endforeach
      </select>
    </div>
    <div class="w-full sm:w-40">
      <label class="fl">Type</label>
      <select name="employment_type" class="fi">
        @foreach(['all'=>'All Types','Permanent'=>'Permanent','Casual'=>'Casual','Daily'=>'Daily'] as $val=>$lab)
          <option value="{{ $val }}" @selected($filters['employment_type'] === $val)>{{ $lab }}</option>
        @endforeach
      </select>
    </div>
    <div class="w-full sm:w-48">
      <label class="fl">Project</label>
      <select name="project_id" class="fi">
        <option value="">All Projects</option>
        @foreach($projects as $p)
          <option value="{{ $p->id }}" @selected((string)$filters['project_id'] === (string)$p->id)>{{ $p->name }}</option>
        @endforeach
      </select>
    </div>
    <div class="w-full sm:w-44">
      <label class="fl">Sort</label>
      <select name="sort" class="fi">
        <option value="last_name" @selected($filters['sort']==='last_name')>Name</option>
        <option value="job_title" @selected($filters['sort']==='job_title')>Role</option>
        <option value="basic_salary" @selected($filters['sort']==='basic_salary')>Salary</option>
        <option value="employment_type" @selected($filters['sort']==='employment_type')>Type</option>
        <option value="status" @selected($filters['sort']==='status')>Status</option>
        <option value="created_at" @selected($filters['sort']==='created_at')>Created Date</option>
      </select>
    </div>
    <div class="w-full sm:w-32">
      <label class="fl">Direction</label>
      <select name="direction" class="fi">
        <option value="asc" @selected($filters['direction']==='asc')>Ascending</option>
        <option value="desc" @selected($filters['direction']==='desc')>Descending</option>
      </select>
    </div>
    <div class="flex gap-2 items-center">
      <button type="submit" class="bp">Apply</button>
      <a href="{{ route('payroll.index') }}" class="text-[12px] text-blue-700 font-semibold">Clear</a>
    </div>
  </form>

  <div class="card p-5 card-has-table mb-5">
    <p class="font-bold text-slate-900 mb-4"><i class="fa-solid fa-user text-slate-400 mr-2"></i>Employee Directory</p>
    <table>
      <thead>
        <tr class="border-b border-slate-100">
          <th class="th">Name</th>
          <th class="th">Role</th>
          <th class="th">Project</th>
          <th class="th">Salary</th>
          <th class="th">Type</th>
          <th class="th">Status</th>
          <th class="th text-right">Action</th>
        </tr>
      </thead>
      <tbody>
        @forelse($employees as $e)
          @php
            $typeBadge = match($e->employment_type) {
              'Permanent' => 'g',
              'Casual' => 'v',
              default => 'a',
            };
            $stBadge = match($e->status) {
              'Active' => 'g',
              'On Leave' => 'a',
              'Inactive' => 's',
              'Terminated' => 'r',
              default => 's',
            };
          @endphp
          <tr>
            <td class="td">
              <div class="flex items-center gap-2">
                <div class="w-7 h-7 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center text-[10px] font-bold shrink-0">{{ $e->initials }}</div>
                <div>
                  <p class="font-semibold text-slate-800">{{ $e->name }}</p>
                  @if($e->email || $e->phone)
                    <p class="text-[11px] text-slate-400">{{ $e->email }}{{ $e->email && $e->phone ? ' · ' : '' }}{{ $e->phone }}</p>
                  @endif
                </div>
              </div>
            </td>
            <td class="td">
              <span class="text-slate-800">{{ $e->job_title }}</span>
              @if($e->department)
                <p class="text-[11px] text-slate-400">{{ $e->department }}</p>
              @endif
            </td>
            <td class="td">
              @if($e->project_id)
                <a href="{{ route('projects.show', $e->project_id) }}" class="text-blue-700 font-medium hover:underline">{{ $e->project?->name }}</a>
              @else
                <span class="text-slate-400">Unassigned</span>
              @endif
            </td>
            <td class="td font-semibold text-slate-700">
              {{ \App\Support\Format::mwk($e->basic_salary) }}
              @if($e->employment_type === 'Daily')<span class="text-[10px] font-normal text-slate-400">/day</span>@endif
            </td>
            <td class="td"><span class="badge {{ $typeBadge }}">{{ $e->employment_type }}</span></td>
            <td class="td"><span class="badge {{ $stBadge }}">{{ $e->status }}</span></td>
            <td class="td text-right whitespace-nowrap">
              <button type="button" class="bsm bg-blue-50 text-blue-700 hover:bg-blue-100 js-open-edit"
                data-employee="{{ e(json_encode([
                  'url' => route('payroll.employees.update', $e),
                  'full_name' => $e->name,
                  'job_title' => $e->job_title,
                  'department' => $e->department,
                  'project_id' => $e->project_id,
                  'basic_salary' => $e->basic_salary,
                  'employment_type' => $e->employment_type,
                  'status' => $e->status,
                  'phone' => $e->phone,
                  'email' => $e->email,
                  'bank_account_number' => $e->bank_account_number,
                  'start_date' => optional($e->start_date)?->format('Y-m-d'),
                ])) }}">Edit</button>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="7" class="td py-12 text-center">
              @if($hasFilters)
                <i class="fa-solid fa-filter text-slate-300 text-3xl mb-2"></i>
                <p class="text-slate-600 font-semibold">No employees match your filters</p>
                <a href="{{ route('payroll.index') }}" class="inline-block mt-3 ba">Clear Filters</a>
              @else
                <i class="fa-solid fa-users text-slate-300 text-3xl mb-2"></i>
                <p class="text-slate-600 font-semibold">No employees found</p>
                <p class="text-slate-400 text-[12px] mt-1">Add your first employee or import employees from Excel.</p>
                <div class="flex flex-wrap gap-2 justify-center mt-4">
                  <button type="button" onclick="document.getElementById('addEmpModal').classList.add('open')" class="ba">Add Employee</button>
                  <button type="button" onclick="document.getElementById('importEmpModal').classList.add('open')" class="bsm bg-slate-100 text-slate-600">Import Employees</button>
                </div>
              @endif
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
    @if($employees->hasPages())
      <div class="mt-4 px-1">{{ $employees->withQueryString()->links() }}</div>
    @endif
  </div>

  <div class="card p-5">
    <p class="font-bold text-slate-900 mb-3"><i class="fa-solid fa-money-check-dollar text-slate-400 mr-2"></i>Recent Payroll Runs</p>
    <div class="overflow-x-auto">
      <table class="min-w-[720px]">
        <thead>
          <tr class="border-b border-slate-100">
            <th class="th">Period</th>
            <th class="th">Employees</th>
            <th class="th">Gross</th>
            <th class="th">Deductions</th>
            <th class="th">Net</th>
            <th class="th">Status</th>
            <th class="th text-right">Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse($recentPayrollRuns as $r)
            @php
              $rs = match($r->status) {
                'Draft' => 's',
                'Approved' => 'b',
                'Paid' => 'g',
                default => 'r',
              };
            @endphp
            <tr>
              <td class="td text-slate-700">{{ $r->period_start->format('M j') }} – {{ $r->period_end->format('M j, Y') }}</td>
              <td class="td">{{ $r->items_count }}</td>
              <td class="td font-mono text-[12px]">{{ \App\Support\Format::mwkDecimal($r->total_gross) }}</td>
              <td class="td font-mono text-[12px]">{{ \App\Support\Format::mwkDecimal($r->total_deductions) }}</td>
              <td class="td font-mono text-[12px] font-semibold">{{ \App\Support\Format::mwkDecimal($r->total_net) }}</td>
              <td class="td"><span class="badge {{ $rs }}">{{ $r->status }}</span></td>
              <td class="td text-right whitespace-nowrap space-x-1">
                <a href="{{ route('payroll.runs.show', $r) }}" class="bsm bg-slate-100 text-slate-600">View</a>
                <a href="{{ route('payroll.runs.export.pdf', $r) }}" class="bsm bg-slate-100 text-slate-600">PDF</a>
                @if($r->status === 'Approved')
                  <a href="{{ route('payroll.runs.show', $r) }}#mark-paid" class="bsm bg-emerald-50 text-emerald-800">Mark Paid</a>
                @endif
              </td>
            </tr>
          @empty
            <tr><td colspan="7" class="td text-slate-400 text-[12px]">No payroll runs yet. Generate a payroll to get started.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

{{-- Add employee --}}
<div id="addEmpModal" class="modal-ov" onclick="if(event.target===this)closeAddEmp()">
  <div class="modal">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900"><i class="fa-solid fa-user-plus text-blue-600 mr-2"></i>Add Employee</p>
      <button type="button" onclick="closeAddEmp()" style="width:28px;height:28px;background:#f1f5f9;border:none;border-radius:8px;cursor:pointer;font-size:13px;color:#64748b">&times;</button>
    </div>
    <div style="padding:16px 20px 20px">
      <form method="post" action="{{ route('payroll.employees.store') }}">
        @csrf
        <input type="hidden" name="_form" value="add">
        @include('payroll.partials.employee-fields', ['employee' => null, 'projects' => $projects, 'fieldPrefix' => 'add'])
        <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:18px">
          <button type="button" onclick="closeAddEmp()" class="bs">Cancel</button>
          <button type="submit" class="bp">Save Employee</button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- Edit employee --}}
<div id="editEmpModal" class="modal-ov" onclick="if(event.target===this)closeEditEmp()">
  <div class="modal">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900"><i class="fa-solid fa-user-pen text-blue-600 mr-2"></i>Edit Employee</p>
      <button type="button" onclick="closeEditEmp()" style="width:28px;height:28px;background:#f1f5f9;border:none;border-radius:8px;cursor:pointer;font-size:13px;color:#64748b">&times;</button>
    </div>
    <div style="padding:16px 20px 20px">
      <form id="editEmpForm" method="post" action="">
        @csrf
        @method('PUT')
        <input type="hidden" name="_form" value="edit">
        @include('payroll.partials.employee-fields', ['employee' => null, 'projects' => $projects, 'fieldPrefix' => 'edit'])
        <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:18px">
          <button type="button" onclick="closeEditEmp()" class="bs">Cancel</button>
          <button type="submit" class="bp">Save Changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

@include('payroll.partials.import-employees-modal')
@include('payroll.partials.payroll-run-form')
@endsection

@push('scripts')
<script>
function closeAddEmp(){ document.getElementById('addEmpModal').classList.remove('open'); }
function closeEditEmp(){ document.getElementById('editEmpModal').classList.remove('open'); }
function closeImportEmp(){ document.getElementById('importEmpModal').classList.remove('open'); }
function closePayrollRun(){ document.getElementById('payrollRunModal').classList.remove('open'); }
document.querySelectorAll('.js-open-edit').forEach(btn => {
  btn.addEventListener('click', () => {
    let d = {};
    try { d = JSON.parse(btn.getAttribute('data-employee')); } catch (e) { return; }
    const form = document.getElementById('editEmpForm');
    form.action = d.url;
    const set = (name, v) => { const el = form.querySelector('[name="'+name+'"]'); if (el) el.value = v ?? ''; };
    set('full_name', d.full_name);
    set('job_title', d.job_title);
    set('department', d.department);
    set('project_id', d.project_id ?? '');
    set('basic_salary', d.basic_salary);
    set('employment_type', d.employment_type);
    set('status', d.status);
    set('phone', d.phone);
    set('email', d.email);
    set('bank_account_number', d.bank_account_number);
    set('start_date', d.start_date);
    document.getElementById('editEmpModal').classList.add('open');
  });
});
@if($errors->any() && old('_form') === 'add')
document.getElementById('addEmpModal').classList.add('open');
@endif
@if($errors->any() && old('_form') === 'edit')
document.getElementById('editEmpModal').classList.add('open');
@endif
@if($errors->has('file'))
document.getElementById('importEmpModal').classList.add('open');
@endif
@if($errors->has('period_start') || $errors->has('period_end') || $errors->has('payment_date') || $errors->has('project_id'))
document.getElementById('payrollRunModal').classList.add('open');
@endif
</script>
@endpush