@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <h1 class="text-2xl font-bold mb-6 text-gray-800">Edit Customer</h1>
    @if (session('success'))
        <div class="bg-green-100 text-green-700 p-4 rounded mb-6">
            {{ session('success') }}
        </div>
    @endif
    @if ($errors->any())
        <div class="bg-red-100 text-red-700 p-4 rounded mb-6">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div x-data="{
        mobileNo: '{{ old('mobile_no', $customer->mobile_no) }}',
        suggestions: [],
        async searchCustomers(query) {
            if (query.length < 3) {
                this.suggestions = [];
                return;
            }
            try {
                const response = await fetch('/api/customers/search?mobile_no=' + encodeURIComponent(query));
                this.suggestions = await response.json();
            } catch (error) {
                console.error('Search error:', error);
            }
        },
        selectCustomer(customer) {
            this.mobileNo = customer.mobile_no;
            document.getElementById('name').value = customer.name;
            document.getElementById('identity_no').value = customer.identity_no;
            this.suggestions = [];
        }
    }" class="max-w-md mx-auto">
        <form action="{{ route('customers.update', $customer) }}" method="POST" class="space-y-4">
            @csrf
            @method('PUT')
            <div>
                <label for="mobile_no" class="block text-sm font-medium text-gray-700">Mobile Number</label>
                <input
                    x-model="mobileNo"
                    @input.debounce.500ms="searchCustomers($event.target.value)"
                    type="text"
                    name="mobile_no"
                    id="mobile_no"
                    value="{{ old('mobile_no', $customer->mobile_no) }}"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 sm:text-sm"
                    required
                >
                @error('mobile_no') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                <div x-show="suggestions.length > 0" class="mt-1 bg-white border border-gray-300 rounded-md shadow-sm">
                    <ul>
                        <template x-for="customer in suggestions" :key="customer.id">
                            <li
                                @click="selectCustomer(customer)"
                                class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
                                x-text="`${customer.name} (${customer.mobile_no})`"
                            ></li>
                        </template>
                    </ul>
                </div>
            </div>
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                <input
                    type="text"
                    name="name"
                    id="name"
                    value="{{ old('name', $customer->name) }}"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 sm:text-sm"
                    required
                >
                @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label for="identity_no" class="block text-sm font-medium text-gray-700">Identity Number</label>
                <input
                    type="text"
                    name="identity_no"
                    id="identity_no"
                    value="{{ old('identity_no', $customer->identity_no) }}"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 sm:text-sm"
                    required
                >
                @error('identity_no') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <button
                    type="submit"
                    class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
                >
                    Update Customer
                </button>
            </div>
        </form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@endsection