@extends('layouts.app')

@section('title', 'Register Your Shop')

@section('content')
<div class="container mx-auto px-4 py-8 max-w-4xl">
    <div class="bg-white rounded-lg shadow-lg p-8">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Register Your Shop</h1>
            <p class="text-gray-600">Join {{ $mall ? $mall->name : 'our shopping malls' }} and grow your business!</p>
        </div>

        @if(session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
                {{ session('error') }}
            </div>
        @endif

        <form action="{{ route('shop-registration.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
            @csrf

            <!-- Mall Selection -->
            <div class="bg-gray-50 p-6 rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">📍 Select Mall</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="mall_id" class="block text-sm font-medium text-gray-700 mb-2">Choose Mall *</label>
                        <select name="mall_id" id="mall_id" required 
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Select a mall...</option>
                            @foreach($malls as $mallOption)
                                <option value="{{ $mallOption->id }}" {{ ($mall && $mall->id == $mallOption->id) ? 'selected' : '' }}>
                                    {{ $mallOption->name }} - {{ $mallOption->address }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <!-- Business Information -->
            <div class="bg-gray-50 p-6 rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">🏪 Business Information</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="store_name" class="block text-sm font-medium text-gray-700 mb-2">Shop Name *</label>
                        <input type="text" name="store_name" id="store_name" required 
                               placeholder="e.g., Fashion Paradise"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="brand_name" class="block text-sm font-medium text-gray-700 mb-2">Brand Name</label>
                        <input type="text" name="brand_name" id="brand_name" 
                               placeholder="e.g., Nike, H&M"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="store_category" class="block text-sm font-medium text-gray-700 mb-2">Business Category *</label>
                        <select name="store_category" id="store_category" required 
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Select category...</option>
                            <option value="apparel_fashion">Apparel & Fashion</option>
                            <option value="shoes_accessories">Shoes & Accessories</option>
                            <option value="electronics">Electronics</option>
                            <option value="home_garden">Home & Garden</option>
                            <option value="health_beauty">Health & Beauty</option>
                            <option value="sports_fitness">Sports & Fitness</option>
                            <option value="books_media">Books & Media</option>
                            <option value="toys_games">Toys & Games</option>
                            <option value="jewelry_watches">Jewelry & Watches</option>
                            <option value="food_beverage">Food & Beverage</option>
                            <option value="services">Services</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div>
                        <label for="business_type" class="block text-sm font-medium text-gray-700 mb-2">Business Type *</label>
                        <select name="business_type" id="business_type" required 
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="retail">Retail</option>
                            <option value="service">Service</option>
                            <option value="food">Food & Restaurant</option>
                            <option value="entertainment">Entertainment</option>
                            <option value="professional">Professional</option>
                        </select>
                    </div>
                </div>
                
                <div class="mt-4">
                    <label for="store_description" class="block text-sm font-medium text-gray-700 mb-2">Business Description *</label>
                    <textarea name="store_description" id="store_description" rows="4" required 
                              placeholder="Describe your business, products/services, and what makes you unique..."
                              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>

                <div class="mt-4">
                    <label class="flex items-center">
                        <input type="checkbox" name="franchise_store" value="1" class="mr-2">
                        <span class="text-sm text-gray-700">This is a franchise store</span>
                    </label>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="bg-gray-50 p-6 rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">📞 Contact Information</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="primary_contact_name" class="block text-sm font-medium text-gray-700 mb-2">Contact Person *</label>
                        <input type="text" name="primary_contact_name" id="primary_contact_name" required 
                               placeholder="Full name"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="primary_contact_phone" class="block text-sm font-medium text-gray-700 mb-2">Phone Number *</label>
                        <input type="tel" name="primary_contact_phone" id="primary_contact_phone" required 
                               placeholder="+971 50 123 4567"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="primary_contact_email" class="block text-sm font-medium text-gray-700 mb-2">Email Address *</label>
                        <input type="email" name="primary_contact_email" id="primary_contact_email" required 
                               placeholder="contact@yourstore.com"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="whatsapp_number" class="block text-sm font-medium text-gray-700 mb-2">WhatsApp Number</label>
                        <input type="tel" name="whatsapp_number" id="whatsapp_number" 
                               placeholder="+971 50 123 4567"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
            </div>

            <!-- Location Preferences -->
            <div class="bg-gray-50 p-6 rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">📍 Location Preferences</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="preferred_floor" class="block text-sm font-medium text-gray-700 mb-2">Preferred Floor</label>
                        <select name="preferred_floor" id="preferred_floor" 
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">No preference</option>
                            <option value="1">Ground Floor</option>
                            <option value="2">First Floor</option>
                            <option value="3">Second Floor</option>
                            <option value="4">Third Floor</option>
                            <option value="5">Fourth Floor</option>
                        </select>
                    </div>
                    <div>
                        <label for="store_size_category" class="block text-sm font-medium text-gray-700 mb-2">Store Size *</label>
                        <select name="store_size_category" id="store_size_category" required 
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="kiosk">Kiosk (Small Stand)</option>
                            <option value="small">Small (50-200 sqft)</option>
                            <option value="medium" selected>Medium (200-500 sqft)</option>
                            <option value="large">Large (500+ sqft)</option>
                        </select>
                    </div>
                    <div>
                        <label for="preferred_unit" class="block text-sm font-medium text-gray-700 mb-2">Preferred Unit (if any)</label>
                        <input type="text" name="preferred_unit" id="preferred_unit" 
                               placeholder="e.g., A-101, B-205"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
            </div>

            <!-- Business Details -->
            <div class="bg-gray-50 p-6 rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">💼 Business Details</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="planned_employees" class="block text-sm font-medium text-gray-700 mb-2">Number of Employees</label>
                        <input type="number" name="planned_employees" id="planned_employees" min="1" 
                               placeholder="e.g., 3"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="opening_date" class="block text-sm font-medium text-gray-700 mb-2">Planned Opening Date</label>
                        <input type="date" name="opening_date" id="opening_date" min="{{ date('Y-m-d') }}"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
            </div>

            <!-- Images -->
            <div class="bg-gray-50 p-6 rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">📸 Images</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="logo_image" class="block text-sm font-medium text-gray-700 mb-2">Business Logo</label>
                        <input type="file" name="logo_image" id="logo_image" accept="image/*"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <p class="text-xs text-gray-500 mt-1">Max 2MB, JPG/PNG</p>
                    </div>
                    <div>
                        <label for="store_images" class="block text-sm font-medium text-gray-700 mb-2">Store Photos</label>
                        <input type="file" name="store_images[]" id="store_images" accept="image/*" multiple
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <p class="text-xs text-gray-500 mt-1">Max 5MB each, JPG/PNG</p>
                    </div>
                </div>
            </div>

            <!-- Application Notes -->
            <div class="bg-gray-50 p-6 rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">📝 Additional Information</h2>
                <div>
                    <label for="application_notes" class="block text-sm font-medium text-gray-700 mb-2">Application Notes</label>
                    <textarea name="application_notes" id="application_notes" rows="4" 
                              placeholder="Any additional information you'd like to share about your business or specific requirements..."
                              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
            </div>

            <!-- Submit Section -->
            <div class="text-center pt-6 border-t border-gray-200">
                <div class="mb-4">
                    <label class="flex items-center justify-center">
                        <input type="checkbox" required class="mr-2">
                        <span class="text-sm text-gray-700">I agree to the terms and conditions and confirm that all information provided is accurate *</span>
                    </label>
                </div>
                
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg transition duration-200">
                    Submit Application
                </button>
                
                <p class="text-sm text-gray-500 mt-3">
                    We will review your application and contact you within 3-5 business days.
                </p>
            </div>
        </form>
    </div>
</div>

<style>
/* Add some hover effects */
.form-section:hover {
    background-color: #f8fafc;
}

/* File input styling */
input[type="file"] {
    file-selector-button {
        background-color: #e5e7eb;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        margin-right: 12px;
        cursor: pointer;
    }
    
    file-selector-button:hover {
        background-color: #d1d5db;
    }
}
</style>

<script>
// Auto-populate mall selection if coming from mall page
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const mallId = urlParams.get('mall_id');
    if (mallId) {
        document.getElementById('mall_id').value = mallId;
    }
});

// Form validation and user experience improvements
document.getElementById('store_category').addEventListener('change', function() {
    const category = this.value;
    const businessType = document.getElementById('business_type');
    
    // Auto-suggest business type based on category
    if (category === 'food_beverage') {
        businessType.value = 'food';
    } else if (category === 'services') {
        businessType.value = 'service';
    } else {
        businessType.value = 'retail';
    }
});

// File size validation
document.querySelectorAll('input[type="file"]').forEach(input => {
    input.addEventListener('change', function() {
        const files = Array.from(this.files);
        const maxSize = this.id === 'logo_image' ? 2 * 1024 * 1024 : 5 * 1024 * 1024; // 2MB or 5MB
        
        files.forEach(file => {
            if (file.size > maxSize) {
                alert(`File ${file.name} is too large. Maximum size is ${maxSize / (1024 * 1024)}MB.`);
                this.value = '';
            }
        });
    });
});
</script>
@endsection