@extends('layouts.app')

@section('title', 'Payroll Management')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1">
      <li>
        <a href="{{ route('dashboard') }}" class="text-slate-700 hover:text-primary-600">Dashboard</a>
      </li>
      <li>
        <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </li>
      <li>
        <span class="text-slate-700 font-medium">Payroll</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="space-y-6">
  <!-- Header -->
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-slate-900">Payroll Management</h1>
      <p class="text-slate-600 mt-1">Process and manage employee salaries</p>
    </div>
    <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 flex items-center space-x-2">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
      </svg>
      <span>Generate Payroll</span>
    </button>
  </div>

  <!-- Month/Year Selector -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
    <div class="flex flex-col md:flex-row items-center gap-4">
      <div class="w-full md:w-48">
        <label class="block text-sm font-medium text-slate-700 mb-2">Select Month</label>
        <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
          <option value="01">January</option>
          <option value="02">February</option>
          <option value="03" selected>March</option>
          <option value="04">April</option>
          <option value="05">May</option>
          <option value="06">June</option>
          <option value="07">July</option>
          <option value="08">August</option>
          <option value="09">September</option>
          <option value="10">October</option>
          <option value="11">November</option>
          <option value="12">December</option>
        </select>
      </div>
      <div class="w-full md:w-48">
        <label class="block text-sm font-medium text-slate-700 mb-2">Select Year</label>
        <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
          <option value="2022">2022</option>
          <option value="2023">2023</option>
          <option value="2024" selected>2024</option>
          <option value="2025">2025</option>
        </select>
      </div>
      <div class="w-full md:w-48 flex items-end">
        <button class="w-full px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors duration-200 font-medium">
          Filter
        </button>
      </div>
    </div>
  </div>

  <!-- Summary Cards -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm text-slate-600">Total Salary</p>
          <p class="text-3xl font-bold text-slate-900 mt-2">$157,500</p>
        </div>
        <div class="bg-blue-100 p-3 rounded-lg">
          <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
            <path d="M8.16 5.314l4.897-1.596A1 1 0 0114.791 6.71l-.897 5.383a5 5 0 01-9.930 1.617L1.754 12.71a1 1 0 00-1.672 1.055l2.109 6.362A1 1 0 104.487 21h13.026a1 1 0 00.979-1.208l-5.5-19a1 1 0 00-1.9.104l-.54 2.422z"></path>
          </svg>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm text-slate-600">Processed</p>
          <p class="text-3xl font-bold text-green-600 mt-2">38</p>
        </div>
        <div class="bg-green-100 p-3 rounded-lg">
          <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm text-slate-600">Pending</p>
          <p class="text-3xl font-bold text-accent-600 mt-2">5</p>
        </div>
        <div class="bg-accent-100 p-3 rounded-lg">
          <svg class="w-6 h-6 text-accent-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm text-slate-600">Total Employees</p>
          <p class="text-3xl font-bold text-slate-900 mt-2">43</p>
        </div>
        <div class="bg-slate-200 p-3 rounded-lg">
          <svg class="w-6 h-6 text-slate-600" fill="currentColor" viewBox="0 0 20 20">
            <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v2h8v-2zM16 15a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <!-- Payroll Table -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-slate-50 border-b border-slate-200">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Employee</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Basic</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Allowances</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Deductions</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Net Salary</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Status</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          @for ($i = 0; $i < 15; $i++)
            <tr class="hover:bg-slate-50 transition-colors duration-200">
              <td class="px-6 py-4 text-sm font-medium text-slate-900">Employee {{ $i + 1 }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">${{ number_format(3750 * ($i + 1), 2) }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">${{ number_format(500, 2) }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">${{ number_format(400, 2) }}</td>
              <td class="px-6 py-4 text-sm font-semibold text-slate-900">${{ number_format(3850 * ($i + 1), 2) }}</td>
              <td class="px-6 py-4 text-sm">
                @if ($i % 4 === 0)
                  <span class="px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">Pending</span>
                @else
                  <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Paid</span>
                @endif
              </td>
              <td class="px-6 py-4 text-sm space-x-2">
                <a href="{{ route('payroll.show', $i + 1) }}" class="text-primary-600 hover:text-primary-700 font-medium">Slip</a>
                @if ($i % 4 === 0)
                  <button class="text-green-600 hover:text-green-700 font-medium">Mark Paid</button>
                @endif
              </td>
            </tr>
          @endfor
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="bg-white border-t border-slate-200 px-6 py-4 flex items-center justify-between">
      <p class="text-sm text-slate-600">Showing 1 to 15 of 43 employees</p>
      <div class="flex space-x-2">
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">Previous</button>
        <button class="px-3 py-2 border border-primary-300 bg-primary-50 rounded-lg text-sm font-medium text-primary-600">1</button>
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">2</button>
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">3</button>
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">Next</button>
      </div>
    </div>
  </div>

  <!-- Export Options -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
    <h3 class="font-semibold text-slate-900 mb-4">Export Options</h3>
    <div class="flex flex-wrap gap-3">
      <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200 flex items-center space-x-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span>Export as Excel</span>
      </button>
      <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 flex items-center space-x-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span>Export as PDF</span>
      </button>
      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 flex items-center space-x-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span>Send to Bank</span>
      </button>
    </div>
  </div>
</div>
@endsection