@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">Edit Country</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Update country information</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>

    <!-- Edit 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.update', $country) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <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
                                value="{{ old('name', $country->name) }}"
                                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"
                                value="{{ old('code', $country->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">
                        <!-- Current 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-gray-300 dark:border-gray-700 rounded-lg flex items-center justify-center mb-4 overflow-hidden">
                                @if($country->image)
                                    <img src="{{ $country->image_url }}" alt="Current Flag" 
                                         class="w-full h-full object-contain p-2">
                                @else
                                    <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">No Flag</p>
                                    </div>
                                @endif
                            </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>
                                    Change Flag Image
                                </label>
                                @if($country->image)
                                    <button type="button" onclick="removeFlag()"
                                        class="ml-2 bg-red-100 dark:bg-red-900/20 text-red-500 dark:text-red-400 px-4 py-2 rounded hover:bg-red-200 dark:hover:bg-red-900/30 transition-colors cursor-pointer inline-flex items-center">
                                        <i class="fas fa-trash mr-2"></i>
                                        Remove Flag
                                    </button>
                                    <input type="hidden" name="remove_flag" id="removeFlag" value="0">
                                @endif
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
                                    Optional. Leave empty to keep current flag
                                </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="{{ old('sort_order', $country->sort_order) }}"
                                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"
                                        {{ old('is_active', $country->is_active) ? '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"
                                        {{ !old('is_active', $country->is_active) ? 'checked' : '' }}
                                        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>
                    Update 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]);
        }
    }
    
    function removeFlag() {
        const preview = document.getElementById('flagPreview');
        const removeFlagInput = document.getElementById('removeFlag');
        const fileInput = document.getElementById('image');
        
        preview.innerHTML = `
            <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">No Flag</p>
            </div>
        `;
        
        if (removeFlagInput) {
            removeFlagInput.value = '1';
        }
        
        if (fileInput) {
            fileInput.value = '';
        }
    }
</script>
@endsection