@extends('layouts.admin')

@section('title', 'Create New Vendor')

@section('content')
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div class="d-flex align-items-center">
        <a href="{{ route('admin.vendors.index') }}" class="btn btn-outline-secondary btn-sm me-3">
            <i class="bi bi-arrow-left me-1"></i>
            Back to Vendors
        </a>
        <div>
            <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Create New Vendor</h1>
            <p class="text-muted mb-0">Add a new independent vendor to the platform</p>
        </div>
    </div>
</div>

<!-- Create Form -->
<form action="{{ route('admin.vendors.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    
    <div class="row g-4">
        <!-- Basic Information -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">Basic Information</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="vendor_name" class="form-label fw-medium">Vendor Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('vendor_name') is-invalid @enderror" 
                                   id="vendor_name" name="vendor_name" value="{{ old('vendor_name') }}" required>
                            @error('vendor_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="vendor_type" class="form-label fw-medium">Vendor Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('vendor_type') is-invalid @enderror" id="vendor_type" name="vendor_type" required>
                                <option value="">Select vendor type</option>
                                @foreach($vendorTypes as $key => $value)
                                    <option value="{{ $key }}" {{ old('vendor_type') === $key ? 'selected' : '' }}>{{ $value }}</option>
                                @endforeach
                            </select>
                            @error('vendor_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-12">
                            <label for="vendor_description" class="form-label fw-medium">Description</label>
                            <textarea class="form-control @error('vendor_description') is-invalid @enderror" 
                                      id="vendor_description" name="vendor_description" rows="3" 
                                      placeholder="Brief description of the vendor's business">{{ old('vendor_description') }}</textarea>
                            @error('vendor_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Contact Information -->
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">Contact Information</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="vendor_email" class="form-label fw-medium">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('vendor_email') is-invalid @enderror" 
                                   id="vendor_email" name="vendor_email" value="{{ old('vendor_email') }}" required>
                            @error('vendor_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="vendor_phone" class="form-label fw-medium">Phone <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('vendor_phone') is-invalid @enderror" 
                                   id="vendor_phone" name="vendor_phone" value="{{ old('vendor_phone') }}" required>
                            @error('vendor_phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="website" class="form-label fw-medium">Website</label>
                            <input type="url" class="form-control @error('website') is-invalid @enderror" 
                                   id="website" name="website" value="{{ old('website') }}" placeholder="https://example.com">
                            @error('website')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="user_id" class="form-label fw-medium">Owner User Account <span class="text-danger">*</span></label>
                            <select class="form-select @error('user_id') is-invalid @enderror" id="user_id" name="user_id" required>
                                <option value="">Select user account</option>
                                <!-- You can populate this with actual users -->
                                <option value="1" {{ old('user_id') == '1' ? 'selected' : '' }}>Admin User (ID: 1)</option>
                            </select>
                            @error('user_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-12">
                            <label for="vendor_address" class="form-label fw-medium">Address <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('vendor_address') is-invalid @enderror" 
                                      id="vendor_address" name="vendor_address" rows="2" required>{{ old('vendor_address') }}</textarea>
                            @error('vendor_address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="latitude" class="form-label fw-medium">Latitude</label>
                            <input type="number" step="any" class="form-control @error('latitude') is-invalid @enderror" 
                                   id="latitude" name="latitude" value="{{ old('latitude') }}" placeholder="25.2048">
                            @error('latitude')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="longitude" class="form-label fw-medium">Longitude</label>
                            <input type="number" step="any" class="form-control @error('longitude') is-invalid @enderror" 
                                   id="longitude" name="longitude" value="{{ old('longitude') }}" placeholder="55.2708">
                            @error('longitude')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Business Details -->
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">Business Details</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="business_license_number" class="form-label fw-medium">Business License Number</label>
                            <input type="text" class="form-control @error('business_license_number') is-invalid @enderror" 
                                   id="business_license_number" name="business_license_number" value="{{ old('business_license_number') }}">
                            @error('business_license_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="tax_id_number" class="form-label fw-medium">Tax ID Number</label>
                            <input type="text" class="form-control @error('tax_id_number') is-invalid @enderror" 
                                   id="tax_id_number" name="tax_id_number" value="{{ old('tax_id_number') }}">
                            @error('tax_id_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="years_in_business" class="form-label fw-medium">Years in Business</label>
                            <input type="number" class="form-control @error('years_in_business') is-invalid @enderror" 
                                   id="years_in_business" name="years_in_business" value="{{ old('years_in_business') }}" min="0" max="100">
                            @error('years_in_business')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="employee_count" class="form-label fw-medium">Employee Count</label>
                            <input type="number" class="form-control @error('employee_count') is-invalid @enderror" 
                                   id="employee_count" name="employee_count" value="{{ old('employee_count', 1) }}" min="1" max="10000">
                            @error('employee_count')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="health_permit_number" class="form-label fw-medium">Health Permit Number</label>
                            <input type="text" class="form-control @error('health_permit_number') is-invalid @enderror" 
                                   id="health_permit_number" name="health_permit_number" value="{{ old('health_permit_number') }}">
                            @error('health_permit_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="health_permit_expiry" class="form-label fw-medium">Health Permit Expiry</label>
                            <input type="date" class="form-control @error('health_permit_expiry') is-invalid @enderror" 
                                   id="health_permit_expiry" name="health_permit_expiry" value="{{ old('health_permit_expiry') }}">
                            @error('health_permit_expiry')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Operating Information -->
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">Operating Information</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="has_delivery" name="has_delivery" value="1" {{ old('has_delivery') ? 'checked' : '' }}>
                                <label class="form-check-label fw-medium" for="has_delivery">
                                    Offers Delivery
                                </label>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="has_pickup" name="has_pickup" value="1" {{ old('has_pickup', true) ? 'checked' : '' }}>
                                <label class="form-check-label fw-medium" for="has_pickup">
                                    Offers Pickup
                                </label>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="delivery_radius_km" class="form-label fw-medium">Delivery Radius (km)</label>
                            <input type="number" step="0.1" class="form-control @error('delivery_radius_km') is-invalid @enderror" 
                                   id="delivery_radius_km" name="delivery_radius_km" value="{{ old('delivery_radius_km') }}" min="0" max="100">
                            @error('delivery_radius_km')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="delivery_fee" class="form-label fw-medium">Delivery Fee</label>
                            <input type="number" step="0.01" class="form-control @error('delivery_fee') is-invalid @enderror" 
                                   id="delivery_fee" name="delivery_fee" value="{{ old('delivery_fee') }}" min="0">
                            @error('delivery_fee')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="minimum_order_amount" class="form-label fw-medium">Minimum Order Amount</label>
                            <input type="number" step="0.01" class="form-control @error('minimum_order_amount') is-invalid @enderror" 
                                   id="minimum_order_amount" name="minimum_order_amount" value="{{ old('minimum_order_amount') }}" min="0">
                            @error('minimum_order_amount')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-12">
                            <label for="special_instructions" class="form-label fw-medium">Special Instructions</label>
                            <textarea class="form-control @error('special_instructions') is-invalid @enderror" 
                                      id="special_instructions" name="special_instructions" rows="3" 
                                      placeholder="Any special instructions or notes for customers">{{ old('special_instructions') }}</textarea>
                            @error('special_instructions')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Media Uploads -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">Media & Images</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="logo" class="form-label fw-medium">Logo</label>
                        <input type="file" class="form-control @error('logo') is-invalid @enderror" 
                               id="logo" name="logo" accept="image/*">
                        <small class="text-muted">Max size: 2MB. Formats: JPEG, PNG, JPG, GIF</small>
                        @error('logo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="cover_image" class="form-label fw-medium">Cover Image</label>
                        <input type="file" class="form-control @error('cover_image') is-invalid @enderror" 
                               id="cover_image" name="cover_image" accept="image/*">
                        <small class="text-muted">Max size: 5MB. Formats: JPEG, PNG, JPG, GIF</small>
                        @error('cover_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
            
            <!-- Bizspot Categories -->
            @if($businessTypes->count() > 0)
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">Bizspot Categories</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="bizspot_business_type_id" class="form-label fw-medium">Business Type</label>
                        <select class="form-select @error('bizspot_business_type_id') is-invalid @enderror" 
                                id="bizspot_business_type_id" name="bizspot_business_type_id">
                            <option value="">Select business type</option>
                            @foreach($businessTypes as $type)
                                <option value="{{ $type->id }}" {{ old('bizspot_business_type_id') == $type->id ? 'selected' : '' }}>
                                    {{ $type->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('bizspot_business_type_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="bizspot_main_category_id" class="form-label fw-medium">Main Category</label>
                        <select class="form-select @error('bizspot_main_category_id') is-invalid @enderror" 
                                id="bizspot_main_category_id" name="bizspot_main_category_id">
                            <option value="">Select main category</option>
                        </select>
                        @error('bizspot_main_category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="bizspot_sub_category_id" class="form-label fw-medium">Sub Category</label>
                        <select class="form-select @error('bizspot_sub_category_id') is-invalid @enderror" 
                                id="bizspot_sub_category_id" name="bizspot_sub_category_id">
                            <option value="">Select sub category</option>
                        </select>
                        @error('bizspot_sub_category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
            @endif
            
            <!-- Action Buttons -->
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-plus-lg me-1"></i>
                            Create Vendor
                        </button>
                        <a href="{{ route('admin.vendors.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-1"></i>
                            Cancel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
// Dynamic category loading (if needed)
document.addEventListener('DOMContentLoaded', function() {
    const businessTypeSelect = document.getElementById('bizspot_business_type_id');
    const mainCategorySelect = document.getElementById('bizspot_main_category_id');
    const subCategorySelect = document.getElementById('bizspot_sub_category_id');
    
    if (businessTypeSelect) {
        businessTypeSelect.addEventListener('change', function() {
            // You can implement AJAX loading of categories here if needed
            console.log('Business type changed:', this.value);
        });
    }
});
</script>

@endsection