<x-shop-layout title="আপনার অর্ডার ট্র্যাক করুন">
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="text-center mb-8">
            <div class="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">আপনার অর্ডার ট্র্যাক করুন</h1>
            <p class="text-gray-600">আপনার অর্ডারের স্ট্যাটাস ট্র্যাক করতে আপনার অর্ডার নম্বর বা ফোন নম্বর লিখুন</p>
        </div>

        @guest
        <!-- Login Notice for Unauthenticated Users -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
            <div class="flex items-center">
                <svg class="w-5 h-5 text-blue-600 mr-3" 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>
                    <p class="text-blue-800 font-medium">সম্পূর্ণ অর্ডারের বিবরণ দেখতে দয়া করে লগ ইন করুন</p>
                    <p class="text-blue-600 text-sm mt-1">আপনি এখানে অর্ডার খুঁজতে পারবেন, তবে সম্পূর্ণ অর্ডারের তথ্য দেখতে আপনাকে 
                        <button onclick="openLoginModal()" class="underline hover:text-blue-800 cursor-pointer">লগ ইন</button> 
                        বা 
                        <button onclick="openRegisterModal()" class="underline hover:text-blue-800 cursor-pointer">রেজিস্টার</button>
                        করতে হবে।
                    </p>
                </div>
            </div>
        </div>
        @endguest

        <!-- Tracking Form -->
        <div class="bg-white rounded-lg shadow-md p-6">
            @if(session('error'))
                <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                    {{ session('error') }}
                </div>
            @endif

            @if($errors->any())
                <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                    <ul class="list-disc list-inside">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('order.tracking.search') }}" method="POST" class="space-y-6">
                @csrf
                
                <!-- Search Type Selection -->
                <div>
                    <label class="text-sm font-medium text-gray-700 mb-3 block">অনুসন্ধানের ধরণ:</label>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <input type="radio" id="order_number" name="search_type" value="order_number" 
                                   class="sr-only peer" {{ old('search_type', 'order_number') == 'order_number' ? 'checked' : '' }}>
                            <label for="order_number" class="flex items-center justify-center px-4 py-3 bg-white border-2 border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-600 transition-all">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path>
                                </svg>
                                অর্ডার নম্বর
                            </label>
                        </div>
                        <div>
                            <input type="radio" id="phone" name="search_type" value="phone" 
                                   class="sr-only peer" {{ old('search_type') == 'phone' ? 'checked' : '' }}>
                            <label for="phone" class="flex items-center justify-center px-4 py-3 bg-white border-2 border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-600 transition-all">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                </svg>
                                ফোন নম্বর
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Search Input -->
                <div>
                    <label for="search_value" class="block text-sm font-medium text-gray-700 mb-2">
                        <span id="search_label">অর্ডার নম্বর</span>
                    </label>
                    <input type="text" 
                           id="search_value" 
                           name="search_value" 
                           value="{{ old('search_value') }}"
                           placeholder="আপনার অর্ডার নম্বর বা ফোন নম্বর লিখুন"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                           required>
                </div>

                <!-- Submit Button -->
                <button type="submit" 
                        class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    অর্ডার ট্র্যাক করুন
                </button>
            </form>
        </div>

        <!-- Help Section -->
        <div class="mt-8 text-center">
            <p class="text-gray-600 mb-4">আপনার অর্ডার নিয়ে সাহায্য প্রয়োজন?</p>
            <div class="flex justify-center space-x-4">
                <a href="tel:+8801628178114" class="flex items-center text-blue-600 hover:text-blue-800">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                    </svg>
                    আমাদের কল করুন
                </a>
                <a href="{{ route('shop.products') }}" class="flex items-center text-blue-600 hover:text-blue-800">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                    </svg>
                    কেনাকাটা চালিয়ে যান
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    // Update placeholder and label based on search type
    const searchTypeInputs = document.querySelectorAll('input[name="search_type"]');
    const searchInput = document.getElementById('search_value');
    const searchLabel = document.getElementById('search_label');

    searchTypeInputs.forEach(input => {
        input.addEventListener('change', function() {
            if (this.value === 'order_number') {
                searchLabel.textContent = 'অর্ডার নম্বর';
                searchInput.placeholder = 'আপনার অর্ডার নম্বর লিখুন (যেমন, ORD20250921001)';
            } else {
                searchLabel.textContent = 'ফোন নম্বর';
                searchInput.placeholder = 'আপনার ফোন নম্বর লিখুন (যেমন, 01628178114)';
            }
        });
    });
</script>
</x-shop-layout>