@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full overflow-auto">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Add New Country</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Add a new country to your system</p>
        </div>
        <a href="{{ route('admin.countries.index') }}"
            class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors flex items-center">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Countries
        </a>
    </div>

    <!-- Create Form -->
    <div class="bg-white dark:bg-dark-secondary rounded shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
        <form action="{{ route('admin.countries.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="p-6 space-y-6">
                <!-- Basic Information -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-info-circle mr-2 text-[#10B981]"></i>
                        Basic Information
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Country Name -->
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Country Name *
                            </label>
                            <input type="text" name="name" id="name" required
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors"
                                placeholder="Enter country name">
                            @error('name')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Country Code -->
                        <div>
                            <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Country Code
                            </label>
                            <input type="text" name="code" id="code"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors"
                                placeholder="e.g., US, BD, UK">
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                ISO country code (optional)
                            </p>
                            @error('code')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Flag Upload -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-flag mr-2 text-[#10B981]"></i>
                        Flag/Image
                    </h3>
                    
                    <div class="space-y-4">
                        <!-- Flag Preview -->
                        <div class="flex flex-col items-center justify-center">
                            <div id="flagPreview" class="w-48 h-32 bg-gray-100 dark:bg-gray-800 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg flex items-center justify-center mb-4">
                                <div class="text-center">
                                    <i class="fas fa-flag text-3xl text-gray-400 mb-2"></i>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Flag Preview</p>
                                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Recommended: 4:3 ratio</p>
                                </div>
                            </div>
                            
                            <!-- File Input -->
                            <div class="relative">
                                <input type="file" name="image" id="image" accept="image/*"
                                    class="hidden"
                                    onchange="previewFlag(this)">
                                <label for="image"
                                    class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors cursor-pointer inline-flex items-center">
                                    <i class="fas fa-upload mr-2"></i>
                                    Choose Flag Image
                                </label>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
                                    Optional. Supported formats: JPG, PNG, GIF, SVG. Max size: 2MB
                                </p>
                            </div>
                            
                            @error('image')
                                <p class="mt-1 text-sm text-red-500 text-center">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Settings -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-cog mr-2 text-[#10B981]"></i>
                        Settings
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Sort Order -->
                        <div>
                            <label for="sort_order" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Sort Order
                            </label>
                            <input type="number" name="sort_order" id="sort_order" min="0" value="0"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors">
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                Lower numbers appear first
                            </p>
                            @error('sort_order')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Status -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Status
                            </label>
                            <div class="flex items-center space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="is_active" value="1" checked
                                        class="text-[#10B981] focus:ring-[#10B981]">
                                    <span class="ml-2 text-gray-700 dark:text-gray-300">Active</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="is_active" value="0"
                                        class="text-[#10B981] focus:ring-[#10B981]">
                                    <span class="ml-2 text-gray-700 dark:text-gray-300">Inactive</span>
                                </label>
                            </div>
                            @error('is_active')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 flex justify-end space-x-3">
                <a href="{{ route('admin.countries.index') }}"
                    class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    Cancel
                </a>
                <button type="submit"
                    class="px-4 py-2 bg-[#10B981] text-white rounded hover:bg-[#0da271] transition-colors flex items-center">
                    <i class="fas fa-save mr-2"></i>
                    Create Country
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function previewFlag(input) {
        const preview = document.getElementById('flagPreview');
        
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                preview.innerHTML = `<img src="${e.target.result}" alt="Flag Preview" class="w-full h-full object-contain p-2">`;
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection