@extends('admin.layout')
@section('title', 'Create Referral')
@section('page-title', 'Create Referral Link')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-6">
        <form action="{{ route('admin.referrals.store') }}" method="POST">
            @csrf
            <div class="space-y-5">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Person Name *</label>
                        <input type="text" name="name" value="{{ old('name') }}" required placeholder="John Smith" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                        @error('name')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Type *</label>
                        <select name="type" required class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                            <option value="team" {{ old('type') === 'team' ? 'selected' : '' }}>👥 Team Member</option>
                            <option value="partner" {{ old('type') === 'partner' ? 'selected' : '' }}>🤝 Partner</option>
                            <option value="affiliate" {{ old('type') === 'affiliate' ? 'selected' : '' }}>💰 Affiliate</option>
                            <option value="custom" {{ old('type') === 'custom' ? 'selected' : '' }}>⚙️ Custom</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Custom Code <span class="text-gray-500">(optional — auto-generated if empty)</span></label>
                    <input type="text" name="code" value="{{ old('code') }}" placeholder="john-smith-xyz" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                    @error('code')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Link to Team Member</label>
                    <select name="team_member_id" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                        <option value="">— None —</option>
                        @foreach($teamMembers as $member)
                            <option value="{{ $member->id }}" {{ old('team_member_id') == $member->id ? 'selected' : '' }}>
                                {{ $member->name }} ({{ $member->role }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Email</label>
                        <input type="email" name="email" value="{{ old('email') }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Phone</label>
                        <input type="text" name="phone" value="{{ old('phone') }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Notes</label>
                    <textarea name="note" rows="2" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500 resize-none">{{ old('note') }}</textarea>
                </div>

                <div class="flex items-center gap-2">
                    <input type="checkbox" name="is_active" value="1" checked id="active" class="w-4 h-4 rounded border-gray-700 text-indigo-600">
                    <label for="active" class="text-sm text-gray-300">Active</label>
                </div>
            </div>
            @include('admin.partials.form-actions', ['submitText' => 'Create Referral Link', 'cancelRoute' => route('admin.referrals.index')])
        </form>
    </div>
</div>
@endsection