@extends('layouts.app')

@section('title', 'Employee Profile')

@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>
        <a href="{{ route('employees.index') }}" class="text-slate-700 hover:text-primary-600">Employees</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">John Doe</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="space-y-6" x-data="{ activeTab: 'details' }">
  <!-- Header with Actions -->
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-slate-900">John Doe</h1>
      <p class="text-slate-600 mt-1">Employee ID: EMP001</p>
    </div>
    <div class="flex space-x-3">
      <a href="{{ route('employees.edit', 1) }}" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">Edit</a>
      <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200">Delete</button>
    </div>
  </div>

  <!-- Profile Card -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <div class="p-6 border-b border-slate-200">
      <div class="flex items-start space-x-6">
        <img src="https://ui-avatars.com/api/?name=John+Doe&size=150&background=0369a1&color=fff" alt="Profile" class="w-32 h-32 rounded-lg">
        <div class="flex-1">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <p class="text-sm text-slate-600">Email</p>
              <p class="font-medium text-slate-900">john@hotel.com</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Phone</p>
              <p class="font-medium text-slate-900">+1 (555) 123-4567</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Status</p>
              <span class="inline-block px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Tabs -->
    <div class="border-b border-slate-200">
      <div class="flex">
        <button @click="activeTab = 'details'" :class="activeTab === 'details' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          Details
        </button>
        <button @click="activeTab = 'attendance'" :class="activeTab === 'attendance' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          Attendance
        </button>
        <button @click="activeTab = 'leave'" :class="activeTab === 'leave' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          Leave Records
        </button>
        <button @click="activeTab = 'salary'" :class="activeTab === 'salary' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          Salary History
        </button>
      </div>
    </div>

    <!-- Tab Content -->
    <div class="p-6">
      <!-- Details Tab -->
      <div x-show="activeTab === 'details'" class="space-y-8">
        <!-- Personal Information -->
        <div>
          <h3 class="text-lg font-semibold text-slate-900 mb-4">Personal Information</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <p class="text-sm text-slate-600">First Name</p>
              <p class="font-medium text-slate-900">John</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Last Name</p>
              <p class="font-medium text-slate-900">Doe</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Date of Birth</p>
              <p class="font-medium text-slate-900">May 15, 1990</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Gender</p>
              <p class="font-medium text-slate-900">Male</p>
            </div>
            <div class="md:col-span-2">
              <p class="text-sm text-slate-600">Address</p>
              <p class="font-medium text-slate-900">123 Main Street, Apt 4B</p>
            </div>
          </div>
        </div>

        <!-- Employment Information -->
        <div>
          <h3 class="text-lg font-semibold text-slate-900 mb-4">Employment Information</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <p class="text-sm text-slate-600">Department</p>
              <p class="font-medium text-slate-900">Front Desk</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Position</p>
              <p class="font-medium text-slate-900">Receptionist</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Hire Date</p>
              <p class="font-medium text-slate-900">March 15, 2020</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Salary</p>
              <p class="font-medium text-slate-900">$45,000</p>
            </div>
          </div>
        </div>

        <!-- Bank Information -->
        <div>
          <h3 class="text-lg font-semibold text-slate-900 mb-4">Bank Information</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <p class="text-sm text-slate-600">Bank Name</p>
              <p class="font-medium text-slate-900">First National Bank</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Account Number</p>
              <p class="font-medium text-slate-900">****7890</p>
            </div>
          </div>
        </div>

        <!-- Emergency Contact -->
        <div>
          <h3 class="text-lg font-semibold text-slate-900 mb-4">Emergency Contact</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <p class="text-sm text-slate-600">Contact Name</p>
              <p class="font-medium text-slate-900">Jane Doe</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Relationship</p>
              <p class="font-medium text-slate-900">Spouse</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Phone</p>
              <p class="font-medium text-slate-900">+1 (555) 987-6543</p>
            </div>
            <div>
              <p class="text-sm text-slate-600">Email</p>
              <p class="font-medium text-slate-900">jane@example.com</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Attendance Tab -->
      <div x-show="activeTab === 'attendance'" class="space-y-4">
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-slate-50">
              <tr>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Date</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Check-in</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Check-out</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Status</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-200">
              @for ($i = 0; $i < 10; $i++)
                <tr class="hover:bg-slate-50">
                  <td class="px-4 py-3 text-sm text-slate-900">{{ now()->subDays($i)->format('M d, Y') }}</td>
                  <td class="px-4 py-3 text-sm text-slate-600">09:00 AM</td>
                  <td class="px-4 py-3 text-sm text-slate-600">05:00 PM</td>
                  <td class="px-4 py-3 text-sm">
                    <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Present</span>
                  </td>
                </tr>
              @endfor
            </tbody>
          </table>
        </div>
      </div>

      <!-- Leave Tab -->
      <div x-show="activeTab === 'leave'" class="space-y-4">
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-slate-50">
              <tr>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Leave Type</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">From Date</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">To Date</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Days</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Status</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-200">
              <tr class="hover:bg-slate-50">
                <td class="px-4 py-3 text-sm text-slate-900">Annual Leave</td>
                <td class="px-4 py-3 text-sm text-slate-600">Jan 05, 2024</td>
                <td class="px-4 py-3 text-sm text-slate-600">Jan 10, 2024</td>
                <td class="px-4 py-3 text-sm text-slate-600">5</td>
                <td class="px-4 py-3 text-sm">
                  <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Approved</span>
                </td>
              </tr>
              <tr class="hover:bg-slate-50">
                <td class="px-4 py-3 text-sm text-slate-900">Sick Leave</td>
                <td class="px-4 py-3 text-sm text-slate-600">Feb 15, 2024</td>
                <td class="px-4 py-3 text-sm text-slate-600">Feb 16, 2024</td>
                <td class="px-4 py-3 text-sm text-slate-600">2</td>
                <td class="px-4 py-3 text-sm">
                  <span class="px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Pending</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Salary History Tab -->
      <div x-show="activeTab === 'salary'" class="space-y-4">
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-slate-50">
              <tr>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Month</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Basic</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Allowances</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Deductions</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Net Salary</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-200">
              @for ($i = 0; $i < 12; $i++)
                <tr class="hover:bg-slate-50">
                  <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ now()->subMonths($i)->format('M Y') }}</td>
                  <td class="px-4 py-3 text-sm text-slate-600">$3,750</td>
                  <td class="px-4 py-3 text-sm text-slate-600">$500</td>
                  <td class="px-4 py-3 text-sm text-slate-600">$400</td>
                  <td class="px-4 py-3 text-sm font-medium text-slate-900">$3,850</td>
                </tr>
              @endfor
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection