<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('New Borrowing') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-2xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-lg sm:rounded-xl"> <!-- rounded-xl, shadow-lg -->
                <div class="p-8 text-gray-900"> <!-- Increased padding -->

                    <div class="mb-6 border-b pb-4">
                        <h3 class="text-lg font-bold text-gray-800">Create New Transaction</h3>
                        <p class="text-sm text-gray-500">Record a new sparepart borrowing.</p>
                    </div>

                    <form action="{{ route('loans.store') }}" method="POST">
                        @csrf

                        <div class="mb-5">
                            <label for="employee_id" class="block text-sm font-semibold text-gray-700 mb-2">Select Employee</label>
                            <select name="employee_id" id="employee_id" class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-base py-2.5 px-3" required> <!-- rounded-lg, focus:blue -->
                                <option value="">-- Choose Employee --</option>
                                @foreach($employees as $employee)
                                    <option value="{{ $employee->id }}">{{ $employee->name }} ({{ $employee->nik ?? '-' }})</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-5">
                            <label for="sparepart_id" class="block text-sm font-semibold text-gray-700 mb-2">Select Sparepart</label>
                            <select name="sparepart_id" id="sparepart_id" class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-base py-2.5 px-3" required> <!-- rounded-lg, focus:blue -->
                                <option value="">-- Choose Item (Stock Available) --</option>
                                @foreach($spareparts as $sparepart)
                                    <option value="{{ $sparepart->id }}">{{ $sparepart->name }} (Stock: {{ $sparepart->stock }})</option>
                                @endforeach
                            </select>
                            @error('sparepart_id')
                                <p class="text-red-500 text-xs mt-1 font-semibold">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-6">
                            <label for="notes" class="block text-sm font-semibold text-gray-700 mb-2">Notes (Optional)</label>
                            <textarea name="notes" id="notes" rows="3" class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-base py-2.5 px-3" placeholder="Enter any specific notes..."></textarea> <!-- rounded-lg, focus:blue -->
                        </div>

                        <div class="flex items-center justify-end pt-4 border-t mt-6 gap-3">
                            <a href="{{ route('loans.index') }}" style="background-color: white; color: #374151; border: 1px solid #d1d5db; border-radius: 8px;" class="inline-flex justify-center rounded-lg border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Cancel</a>
                            <button type="submit" style="background-color: #2563eb; color: white; border-radius: 8px;" class="inline-flex justify-center rounded-lg border border-transparent shadow px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                Submit Borrowing
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</x-app-layout>
