@extends('layouts.admin')

@section('title', 'Create Shop')

@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">Create New Shop</h1>
        <p class="text-muted mb-0">Add a new shop to the platform</p>
    </div>
    <div>
        <a href="{{ route('admin.shops.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>
            Back to List
        </a>
    </div>
</div>

<!-- Create Shop 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">Basic Shop Information</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.shops.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-3">
                        <!-- Shop Name -->
                        <div class="col-md-6">
                            <label for="name" class="form-label">Shop 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') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Category -->
                        <div class="col-md-6">
                            <label for="category_id" class="form-label">Category <span class="text-danger">*</span></label>
                            <select class="form-select @error('category_id') is-invalid @enderror" 
                                    id="category_id" name="category_id" required>
                                <option value="">Select Category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Shop Type -->
                        <div class="col-md-6">
                            <label for="shop_type" class="form-label">Shop Type</label>
                            <select class="form-select" id="shop_type" name="shop_type">
                                <option value="retail" {{ old('shop_type', 'retail') == 'retail' ? 'selected' : '' }}>Retail</option>
                                <option value="service" {{ old('shop_type') == 'service' ? 'selected' : '' }}>Service</option>
                                <option value="restaurant" {{ old('shop_type') == 'restaurant' ? 'selected' : '' }}>Restaurant</option>
                                <option value="cafe" {{ old('shop_type') == 'cafe' ? 'selected' : '' }}>Cafe</option>
                                <option value="beauty_salon" {{ old('shop_type') == 'beauty_salon' ? 'selected' : '' }}>Beauty Salon</option>
                                <option value="barber_shop" {{ old('shop_type') == 'barber_shop' ? 'selected' : '' }}>Barber Shop</option>
                                <option value="pharmacy" {{ old('shop_type') == 'pharmacy' ? 'selected' : '' }}>Pharmacy</option>
                                <option value="electronics" {{ old('shop_type') == 'electronics' ? 'selected' : '' }}>Electronics</option>
                                <option value="clothing" {{ old('shop_type') == 'clothing' ? 'selected' : '' }}>Clothing</option>
                                <option value="jewelry" {{ old('shop_type') == 'jewelry' ? 'selected' : '' }}>Jewelry</option>
                                <option value="books" {{ old('shop_type') == 'books' ? 'selected' : '' }}>Books</option>
                                <option value="sports" {{ old('shop_type') == 'sports' ? 'selected' : '' }}>Sports</option>
                                <option value="automotive" {{ old('shop_type') == 'automotive' ? 'selected' : '' }}>Automotive</option>
                                <option value="other" {{ old('shop_type') == 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>

                        <!-- Business Model -->
                        <div class="col-md-6">
                            <label for="business_model" class="form-label">Business Model</label>
                            <select class="form-select" id="business_model" name="business_model">
                                <option value="product_only" {{ old('business_model', 'product_only') == 'product_only' ? 'selected' : '' }}>Product Only</option>
                                <option value="service_only" {{ old('business_model') == 'service_only' ? 'selected' : '' }}>Service Only</option>
                                <option value="hybrid" {{ old('business_model') == 'hybrid' ? 'selected' : '' }}>Hybrid (Products + Services)</option>
                            </select>
                        </div>

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

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

                        <!-- Phone -->
                        <div class="col-md-6">
                            <label for="phone" class="form-label">Phone <span class="text-danger">*</span></label>
                            <input type="tel" class="form-control @error('phone') is-invalid @enderror" 
                                   id="phone" name="phone" value="{{ old('phone') }}" required>
                            @error('phone')
                                <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') }}" placeholder="https://example.com">
                            @error('website')
                                <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') }}</textarea>
                            @error('address')
                                <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="3" required>{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Operating Information -->
                    <h6 class="fw-bold mb-3">Operating Information</h6>
                    <div class="row g-3">
                        <!-- Operating Hours -->
                        <div class="col-md-6">
                            <label for="opening_time" class="form-label">Opening Time</label>
                            <input type="time" class="form-control" id="opening_time" name="opening_time" value="{{ old('opening_time') }}">
                        </div>

                        <div class="col-md-6">
                            <label for="closing_time" class="form-label">Closing Time</label>
                            <input type="time" class="form-control" id="closing_time" name="closing_time" value="{{ old('closing_time') }}">
                        </div>

                        <!-- Operating Days -->
                        <div class="col-12">
                            <label class="form-label">Operating Days</label>
                            <div class="row">
                                @php
                                    $days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
                                    $oldDays = old('operating_days', []);
                                @endphp
                                @foreach($days as $day)
                                    <div class="col-md-3 col-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="{{ $day }}" name="operating_days[]" value="{{ $day }}"
                                                   {{ in_array($day, $oldDays) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="{{ $day }}">
                                                {{ ucfirst($day) }}
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Shop Features -->
                        <div class="col-12">
                            <label class="form-label">Shop Features</label>
                            <div class="row">
                                <div class="col-md-3 col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="appointment_required" name="appointment_required" value="1"
                                               {{ old('appointment_required') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="appointment_required">
                                            Requires Appointments
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="walk_ins_accepted" name="walk_ins_accepted" value="1"
                                               {{ old('walk_ins_accepted', '1') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="walk_ins_accepted">
                                            Accepts Walk-ins
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="online_ordering" name="online_ordering" value="1"
                                               {{ old('online_ordering') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="online_ordering">
                                            Online Ordering
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="delivery_available" name="delivery_available" value="1"
                                               {{ old('delivery_available') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="delivery_available">
                                            Delivery Available
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="pickup_available" name="pickup_available" value="1"
                                               {{ old('pickup_available', '1') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="pickup_available">
                                            Pickup Available
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="loyalty_program" name="loyalty_program" value="1"
                                               {{ old('loyalty_program') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="loyalty_program">
                                            Loyalty Program
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Shop Details -->
                    <h6 class="fw-bold mb-3">Shop Details</h6>
                    <div class="row g-3">
                        <!-- Shop Area -->
                        <div class="col-md-6">
                            <label for="shop_area_sqft" class="form-label">Shop Area (sq ft)</label>
                            <input type="number" class="form-control" id="shop_area_sqft" 
                                   name="shop_area_sqft" value="{{ old('shop_area_sqft') }}" min="0" step="0.01">
                        </div>

                        <!-- Staff Count -->
                        <div class="col-md-6">
                            <label for="staff_count" class="form-label">Number of Staff</label>
                            <input type="number" class="form-control" id="staff_count" 
                                   name="staff_count" value="{{ old('staff_count') }}" min="0">
                        </div>

                        <!-- Specializations -->
                        <div class="col-12">
                            <label for="specializations" class="form-label">Specializations</label>
                            <textarea class="form-control" id="specializations" name="specializations" 
                                      rows="2" placeholder="What does this shop specialize in?">{{ old('specializations') }}</textarea>
                        </div>

                        <!-- Shop Description -->
                        <div class="col-12">
                            <label for="shop_description" class="form-label">Additional Shop Information</label>
                            <textarea class="form-control" id="shop_description" name="shop_description" 
                                      rows="3" placeholder="Additional details about the shop">{{ old('shop_description') }}</textarea>
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Manager Information -->
                    <h6 class="fw-bold mb-3">Shop Manager Information (Optional)</h6>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="shop_manager_name" class="form-label">Manager Name</label>
                            <input type="text" class="form-control" id="shop_manager_name" 
                                   name="shop_manager_name" value="{{ old('shop_manager_name') }}">
                        </div>

                        <div class="col-md-4">
                            <label for="shop_manager_phone" class="form-label">Manager Phone</label>
                            <input type="tel" class="form-control" id="shop_manager_phone" 
                                   name="shop_manager_phone" value="{{ old('shop_manager_phone') }}">
                        </div>

                        <div class="col-md-4">
                            <label for="shop_manager_email" class="form-label">Manager Email</label>
                            <input type="email" class="form-control" id="shop_manager_email" 
                                   name="shop_manager_email" value="{{ old('shop_manager_email') }}">
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Payment Methods -->
                    <h6 class="fw-bold mb-3">Accepted Payment Methods</h6>
                    <div class="row">
                        @php
                            $paymentMethods = ['cash', 'card', 'mobile_money', 'bank_transfer', 'online'];
                            $oldPayments = old('payment_methods', []);
                        @endphp
                        @foreach($paymentMethods as $method)
                            <div class="col-md-3 col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="{{ $method }}" name="payment_methods[]" value="{{ $method }}"
                                           {{ in_array($method, $oldPayments) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="{{ $method }}">
                                        {{ ucfirst(str_replace('_', ' ', $method)) }}
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('admin.shops.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-circle me-1"></i>
                            Cancel
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle me-1"></i>
                            Create Shop
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <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">Shop Guidelines</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <h6 class="alert-heading"><i class="bi bi-info-circle me-2"></i>Getting Started</h6>
                    <p class="mb-0">After creating your shop, you can:</p>
                    <ul class="mb-0 mt-2">
                        <li>Add products to your inventory</li>
                        <li>Set up services and appointments</li>
                        <li>Manage customer bookings</li>
                        <li>Track sales and analytics</li>
                    </ul>
                </div>

                <div class="alert alert-warning">
                    <h6 class="alert-heading"><i class="bi bi-exclamation-triangle me-2"></i>Important Notes</h6>
                    <ul class="mb-0">
                        <li>Choose the correct business model (Product/Service/Hybrid)</li>
                        <li>Set accurate operating hours for customer convenience</li>
                        <li>Provide complete contact information</li>
                        <li>Select appropriate payment methods</li>
                    </ul>
                </div>

                <div class="alert alert-success">
                    <h6 class="alert-heading"><i class="bi bi-check-circle me-2"></i>Pro Tips</h6>
                    <ul class="mb-0">
                        <li>Enable online ordering to increase sales</li>
                        <li>Set up a loyalty program to retain customers</li>
                        <li>Keep your shop information updated</li>
                        <li>Use detailed descriptions and specializations</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Business model change handler
    const businessModelSelect = document.getElementById('business_model');
    const appointmentCheckbox = document.getElementById('appointment_required');
    
    function toggleAppointmentBasedOnModel() {
        const model = businessModelSelect.value;
        if (model === 'service_only' || model === 'hybrid') {
            appointmentCheckbox.closest('.form-check').style.display = 'block';
        } else {
            appointmentCheckbox.checked = false;
            appointmentCheckbox.closest('.form-check').style.display = 'none';
        }
    }
    
    businessModelSelect.addEventListener('change', toggleAppointmentBasedOnModel);
    toggleAppointmentBasedOnModel(); // Run on page load
    
    // Auto-populate manager email if not set
    const userSelect = document.getElementById('user_id');
    const managerEmailInput = document.getElementById('shop_manager_email');
    
    userSelect.addEventListener('change', function() {
        if (!managerEmailInput.value && this.selectedOptions[0]) {
            const emailMatch = this.selectedOptions[0].text.match(/\(([^)]+)\)/);
            if (emailMatch) {
                managerEmailInput.value = emailMatch[1];
            }
        }
    });
});
</script>
@endsection