@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> Edit 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.update', $bonus->id) }}" method="POST">
        @csrf
        @method('PUT')
        <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>
                    @foreach(['Annual Bonus','Performance Bonus','Festival Bonus','Incentive Bonus','Other Bonus'] as $bname)
                    <option value="{{ $bname }}" {{ $bonus->bonus_name == $bname ? 'selected' : '' }}>{{ $bname }}</option>
                    @endforeach
                </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 }}" {{ $bonus->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', $bonus->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', $bonus->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', $bonus->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