@section("title", "BizMan | Create New Deal")

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Create Deal') }}
        </h2>
        <p class="text-gray-500 text-sm">{{ date('l, d M Y') }}</p>
    </x-slot>

    <div>
        <div class="max-w-7xl flex flex-col gap-5 mx-auto sm:px-6 lg:px-8">
          <div class="flex items-center justify-between gap-2">
                <div class="flex flex-col gap-1">
                    <p class="font-semibold text-3xl max-sm:text-2xl text-black">Create New Deal</p>
                    <p>Buat kontrak baru dengan klien.</p>
                </div>
                <a href="{{ route('deals.index') }}"
                    class="bg-gray-500 whitespace-nowrap hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                    Back
                </a>
            </div>
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="max-sm:p-5 p-6">
                    <div class="mb-6">
                        <h3 class="text-2xl font-semibold text-gray-800">Tambah Deal Baru</h3>
                        <p class="text-gray-600 mt-1">Lengkapi informasi deal dan klien</p>
                    </div>

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

                        <!-- Deal Information -->
                        <div class="mb-6">
                            <h4 class="text-lg font-semibold text-gray-700 mb-4 pb-2 border-b">Informasi Deal</h4>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="md:col-span-2">
                                    <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                                        Judul Deal <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="title" id="title" value="{{ old('title') }}"
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                        placeholder="Contoh: E-learning Platform - Universitas Bina" required>
                                    @error('title')
                                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="deal_value" class="block text-sm font-medium text-gray-700 mb-2">
                                        Nilai Deal (Rp) <span class="text-red-500">*</span>
                                    </label>
                                    <input type="number" name="deal_value" id="deal_value" value="{{ old('deal_value') }}"
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                        placeholder="300000000" min="0" step="1000" required>
                                    @error('deal_value')
                                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="stage" class="block text-sm font-medium text-gray-700 mb-2">
                                        Stage <span class="text-red-500">*</span>
                                    </label>
                                    <select name="stage" id="stage" 
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" required>
                                        <option value="">Pilih Stage</option>
                                        <option value="lead" {{ old('stage') == 'lead' ? 'selected' : '' }}>Lead</option>
                                        <option value="proposal" {{ old('stage') == 'proposal' ? 'selected' : '' }}>Proposal</option>
                                        <option value="negotiation" {{ old('stage') == 'negotiation' ? 'selected' : '' }}>Negotiation</option>
                                    </select>
                                    @error('stage')
                                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="md:col-span-2">
                                    <label for="category" class="block text-sm font-medium text-gray-700 mb-2">
                                        Kategori
                                    </label>
                                    <select name="category" id="category" value="{{ old('category') }}"
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                        placeholder="Contoh: Software Development, Accurate Implementation">
                                        <option value="">Pilih Kategori</option>
                                        <option value="Software Development" {{ old('category') == 'Software Development' ? 'selected' : '' }}>Software Development</option>
                                        <option value="Accurate Implementation" {{ old('category') == 'Accurate Implementation' ? 'selected' : '' }}>Accurate Implementation</option>
                                    </select>
                                    @error('category')
                                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Client Information -->
                        <div class="mb-6">
                            <h4 class="text-lg font-semibold text-gray-700 mb-4 pb-2 border-b">Informasi Klien</h4>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="md:col-span-2 relative">
                                    <label for="client_name" class="block text-sm font-medium text-gray-700 mb-2">
                                        Nama Klien <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="text" name="client_name" id="client_name" value="{{ old('client_name') }}"
                                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 pr-10"
                                            placeholder="Ketik atau pilih customer..." 
                                            autocomplete="off"
                                            required>
                                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    
                                    <!-- Dropdown List -->
                                    <div id="customer_dropdown" class="hidden absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto">
                                        <div id="customer_list" class="py-1">
                                            @foreach($customers as $customer)
                                                <div class="customer-option px-4 py-2 hover:bg-blue-50 cursor-pointer flex items-center justify-between"
                                                     data-name="{{ $customer->name }}"
                                                     data-email="{{ $customer->email }}"
                                                     data-phone="{{ $customer->phone }}"
                                                     data-address="{{ $customer->address }}">
                                                    <div>
                                                        <div class="font-medium text-gray-900">{{ $customer->name }}</div>
                                                        @if($customer->email)
                                                            <div class="text-xs text-gray-500">{{ $customer->email }}</div>
                                                        @endif
                                                    </div>
                                                    <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                                    </svg>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div id="no_results" class="hidden px-4 py-3 text-sm text-gray-500 text-center">
                                            Tidak ada customer yang cocok. Ketik untuk membuat baru.
                                        </div>
                                    </div>
                                    
                                    <p class="text-xs text-gray-500 mt-1">💡 Pilih customer terdaftar atau ketik nama baru</p>
                                    @error('client_name')
                                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="md:col-span-2">
                                    <label for="company_name" class="block text-sm font-medium text-gray-700 mb-2">
                                        Nama Perusahaan
                                    </label>
                                    <input type="text" name="company_name" id="company_name" value="{{ old('company_name') }}"
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                        placeholder="Contoh: PT. Teknologi Nusantara">
                                    @error('company_name')
                                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="client_email" class="block text-sm font-medium text-gray-700 mb-2">
                                        Email Klien
                                    </label>
                                    <input type="email" name="client_email" id="client_email" value="{{ old('client_email') }}"
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                        placeholder="client@example.com">
                                    @error('client_email')
                                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="client_phone" class="block text-sm font-medium text-gray-700 mb-2">
                                        Telepon Klien
                                    </label>
                                    <input type="text" name="client_phone" id="client_phone" value="{{ old('client_phone') }}"
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                        placeholder="08123456789">
                                    @error('client_phone')
                                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="md:col-span-2">
                                    <label for="client_address" class="block text-sm font-medium text-gray-700 mb-2">
                                        Alamat Klien
                                    </label>
                                    <textarea name="client_address" id="client_address" rows="3"
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                        placeholder="Alamat lengkap klien">{{ old('client_address') }}</textarea>
                                    @error('client_address')
                                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Notes -->
                        <div class="mb-6">
                            <label for="note" class="block text-sm font-medium text-gray-700 mb-2">
                                Catatan
                            </label>
                            <textarea name="note" id="note" rows="4"
                                class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                placeholder="Tambahkan catatan penting tentang deal ini...">{{ old('note') }}</textarea>
                            @error('note')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Buttons -->
                        <div class="flex items-center justify-end gap-3 pt-4 border-t">
                            <a href="{{ route('deals.index') }}"
                                class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 font-medium">
                                Batal
                            </a>
                            <button type="submit"
                                class="px-6 py-2 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded-md">
                                Simpan Deal
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        const clientNameInput = document.getElementById('client_name');
        const dropdown = document.getElementById('customer_dropdown');
        const customerOptions = document.querySelectorAll('.customer-option');
        const noResults = document.getElementById('no_results');
        const customerList = document.getElementById('customer_list');

        // Show dropdown on focus
        clientNameInput.addEventListener('focus', function() {
            dropdown.classList.remove('hidden');
            filterCustomers();
        });

        // Filter customers as user types
        clientNameInput.addEventListener('input', function() {
            filterCustomers();
        });

        // Filter function
        function filterCustomers() {
            const searchTerm = clientNameInput.value.toLowerCase();
            let hasVisibleOptions = false;

            customerOptions.forEach(option => {
                const name = option.dataset.name.toLowerCase();
                const email = option.dataset.email?.toLowerCase() || '';
                
                if (name.includes(searchTerm) || email.includes(searchTerm)) {
                    option.classList.remove('hidden');
                    hasVisibleOptions = true;
                } else {
                    option.classList.add('hidden');
                }
            });

            // Show/hide no results message
            if (hasVisibleOptions) {
                customerList.classList.remove('hidden');
                noResults.classList.add('hidden');
            } else {
                customerList.classList.add('hidden');
                noResults.classList.remove('hidden');
            }
        }

        // Handle customer selection
        customerOptions.forEach(option => {
            option.addEventListener('click', function() {
                const name = this.dataset.name;
                const email = this.dataset.email || '';
                const phone = this.dataset.phone || '';
                const address = this.dataset.address || '';

                // Fill input fields
                clientNameInput.value = name;
                document.getElementById('client_email').value = email;
                document.getElementById('client_phone').value = phone;
                document.getElementById('client_address').value = address;

                // Hide dropdown
                dropdown.classList.add('hidden');

                // Visual feedback
                const fields = [
                    document.getElementById('client_email'),
                    document.getElementById('client_phone'),
                    document.getElementById('client_address')
                ];

                fields.forEach(field => {
                    if (field.value) {
                        field.classList.add('bg-green-50', 'border-green-300');
                        setTimeout(() => {
                            field.classList.remove('bg-green-50', 'border-green-300');
                        }, 1500);
                    }
                });
            });
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', function(event) {
            if (!clientNameInput.contains(event.target) && !dropdown.contains(event.target)) {
                dropdown.classList.add('hidden');
            }
        });

        // Close dropdown on escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                dropdown.classList.add('hidden');
            }
        });

        // Arrow key navigation
        let currentFocus = -1;
        clientNameInput.addEventListener('keydown', function(event) {
            const visibleOptions = Array.from(customerOptions).filter(opt => !opt.classList.contains('hidden'));
            
            if (event.key === 'ArrowDown') {
                event.preventDefault();
                currentFocus++;
                if (currentFocus >= visibleOptions.length) currentFocus = 0;
                addActive(visibleOptions);
            } else if (event.key === 'ArrowUp') {
                event.preventDefault();
                currentFocus--;
                if (currentFocus < 0) currentFocus = visibleOptions.length - 1;
                addActive(visibleOptions);
            } else if (event.key === 'Enter') {
                event.preventDefault();
                if (currentFocus > -1 && visibleOptions[currentFocus]) {
                    visibleOptions[currentFocus].click();
                }
            }
        });

        function addActive(options) {
            removeActive(options);
            if (currentFocus >= options.length) currentFocus = 0;
            if (currentFocus < 0) currentFocus = options.length - 1;
            options[currentFocus]?.classList.add('bg-blue-100');
            options[currentFocus]?.scrollIntoView({ block: 'nearest' });
        }

        function removeActive(options) {
            options.forEach(option => option.classList.remove('bg-blue-100'));
        }
    </script>
    @endpush
</x-app-layout>