@extends('layouts.admin')

@section('title', 'Add New Business - ' . $mall->name)

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0"><i class="bi bi-shop"></i> Add New Business to {{ $mall->name }}</h5>
                        <small>Create a complete business profile with owner details, products, and images</small>
                    </div>
                    <a href="{{ route('admin.malls.shops', $mall) }}" class="btn btn-light btn-sm">
                        <i class="bi bi-arrow-left"></i> Back to Businesses
                    </a>
                </div>

                <div class="card-body p-4">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('admin.malls.businesses.store', $mall) }}" method="POST" enctype="multipart/form-data" id="businessForm">
                        @csrf

                        <!-- Business Owner Information -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="bi bi-person-fill"></i> Business Owner Information</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="owner_name" class="form-label">Owner Name *</label>
                                        <input type="text" class="form-control" id="owner_name" name="owner_name" value="{{ old('owner_name') }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="owner_email" class="form-label">Owner Email *</label>
                                        <input type="email" class="form-control" id="owner_email" name="owner_email" value="{{ old('owner_email') }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="owner_phone" class="form-label">Owner Phone *</label>
                                        <input type="tel" class="form-control" id="owner_phone" name="owner_phone" value="{{ old('owner_phone') }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="user_id" class="form-label">Existing User (Optional)</label>
                                        <select class="form-select" id="user_id" name="user_id">
                                            <option value="">Create new user account</option>
                                            @foreach($users as $user)
                                                <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                                    {{ $user->name }} ({{ $user->email }})
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-muted">If not selected, a new user account will be created</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Business Basic Information -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="bi bi-building"></i> Business Information</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="business_name" class="form-label">Business Name *</label>
                                        <input type="text" class="form-control" id="business_name" name="business_name" value="{{ old('business_name') }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="brand_name" class="form-label">Brand Name</label>
                                        <input type="text" class="form-control" id="brand_name" name="brand_name" value="{{ old('brand_name') }}">
                                    </div>
                                    <div class="col-12">
                                        <label for="business_description" class="form-label">Business Description *</label>
                                        <textarea class="form-control" id="business_description" name="business_description" rows="3" required>{{ old('business_description') }}</textarea>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="bizspot_business_type_id" class="form-label">Business Type *</label>
                                        <select name="bizspot_business_type_id" id="bizspot_business_type_id" 
                                                class="form-select" required>
                                            <option value="">Select Business Type</option>
                                            @foreach($bizspotBusinessTypes as $type)
                                                <option value="{{ $type->id }}" data-slug="{{ $type->slug }}">
                                                    {{ $type->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="bizspot_main_category_id" class="form-label">Main Category *</label>
                                        <select name="bizspot_main_category_id" id="bizspot_main_category_id" 
                                                class="form-select" required disabled>
                                            <option value="">Select Main Category</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="bizspot_sub_category_id" class="form-label">Sub Category *</label>
                                        <select name="bizspot_sub_category_id" id="bizspot_sub_category_id" 
                                                class="form-select" required disabled>
                                            <option value="">Select Sub Category</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="category_id" class="form-label">Legacy Store Category (Optional)</label>
                                        <select name="category_id" id="category_id" 
                                                class="form-select">
                                            <option value="">Select Legacy Category</option>
                                            @foreach($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="franchise_store" class="form-label">Franchise Store</label>
                                        <select class="form-select" id="franchise_store" name="franchise_store">
                                            <option value="0">No</option>
                                            <option value="1">Yes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Location in Mall -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="bi bi-geo-alt"></i> Store Location</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label for="floor_number" class="form-label">Floor Number *</label>
                                        <input type="number" class="form-control" id="floor_number" name="floor_number" min="1" value="{{ old('floor_number', 1) }}" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="unit_number" class="form-label">Unit Number *</label>
                                        <input type="text" class="form-control" id="unit_number" name="unit_number" value="{{ old('unit_number') }}" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="store_area_sqft" class="form-label">Store Area (sq ft)</label>
                                        <input type="number" class="form-control" id="store_area_sqft" name="store_area_sqft" step="0.01" value="{{ old('store_area_sqft') }}">
                                        <small class="text-muted">Optional - Total store area in square feet</small>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="store_size_category" class="form-label">Size Category *</label>
                                        <select class="form-select" id="store_size_category" name="store_size_category" required>
                                            <option value="kiosk">Kiosk</option>
                                            <option value="small">Small</option>
                                            <option value="medium" selected>Medium</option>
                                            <option value="large">Large</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Contact Information -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="bi bi-telephone"></i> Contact & Social Media</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="business_phone" class="form-label">Business Phone *</label>
                                        <input type="tel" class="form-control" id="business_phone" name="business_phone" value="{{ old('business_phone') }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="business_email" class="form-label">Business Email *</label>
                                        <input type="email" class="form-control" id="business_email" name="business_email" value="{{ old('business_email') }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="whatsapp_number" class="form-label">WhatsApp Number</label>
                                        <input type="tel" class="form-control" id="whatsapp_number" name="whatsapp_number" value="{{ old('whatsapp_number') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="website_url" class="form-label">Website URL</label>
                                        <input type="url" class="form-control" id="website_url" name="website_url" value="{{ old('website_url') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="instagram_handle" class="form-label">Instagram Handle</label>
                                        <div class="input-group">
                                            <span class="input-group-text">@</span>
                                            <input type="text" class="form-control" id="instagram_handle" name="instagram_handle" value="{{ old('instagram_handle') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="facebook_page" class="form-label">Facebook Page</label>
                                        <input type="url" class="form-control" id="facebook_page" name="facebook_page" value="{{ old('facebook_page') }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Business Details -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="bi bi-graph-up"></i> Business Details</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="employees_count" class="form-label">Number of Employees</label>
                                        <input type="number" class="form-control" id="employees_count" name="employees_count" min="1" value="{{ old('employees_count') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="opening_date" class="form-label">Opening Date</label>
                                        <input type="date" class="form-control" id="opening_date" name="opening_date" value="{{ old('opening_date') }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Business Documents & Licenses (Optional) -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="bi bi-file-earmark-text"></i> Business Documents & Licenses <small class="text-muted">(Optional)</small></h6>
                            </div>
                            <div class="card-body">
                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle"></i> These fields are optional. You can add license information later if needed.
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="business_license_number" class="form-label">Business License Number <small class="text-muted">(Optional)</small></label>
                                        <input type="text" class="form-control" id="business_license_number" name="business_license_number" value="{{ old('business_license_number') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="trade_license_number" class="form-label">Trade License Number <small class="text-muted">(Optional)</small></label>
                                        <input type="text" class="form-control" id="trade_license_number" name="trade_license_number" value="{{ old('trade_license_number') }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Images & Media -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="bi bi-images"></i> Business Images</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="logo_image" class="form-label">Business Logo</label>
                                        <input type="file" class="form-control" id="logo_image" name="logo_image" accept="image/*">
                                        <small class="text-muted">Max size: 2MB. Formats: JPEG, PNG, JPG</small>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="store_images" class="form-label">Store Images</label>
                                        <input type="file" class="form-control" id="store_images" name="store_images[]" multiple accept="image/*">
                                        <small class="text-muted">Max size: 5MB each. Multiple images allowed</small>
                                    </div>
                                    <div class="col-12">
                                        <label for="documents" class="form-label">Business Documents</label>
                                        <input type="file" class="form-control" id="documents" name="documents[]" multiple accept=".pdf,.jpg,.jpeg,.png">
                                        <small class="text-muted">Upload licenses, permits, etc. Max 10MB each</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Payment & Financial -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="bi bi-credit-card"></i> Payment Methods</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-12">
                                        <label class="form-label">Payment Methods Accepted by Business</label>
                                        <div class="form-check-group">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="payment_methods[]" value="cash" id="pay_cash" checked>
                                                <label class="form-check-label" for="pay_cash">Cash</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="payment_methods[]" value="credit_card" id="pay_credit_card" checked>
                                                <label class="form-check-label" for="pay_credit_card">Credit Card</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="payment_methods[]" value="debit_card" id="pay_debit_card" checked>
                                                <label class="form-check-label" for="pay_debit_card">Debit Card</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="payment_methods[]" value="gcash" id="pay_gcash">
                                                <label class="form-check-label" for="pay_gcash">GCash</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="payment_methods[]" value="paymaya" id="pay_paymaya">
                                                <label class="form-check-label" for="pay_paymaya">PayMaya</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="payment_methods[]" value="bank_transfer" id="pay_bank_transfer">
                                                <label class="form-check-label" for="pay_bank_transfer">Bank Transfer</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="payment_methods[]" value="paypal" id="pay_paypal">
                                                <label class="form-check-label" for="pay_paypal">PayPal</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="payment_methods[]" value="installment" id="pay_installment">
                                                <label class="form-check-label" for="pay_installment">Installment Plans</label>
                                            </div>
                                        </div>
                                        <small class="text-muted">Select all payment methods this business will accept from customers</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('admin.malls.shops', $mall) }}" class="btn btn-secondary">
                                        <i class="bi bi-arrow-left"></i> Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="bi bi-check-circle"></i> Create Business
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.form-check-group {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
}

.form-check {
    margin-bottom: 0.5rem;
}

.card-header {
    border-bottom: 2px solid #e9ecef;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const bizspotCategories = @json($bizspotBusinessTypes);
    
    const businessTypeSelect = document.getElementById('bizspot_business_type_id');
    const mainCategorySelect = document.getElementById('bizspot_main_category_id');
    const subCategorySelect = document.getElementById('bizspot_sub_category_id');
    
    // When business type changes, load main categories
    businessTypeSelect.addEventListener('change', function() {
        const selectedTypeId = this.value;
        
        // Reset dependent dropdowns
        mainCategorySelect.innerHTML = '<option value="">Select Main Category</option>';
        subCategorySelect.innerHTML = '<option value="">Select Sub Category</option>';
        mainCategorySelect.disabled = !selectedTypeId;
        subCategorySelect.disabled = true;
        
        if (selectedTypeId) {
            const selectedType = bizspotCategories.find(type => type.id == selectedTypeId);
            
            if (selectedType && selectedType.main_categories) {
                selectedType.main_categories.forEach(category => {
                    const option = document.createElement('option');
                    option.value = category.id;
                    option.textContent = category.name;
                    mainCategorySelect.appendChild(option);
                });
            }
        }
    });
    
    // When main category changes, load sub categories
    mainCategorySelect.addEventListener('change', function() {
        const selectedMainCategoryId = this.value;
        const selectedTypeId = businessTypeSelect.value;
        
        // Reset sub category dropdown
        subCategorySelect.innerHTML = '<option value="">Select Sub Category</option>';
        subCategorySelect.disabled = !selectedMainCategoryId;
        
        if (selectedMainCategoryId && selectedTypeId) {
            const selectedType = bizspotCategories.find(type => type.id == selectedTypeId);
            const selectedMainCategory = selectedType.main_categories.find(cat => cat.id == selectedMainCategoryId);
            
            if (selectedMainCategory && selectedMainCategory.sub_categories) {
                selectedMainCategory.sub_categories.forEach(subCategory => {
                    const option = document.createElement('option');
                    option.value = subCategory.id;
                    option.textContent = subCategory.name;
                    subCategorySelect.appendChild(option);
                });
            }
        }
    });

    // Auto-populate business email when owner email is entered
    document.getElementById('owner_email').addEventListener('blur', function() {
        const businessEmail = document.getElementById('business_email');
        if (!businessEmail.value) {
            businessEmail.value = this.value;
        }
    });

    // Auto-populate business phone when owner phone is entered
    document.getElementById('owner_phone').addEventListener('blur', function() {
        const businessPhone = document.getElementById('business_phone');
        if (!businessPhone.value) {
            businessPhone.value = this.value;
        }
    });

    // Auto-suggest WhatsApp number same as business phone
    document.getElementById('business_phone').addEventListener('blur', function() {
        const whatsappNumber = document.getElementById('whatsapp_number');
        if (!whatsappNumber.value) {
            whatsappNumber.value = this.value;
        }
    });

    // Form validation
    document.getElementById('businessForm').addEventListener('submit', function(e) {
        const requiredFields = ['owner_name', 'owner_email', 'owner_phone', 'business_name', 'business_description', 'bizspot_business_type_id', 'bizspot_main_category_id', 'floor_number', 'unit_number', 'store_size_category', 'business_phone', 'business_email'];
        
        let isValid = true;
        requiredFields.forEach(function(fieldName) {
            const field = document.getElementById(fieldName);
            if (!field.value.trim()) {
                field.classList.add('is-invalid');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
            }
        });

        if (!isValid) {
            e.preventDefault();
            alert('Please fill in all required fields.');
        }
    });
});
</script>
@endsection