@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 Partner</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Add a new partner to your system</p>
        </div>
        <a href="{{ route('admin.partners.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 Partners
        </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.partners.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">
                        <!-- Partner Name -->
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Partner 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 partner company name">
                            @error('name')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Website -->
                        <div>
                            <label for="website" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Website URL
                            </label>
                            <input type="url" name="website" id="website"
                                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="https://example.com">
                            @error('website')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Logo Upload -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-image mr-2 text-[#10B981]"></i>
                        Logo Upload
                    </h3>
                    
                    <div class="space-y-4">
                        <!-- Logo Preview -->
                        <div class="flex flex-col items-center justify-center">
                            <div id="logoPreview" class="w-48 h-48 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-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Logo Preview</p>
                                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">300x200 recommended</p>
                                </div>
                            </div>
                            
                            <!-- File Input -->
                            <div class="relative">
                                <input type="file" name="logo" id="logo" accept="image/*" required
                                    class="hidden"
                                    onchange="previewLogo(this)">
                                <label for="logo"
                                    class="bg-[#10B981] text-white px-4 py-2 rounded hover:bg-[#0da271] transition-colors cursor-pointer inline-flex items-center">
                                    <i class="fas fa-upload mr-2"></i>
                                    Choose Logo
                                </label>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
                                    Supported formats: JPG, PNG, GIF, SVG. Max size: 2MB
                                </p>
                            </div>
                            
                            @error('logo')
                                <p class="mt-1 text-sm text-red-500 text-center">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Additional Information -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-edit mr-2 text-[#10B981]"></i>
                        Additional Information
                    </h3>
                    
                    <div class="space-y-6">
                        <!-- Description -->
                        <div>
                            <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Description
                            </label>
                            <textarea name="description" id="description" rows="3"
                                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 resize-none"
                                placeholder="Brief description about the partner..."></textarea>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                Maximum 1000 characters
                            </p>
                            @error('description')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <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>
            </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.partners.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 Partner
                </button>
            </div>
        </form>
    </div>
</div>

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