@extends('admin.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 mb-6">
        <h3 class="font-semibold text-sm flex items-center">
            <i class="fa-regular fa-file-lines mr-2"></i> Add New Bonus
        </h3>
    </div>

    @if($errors->any())
    <div class="mb-4 bg-red-50 border border-red-300 text-red-700 text-xs px-4 py-2 rounded-sm">
        <ul class="list-disc list-inside">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ route('payroll.bonuses.store') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Bonus Name:</label>
                <select name="bonus_name" class="w-full border border-gray-300 px-3 py-2 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" required>
                    <option value="">-- Select Bonus Name --</option>
                    <option value="Annual Bonus" {{ old('bonus_name') == 'Annual Bonus' ? 'selected' : '' }}>Annual Bonus</option>
                    <option value="Performance Bonus" {{ old('bonus_name') == 'Performance Bonus' ? 'selected' : '' }}>Performance Bonus</option>
                    <option value="Festival Bonus" {{ old('bonus_name') == 'Festival Bonus' ? 'selected' : '' }}>Festival Bonus</option>
                    <option value="Incentive Bonus" {{ old('bonus_name') == 'Incentive Bonus' ? 'selected' : '' }}>Incentive Bonus</option>
                    <option value="Other Bonus" {{ old('bonus_name') == 'Other Bonus' ? 'selected' : '' }}>Other Bonus</option>
                </select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Employee:</label>
                <select name="employee_id" class="w-full border border-gray-300 px-3 py-2 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" required>
                    <option value="">-- Select Employee --</option>
                    @foreach($employees as $employee)
                        <option value="{{ $employee->id }}" {{ old('employee_id') == $employee->id ? 'selected' : '' }}>
                            {{ $employee->name }} {{ $employee->employee_code ? '/ ' . $employee->employee_code : '' }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Bonus Amount:</label>
                <input type="number" step="0.01" name="bonus_amount" value="{{ old('bonus_amount') }}" class="w-full border border-gray-300 px-3 py-2 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20" required>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 items-start">
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Bonus Process Date In Salary:</label>
                <input type="date" name="bonus_date" value="{{ old('bonus_date') }}" class="w-full border border-gray-300 px-3 py-2 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 text-gray-500" required>
            </div>
            <div class="md:col-span-2">
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Remarks:</label>
                <textarea name="remarks" rows="3" placeholder="Enter remarks here..." class="w-full border border-gray-300 px-3 py-2 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 resize-none">{{ old('remarks') }}</textarea>
            </div>
        </div>

        <div class="flex justify-end gap-2 mt-4 pt-4 border-t border-gray-200">
            <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-6 py-2 rounded-sm text-xs font-semibold shadow transition flex items-center">
                <i class="fa-solid fa-download mr-2"></i> SAVE
            </button>
            <a href="{{ route('payroll.bonuses.index') }}" class="bg-[#e53935] hover:bg-[#d32f2f] text-white px-6 py-2 rounded-sm text-xs font-semibold shadow transition flex items-center">
                <i class="fa-regular fa-circle-xmark mr-2"></i> CANCEL
            </a>
        </div>
    </form>
</div>
@endsection