@extends('layouts.admin')

@section('title', 'Edit Business')

@section('content')
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Edit Business</h1>
        <p class="text-muted mb-0">Update business information</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.businesses.show', $business) }}" class="btn btn-outline-info">
            <i class="bi bi-eye me-1"></i>
            View Details
        </a>
        <a href="{{ route('admin.businesses.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>
            Back to List
        </a>
    </div>
</div>

<!-- Edit Business Form -->
<div class="row">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="card-title mb-0 fw-bold">Business Information</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.businesses.update', $business) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="row g-3">
                        <!-- Business Name -->
                        <div class="col-md-6">
                            <label for="name" class="form-label">Business Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="name" name="name" value="{{ old('name', $business->name) }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Business Type -->
                        <div class="col-md-6">
                            <label for="type" class="form-label">Business Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
                                <option value="">Select Business Type</option>
                                <option value="mall" {{ old('type', $business->type) == 'mall' ? 'selected' : '' }}>Mall</option>
                                <option value="market" {{ old('type', $business->type) == 'market' ? 'selected' : '' }}>Market</option>
                                <option value="supermarket" {{ old('type', $business->type) == 'supermarket' ? 'selected' : '' }}>Supermarket</option>
                                <option value="other" {{ old('type', $business->type) == 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div class="col-12">
                            <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="4" required>{{ old('description', $business->description) }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Address -->
                        <div class="col-12">
                            <label for="address" class="form-label">Address <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('address') is-invalid @enderror" 
                                      id="address" name="address" rows="2" required>{{ old('address', $business->address) }}</textarea>
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Phone and Email -->
                        <div class="col-md-6">
                            <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                            <input type="tel" class="form-control @error('phone') is-invalid @enderror" 
                                   id="phone" name="phone" value="{{ old('phone', $business->phone) }}" required>
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                   id="email" name="email" value="{{ old('email', $business->email) }}" required>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Website -->
                        <div class="col-md-6">
                            <label for="website" class="form-label">Website</label>
                            <input type="url" class="form-control @error('website') is-invalid @enderror" 
                                   id="website" name="website" value="{{ old('website', $business->website) }}" 
                                   placeholder="https://example.com">
                            @error('website')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Business Owner -->
                        <div class="col-md-6">
                            <label for="user_id" class="form-label">Business Owner <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 Owner</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ old('user_id', $business->user_id) == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }} ({{ $user->email }}) - {{ ucfirst($user->role) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('user_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Category -->
                        <div class="col-md-6">
                            <label for="category_id" class="form-label">Category</label>
                            <select class="form-select @error('category_id') is-invalid @enderror" id="category_id" name="category_id">
                                <option value="">Select Category</option>
                                <option value="general" {{ old('category_id') == 'general' ? 'selected' : '' }}>General</option>
                                <option value="retail" {{ old('category_id') == 'retail' ? 'selected' : '' }}>Retail</option>
                                <option value="service" {{ old('category_id') == 'service' ? 'selected' : '' }}>Service</option>
                                <option value="food" {{ old('category_id') == 'food' ? 'selected' : '' }}>Food & Beverage</option>
                                <option value="entertainment" {{ old('category_id') == 'entertainment' ? 'selected' : '' }}>Entertainment</option>
                            </select>
                            <div class="form-text">Category system is being updated. This is a temporary selection.</div>
                            @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Current Logo Display -->
                        @if($business->logo)
                        <div class="col-md-6">
                            <label class="form-label">Current Logo</label>
                            <div class="mb-2">
                                <img src="{{ Storage::url($business->logo) }}" 
                                     alt="{{ $business->name }} logo" 
                                     class="rounded" 
                                     style="width: 100px; height: 100px; object-fit: cover;">
                            </div>
                        </div>
                        @endif

                        <!-- Logo Upload -->
                        <div class="col-md-6">
                            <label for="logo" class="form-label">Business Logo</label>
                            <input type="file" class="form-control @error('logo') is-invalid @enderror" 
                                   id="logo" name="logo" accept="image/*">
                            <div class="form-text">
                                @if($business->logo)
                                    Leave empty to keep current logo. Upload new image to replace.
                                @else
                                    Supported formats: JPG, PNG, GIF. Max size: 2MB
                                @endif
                            </div>
                            @error('logo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Coordinates (Optional) -->
                        <div class="col-md-6">
                            <label for="latitude" class="form-label">Latitude</label>
                            <input type="number" step="any" class="form-control @error('latitude') is-invalid @enderror" 
                                   id="latitude" name="latitude" value="{{ old('latitude', $business->latitude) }}" 
                                   placeholder="e.g., 40.7128">
                            @error('latitude')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="longitude" class="form-label">Longitude</label>
                            <input type="number" step="any" class="form-control @error('longitude') is-invalid @enderror" 
                                   id="longitude" name="longitude" value="{{ old('longitude', $business->longitude) }}" 
                                   placeholder="e.g., -74.0060">
                            @error('longitude')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-lg me-1"></i>
                                    Update Business
                                </button>
                                <a href="{{ route('admin.businesses.show', $business) }}" class="btn btn-outline-info">
                                    <i class="bi bi-eye me-1"></i>
                                    View Details
                                </a>
                                <a href="{{ route('admin.businesses.index') }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-lg me-1"></i>
                                    Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Help Panel -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="card-title mb-0 fw-bold">
                    <i class="bi bi-info-circle me-2"></i>
                    Edit Guidelines
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <h6 class="fw-bold text-primary">Business Types</h6>
                    <ul class="list-unstyled small text-muted">
                        <li><strong>Mall:</strong> Shopping centers with multiple stores</li>
                        <li><strong>Market:</strong> Traditional markets with stalls</li>
                        <li><strong>Supermarket:</strong> Large retail stores</li>
                        <li><strong>Other:</strong> Any other business type</li>
                    </ul>
                </div>

                <div class="mb-3">
                    <h6 class="fw-bold text-primary">Logo Guidelines</h6>
                    <ul class="list-unstyled small text-muted">
                        <li>• Square format recommended</li>
                        <li>• High resolution (minimum 300x300px)</li>
                        <li>• Clear, professional image</li>
                        <li>• Maximum file size: 2MB</li>
                    </ul>
                </div>

                <div class="alert alert-warning">
                    <small>
                        <i class="bi bi-exclamation-triangle me-1"></i>
                        <strong>Warning:</strong> Changes will be immediately visible to users and business owners.
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Preview logo upload
    document.getElementById('logo').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                // Create preview if doesn't exist
                let preview = document.getElementById('logo-preview');
                if (!preview) {
                    preview = document.createElement('img');
                    preview.id = 'logo-preview';
                    preview.className = 'mt-2 rounded';
                    preview.style.maxWidth = '150px';
                    preview.style.maxHeight = '150px';
                    document.getElementById('logo').parentNode.appendChild(preview);
                }
                preview.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
</script>
@endsection