@extends('layouts.admin')

@section('content')
    <div class="container mx-auto px-4 py-6">
        <div class="max-w-3xl mx-auto">
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold">{{ isset($deliveryInfo) ? 'Edit' : 'Create' }} Delivery Information</h1>
                <a href="{{ route('admin.delivery-info.index') }}" class="text-gray-600 hover:text-gray-900">
                    &larr; Back
                </a>
            </div>

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

            <form action="{{ isset($deliveryInfo) ? route('admin.delivery-info.update', $deliveryInfo) : route('admin.delivery-info.store') }}" method="POST" class="bg-white rounded-lg shadow p-6">
                @csrf
                @if(isset($deliveryInfo))
                    @method('PUT')
                @endif

                <div class="space-y-6">
                    <!-- Title -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Title *</label>
                        <input type="text" name="title" value="{{ old('title', $deliveryInfo->title ?? 'Delivery Info') }}" 
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                    </div>

                    <!-- Icon -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Icon (Emoji) *</label>
                        <input type="text" name="icon" value="{{ old('icon', $deliveryInfo->icon ?? '🚚') }}" 
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-2xl" 
                               maxlength="10" required>
                        <p class="text-xs text-gray-500 mt-1">Use emoji or single character</p>
                    </div>

                    <!-- Type Selection -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Type *</label>
                        <div class="flex items-center space-x-6">
                            <label class="flex items-center">
                                <input type="radio" name="is_global" value="1" 
                                       {{ old('is_global', $deliveryInfo->is_global ?? true) ? 'checked' : '' }}
                                       class="mr-2" onchange="toggleProductField(this)">
                                <span>Global (All Products)</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="is_global" value="0" 
                                       {{ !old('is_global', $deliveryInfo->is_global ?? true) ? 'checked' : '' }}
                                       class="mr-2" onchange="toggleProductField(this)">
                                <span>Product Specific</span>
                            </label>
                        </div>
                    </div>

                    <!-- Product Selection -->
                    <div id="product-field" class="{{ old('is_global', $deliveryInfo->is_global ?? true) ? 'hidden' : '' }}">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Product</label>
                        <select name="product_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">Select Product</option>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}" {{ old('product_id', $deliveryInfo->product_id ?? '') == $product->id ? 'selected' : '' }}>
                                    {{ $product->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Delivery Items -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Delivery Items *</label>
                        <div id="items-container" class="space-y-3">
                            @php
                                $items = old('items', $deliveryInfo->items ?? ['Same day delivery in Dhaka (order before 2 PM)', 'Next day delivery outside Dhaka', 'Free delivery over ৳500', 'Cash on delivery available']);
                            @endphp
                            @foreach($items as $index => $item)
                                <div class="flex items-center space-x-2 item-row">
                                    <input type="text" name="items[]" value="{{ $item }}" 
                                           class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                                           placeholder="Delivery information item" required>
                                    <button type="button" onclick="removeItem(this)" class="text-red-600 hover:text-red-800 px-3 py-2">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                        </svg>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" onclick="addItem()" class="mt-3 text-blue-600 hover:text-blue-800 text-sm font-medium">
                            + Add Item
                        </button>
                    </div>

                    <!-- Order -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Display Order</label>
                        <input type="number" name="order" value="{{ old('order', $deliveryInfo->order ?? 0) }}" min="0"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <p class="text-xs text-gray-500 mt-1">Lower numbers appear first</p>
                    </div>

                    <!-- Status -->
                    <div>
                        <label class="flex items-center">
                            <input type="checkbox" name="is_active" value="1" 
                                   {{ old('is_active', $deliveryInfo->is_active ?? true) ? 'checked' : '' }}
                                   class="mr-2">
                            <span class="text-sm font-medium text-gray-700">Active</span>
                        </label>
                    </div>
                </div>

                <div class="mt-6 flex justify-end space-x-3">
                    <a href="{{ route('admin.delivery-info.index') }}" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                        Cancel
                    </a>
                    <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                        {{ isset($deliveryInfo) ? 'Update' : 'Create' }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function toggleProductField(radio) {
            const productField = document.getElementById('product-field');
            if (radio.value === '0') {
                productField.classList.remove('hidden');
            } else {
                productField.classList.add('hidden');
                document.querySelector('select[name="product_id"]').value = '';
            }
        }

        function addItem() {
            const container = document.getElementById('items-container');
            const newItem = document.createElement('div');
            newItem.className = 'flex items-center space-x-2 item-row';
            newItem.innerHTML = `
                <input type="text" name="items[]" 
                       class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                       placeholder="Delivery information item" required>
                <button type="button" onclick="removeItem(this)" class="text-red-600 hover:text-red-800 px-3 py-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                    </svg>
                </button>
            `;
            container.appendChild(newItem);
        }

        function removeItem(button) {
            const container = document.getElementById('items-container');
            const rows = container.querySelectorAll('.item-row');
            if (rows.length > 1) {
                button.closest('.item-row').remove();
            } else {
                alert('At least one item is required');
            }
        }
    </script>
@endsection
