@extends('layouts.app')

@section('title', 'Staff')
@section('page', 'payroll')
@section('payrollNav', 'staff')

@php
  $statusVariant = fn ($s) => $s === 'Active' ? 'success' : 'danger';
@endphp

@section('content')
  @include('partials.account-payroll-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <x-data-table
    id="staff-table"
    class="catalog-table"
    title="Staff"
    subtitle="Manage payroll staff members."
    search-placeholder="Search staff..."
    :selectable="false"
    :page-size="15"
  >
    <x-slot:toolbarActions>
      @if ($canManage ?? false)
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staffModal" data-staff-add>
          <i class="bi bi-plus-lg"></i> Add Staff
        </button>
      @endif
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Active</option>
        <option>Inactive</option>
      </select>
    </x-slot:filters>
    <x-slot:afterToolbar>
      <div class="product-stats-panel">
        <div class="row g-3 product-stats product-stats--4 justify-content-start">
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--primary">
              <span class="product-kpi__icon" aria-hidden="true"><span class="product-kpi__glyph"><i class="bi bi-people"></i></span></span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Staff</p>
                <p class="product-kpi__value">{{ $totalStaff }}</p>
                <p class="product-kpi__meta">All members</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--success">
              <span class="product-kpi__icon" aria-hidden="true"><span class="product-kpi__glyph"><i class="bi bi-check-lg"></i></span></span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Active</p>
                <p class="product-kpi__value">{{ $activeStaff }}</p>
                <p class="product-kpi__meta">On payroll</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="Code" col="code" />
      <x-data-table-th label="Name" col="name" />
      <x-data-table-th label="Designation" col="designation" />
      <x-data-table-th label="Phone" col="phone" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($staff as $row)
        <tr data-id="{{ $row->id }}">
          <td data-col="code">{{ $row->code ?: '—' }}</td>
          <td data-col="name" class="cell-primary">{{ $row->name }}</td>
          <td data-col="designation">{{ $row->designation ?: '—' }}</td>
          <td data-col="phone">{{ $row->phone ?: '—' }}</td>
          <td data-col="status"><x-badge :variant="$statusVariant($row->status)">{{ $row->status }}</x-badge></td>
          <td data-edt-actions>
            @if ($canManage ?? false)
              <div class="edt-row-actions product-actions">
                <button
                  type="button"
                  class="btn btn-sm btn-icon product-action product-action--edit"
                  title="Edit"
                  data-staff-edit
                  data-id="{{ $row->id }}"
                  data-code="{{ $row->code }}"
                  data-name="{{ $row->name }}"
                  data-phone="{{ $row->phone }}"
                  data-address="{{ $row->address }}"
                  data-designation="{{ $row->designation }}"
                  data-join-date="{{ $row->join_date?->format('Y-m-d') }}"
                  data-status="{{ $row->status }}"
                  data-notes="{{ $row->notes }}"
                  data-update-url="{{ route('account.staff.update', $row) }}"
                >
                  <i class="bi bi-pencil" aria-hidden="true"></i>
                </button>
                <button
                  type="button"
                  class="btn btn-sm btn-icon product-action product-action--delete"
                  title="Delete"
                  data-delete-open
                  data-delete-url="{{ route('account.staff.destroy', $row) }}"
                  data-delete-label="{{ $row->name }}"
                  data-delete-type="staff"
                >
                  <i class="bi bi-trash" aria-hidden="true"></i>
                </button>
              </div>
            @endif
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="6" class="text-center text-muted py-4">No staff yet. Add your first staff member.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  @if ($canManage ?? false)
    <div class="modal fade" id="staffModal" tabindex="-1" aria-labelledby="staffModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content edt-modal">
          <form id="staff-form" method="post" action="{{ route('account.staff.store') }}" data-store-url="{{ route('account.staff.store') }}">
            @csrf
            <input type="hidden" name="_method" id="staff_form_method" value="POST">
            <div class="modal-header">
              <h2 class="modal-title fs-5" id="staffModalLabel">Add staff</h2>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div class="row g-3">
                <div class="col-md-4">
                  <label class="form-label" for="staff_code">Code</label>
                  <input type="text" class="form-control" id="staff_code" name="code" maxlength="50" placeholder="Optional">
                </div>
                <div class="col-md-8">
                  <label class="form-label" for="staff_name">Name</label>
                  <input type="text" class="form-control" id="staff_name" name="name" required maxlength="255">
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="staff_designation">Designation</label>
                  <input type="text" class="form-control" id="staff_designation" name="designation" maxlength="100" placeholder="e.g. Waiter, Cashier">
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="staff_phone">Phone</label>
                  <input type="text" class="form-control" id="staff_phone" name="phone" maxlength="40">
                </div>
                <div class="col-12">
                  <label class="form-label" for="staff_address">Address</label>
                  <input type="text" class="form-control" id="staff_address" name="address" maxlength="255">
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="staff_join_date">Join date</label>
                  <input type="date" class="form-control" id="staff_join_date" name="join_date">
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="staff_status">Status</label>
                  <select class="form-select" id="staff_status" name="status" required>
                    <option value="Active">Active</option>
                    <option value="Inactive">Inactive</option>
                  </select>
                </div>
                <div class="col-12">
                  <label class="form-label" for="staff_notes">Notes</label>
                  <input type="text" class="form-control" id="staff_notes" name="notes" maxlength="1000" placeholder="Optional">
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-primary">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content edt-modal">
          <form id="delete-confirm-form" method="post" action="#">
            @csrf
            @method('DELETE')
            <div class="modal-header">
              <h2 class="modal-title fs-5" id="deleteConfirmModalLabel">Delete staff</h2>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p class="mb-0">Are you sure you want to delete <strong id="delete-confirm-name">this staff</strong>?</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  @endif
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
@endpush

@push('scripts')
  <script src="{{ asset('assets/js/pages/payroll-staff.js') }}"></script>
@endpush