@extends('company.layouts.app')

@section('content')
<div class="bg-white p-4 shadow-sm border border-gray-200">
    <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  p-2 rounded-t-sm">
        <h3 class="font-semibold text-sm flex items-center">
            <i class="fa-solid fa-list-ul mr-2"></i> Bonus List
        </h3>
        <span class="bg-[#e64a19] px-3 py-1 text-xs rounded-sm font-bold shadow-inner">Total Records: {{ $bonuses->count() }}</span>
    </div>

    <div class="p-4 border border-t-0 border-gray-200 bg-gray-50 flex flex-wrap gap-4 items-center mb-4">
        <form action="{{ route('company.payroll.bonuses.index') }}" method="GET" class="flex flex-wrap gap-4 items-center w-full">
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="search_employee" placeholder="Search Employee" value="{{ request('search_employee') }}" class="w-full border border-gray-300 px-3 py-1.5 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
            </div>
            <div class="w-48">
                <select name="status" class="w-full border border-gray-300 px-3 py-1.5 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 text-gray-600 bg-white">
                    <option value="">Pending In Salary</option>
                    <option value="Pending" {{ request('status') == 'Pending' ? 'selected' : '' }}>Pending</option>
                    <option value="Bonus Process in Salary" {{ request('status') == 'Bonus Process in Salary' ? 'selected' : '' }}>Bonus Process in Salary</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <span class="text-xs text-gray-700">From:</span>
                <input type="date" name="from_date" value="{{ request('from_date') }}" class="border border-gray-300 px-2 py-1.5 text-xs text-gray-500 focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
            </div>
            <div class="flex items-center space-x-2">
                <span class="text-xs text-gray-700">To:</span>
                <input type="date" name="to_date" value="{{ request('to_date') }}" class="border border-gray-300 px-2 py-1.5 text-xs text-gray-500 focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
            </div>
            <button type="submit" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-4 py-1.5 rounded-sm text-xs font-semibold shadow flex items-center transition">
                <i class="fa-regular fa-eye mr-1"></i> VIEW
            </button>
        </form>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-left text-xs text-gray-700 border-collapse border border-gray-200">
            <thead>
                <tr class="bg-slate-50 text-slate-500 border-b border-slate-200 text-xs uppercase tracking-wider">
                    <th class="p-2 border border-gray-300 font-semibold">Bonus Type</th>
                    <th class="p-2 border border-gray-300 font-semibold">Employee Name</th>
                    <th class="p-2 border border-gray-300 font-semibold">Department</th>
                    <th class="p-2 border border-gray-300 font-semibold text-right">Bonus Amount</th>
                    <th class="p-2 border border-gray-300 font-semibold text-center">Bonus Date</th>
                    <th class="p-2 border border-gray-300 font-semibold">Remarks</th>
                    <th class="p-2 border border-gray-300 font-semibold">Bonus Status</th>
                    <th class="p-2 border border-gray-300 font-semibold text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($bonuses as $bonus)
                <tr class="hover:bg-gray-50 bg-white">
                    <td class="p-2 border border-gray-300 font-semibold">{{ $bonus->bonus_name }}</td>
                    <td class="p-2 border border-gray-300 font-semibold">{{ $bonus->employee->name ?? 'N/A' }}</td>
                    <td class="p-2 border border-gray-300 font-semibold">{{ $bonus->employee->department->name ?? 'N/A' }}</td>
                    <td class="p-2 border border-gray-300 font-semibold text-right">{{ number_format($bonus->bonus_amount, 2) }}</td>
                    <td class="p-2 border border-gray-300 font-semibold text-center">{{ $bonus->bonus_date ? \Carbon\Carbon::parse($bonus->bonus_date)->format('d-M-Y') : 'N/A' }}</td>
                    <td class="p-2 border border-gray-300 font-semibold">{{ $bonus->remarks }}</td>
                    <td class="p-2 border border-gray-300 font-semibold">{{ $bonus->status }}</td>
                    <td class="p-2 border border-gray-300 text-center space-x-1">
                        <a href="{{ route('payroll.bonuses.edit', $bonus->id) }}" class="inline-flex items-center justify-center bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white w-6 h-6 rounded-sm transition">
                            <i class="fa-solid fa-pen-to-square text-[10px]"></i>
                        </a>
                        <form action="{{ route('payroll.bonuses.destroy', $bonus->id) }}" method="POST" class="inline" onsubmit="return confirm('Delete this bonus?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="inline-flex items-center justify-center bg-[#e53935] hover:bg-[#d32f2f] text-white w-6 h-6 rounded-sm transition">
                                <i class="fa-solid fa-trash text-[10px]"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="p-4 text-center text-gray-500 border border-gray-300 bg-white">No records found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4 flex justify-end">
        <a href="{{ route('company.payroll.bonuses.create') }}" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-4 py-2 rounded-sm text-xs font-semibold shadow flex items-center transition">
            <i class="fa-solid fa-plus mr-2"></i> ADD NEW BONUS
        </a>
    </div>

    @if(session('success'))
    <div class="mt-4 bg-green-50 border border-green-300 text-green-700 text-xs px-4 py-2 rounded-sm">
        {{ session('success') }}
    </div>
    @endif
</div>
@endsection