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

        <div class="py-12">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
            <!-- Header -->
            <div class="mb-8 animate-fade-in">
                <h1 class="text-3xl font-bold text-crextio-text font-display">Request a Loan</h1>
                <p class="text-gray-600 mt-1">Submit your loan request for review</p>
            </div>

            <!-- Form Card -->
            <div class="bg-white rounded-xl shadow-soft p-8 animate-slide-up">
                <form method="POST" action="{{ route('loans.store') }}" class="space-y-6">
                    @csrf

                    <!-- Amount -->
                    <div>
                        <label for="amount" class="block text-sm font-medium text-gray-700 mb-2">
                            Loan Amount (TZS) <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                                </svg>
                            </div>
                            <input type="number" name="amount" id="amount" value="{{ old('amount') }}" required min="1" step="1000"
                                   class="pl-10 w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-crextio-accent focus:border-transparent transition-all @error('amount') border-red-500 @enderror"
                                   placeholder="Enter amount">
                        </div>
                        @error('amount')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <p class="mt-2 text-xs text-gray-500">Minimum amount: TZS 1,000</p>
                    </div>

                    <!-- Purpose -->
                    <div>
                        <label for="purpose" class="block text-sm font-medium text-gray-700 mb-2">
                            Purpose of Loan <span class="text-red-500">*</span>
                        </label>
                        <textarea name="purpose" id="purpose" rows="4" required
                                  class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-crextio-accent focus:border-transparent transition-all @error('purpose') border-red-500 @enderror"
                                  placeholder="Explain the purpose of this loan request...">{{ old('purpose') }}</textarea>
                        @error('purpose')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <p class="mt-2 text-xs text-gray-500">Maximum 1,000 characters</p>
                    </div>

                    <!-- Info Box -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <div class="flex">
                            <svg class="h-5 w-5 text-blue-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-blue-800">Approval Process</h3>
                                <div class="mt-2 text-sm text-blue-700">
                                    <p>Your loan request will go through a two-tier approval process:</p>
                                    <ol class="list-decimal list-inside mt-2 space-y-1">
                                        <li>Leader review and approval</li>
                                        <li>Top-leader final approval</li>
                                        <li>Disbursement by top-leader</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex items-center justify-end gap-4 pt-6 border-t border-gray-200">
                        <a href="{{ route('loans.index') }}" class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg transition-all duration-300">
                            Cancel
                        </a>
                        <button type="submit" class="px-6 py-3 bg-crextio-accent hover:bg-yellow-500 text-gray-900 font-medium rounded-lg transition-all duration-300 shadow-soft hover:shadow-md">
                            Submit Request
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </x-slot>

    
</x-app-layout>
