@extends('layouts.admin')

@section('title', $category->name . ' Services - ' . $vendor->vendor_name)

@section('content')
<div class="container-fluid px-4">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="{{ $category->icon ?? 'bi bi-tools' }} me-2"></i>{{ $category->name }} Services
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.vendors.index') }}">Vendors</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.vendors.show', $vendor) }}">{{ $vendor->vendor_name }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('vendors.services.index', $vendor) }}">Services</a></li>
                    <li class="breadcrumb-item active">{{ $category->name }}</li>
                </ol>
            </nav>
        </div>
        <div>
            <a href="{{ route('vendors.services.index', $vendor) }}" class="btn btn-outline-primary me-2">
                <i class="bi bi-arrow-left me-1"></i>Back to Services
            </a>
            <a href="{{ route('vendors.services.services.create', ['vendor' => $vendor, 'categoryId' => $category->id]) }}" class="btn btn-primary">
                <i class="bi bi-plus me-1"></i>Add Service
            </a>
        </div>
    </div>

    <!-- Category Info & Statistics -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-1">
                            <i class="{{ $category->icon ?? 'bi bi-tools' }} text-primary" style="font-size: 3rem;"></i>
                        </div>
                        <div class="col-md-5">
                            <h5 class="mb-1">{{ $category->name }}</h5>
                            <p class="text-muted mb-0">{{ $category->description }}</p>
                        </div>
                        <div class="col-md-6">
                            <div class="row text-center">
                                <div class="col-3">
                                    <div class="h4 mb-0 text-primary">{{ $categoryStats['total_services'] }}</div>
                                    <small class="text-muted">Total</small>
                                </div>
                                <div class="col-3">
                                    <div class="h4 mb-0 text-success">{{ $categoryStats['available_services'] }}</div>
                                    <small class="text-muted">Available</small>
                                </div>
                                <div class="col-3">
                                    <div class="h4 mb-0 text-warning">{{ $categoryStats['featured_services'] }}</div>
                                    <small class="text-muted">Featured</small>
                                </div>
                                <div class="col-3">
                                    <div class="h4 mb-0 text-info">AED {{ number_format($categoryStats['avg_price'] ?? 0) }}</div>
                                    <small class="text-muted">Avg Price</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters and Actions -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" placeholder="Search services..." id="serviceSearch">
                    </div>
                </div>
                <div class="col-md-3">
                    <select class="form-select" id="serviceFilter">
                        <option value="">All Services</option>
                        <option value="available">Available Only</option>
                        <option value="featured">Featured Only</option>
                        <option value="mobile">Mobile Services</option>
                        <option value="unavailable">Unavailable</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <div class="d-flex gap-2">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            Bulk Actions
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" onclick="bulkAction('activate')">Activate Selected</a></li>
                            <li><a class="dropdown-item" href="#" onclick="bulkAction('deactivate')">Deactivate Selected</a></li>
                            <li><a class="dropdown-item" href="#" onclick="bulkAction('feature')">Feature Selected</a></li>
                            <li><a class="dropdown-item" href="#" onclick="bulkAction('unfeature')">Unfeature Selected</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#" onclick="bulkAction('delete')">Delete Selected</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Services List -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 pt-4 pb-3">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0 fw-bold">Services ({{ $services->total() }})</h5>
                <div class="d-flex align-items-center gap-2">
                    <input type="checkbox" id="selectAll" class="form-check-input">
                    <label for="selectAll" class="form-check-label small">Select All</label>
                </div>
            </div>
        </div>
        <div class="card-body">
            @if($services->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th width="50"><input type="checkbox" id="selectAllTable" class="form-check-input"></th>
                                <th>Service</th>
                                <th>Category</th>
                                <th>Price & Type</th>
                                <th>Duration</th>
                                <th>Location</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($services as $service)
                                <tr class="service-row" data-service-id="{{ $service->id }}">
                                    <td>
                                        <input type="checkbox" class="form-check-input service-checkbox" value="{{ $service->id }}">
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            @if($service->featured_image)
                                                <img src="{{ asset('storage/' . $service->featured_image) }}" 
                                                     alt="{{ $service->name }}" 
                                                     class="rounded me-3" 
                                                     style="width: 60px; height: 60px; object-fit: cover;">
                                            @else
                                                <div class="bg-light rounded me-3 d-flex align-items-center justify-content-center" 
                                                     style="width: 60px; height: 60px;">
                                                    <i class="bi bi-tools text-muted"></i>
                                                </div>
                                            @endif
                                            <div>
                                                <h6 class="mb-1">{{ $service->name }}</h6>
                                                <p class="text-muted small mb-0">{{ Str::limit($service->short_description, 60) }}</p>
                                                <div class="d-flex gap-1 mt-1">
                                                    @if($service->is_featured)
                                                        <span class="badge bg-warning text-dark">Featured</span>
                                                    @endif
                                                    @if($service->mobile_service)
                                                        <span class="badge bg-info">Mobile</span>
                                                    @endif
                                                    @if($service->certified_service)
                                                        <span class="badge bg-success">Certified</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <div class="fw-bold small">{{ $service->bizspotMainCategory->name }}</div>
                                            @if($service->bizspotSubCategory)
                                                <div class="text-muted small">{{ $service->bizspotSubCategory->name }}</div>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            @if($service->pricing_type === 'fixed')
                                                <div class="fw-bold">AED {{ number_format($service->base_price, 2) }}</div>
                                                <small class="text-muted">Fixed Price</small>
                                            @elseif($service->pricing_type === 'hourly')
                                                <div class="fw-bold">AED {{ number_format($service->hourly_rate, 2) }}/hr</div>
                                                <small class="text-muted">Hourly Rate</small>
                                            @elseif($service->pricing_type === 'per_session')
                                                <div class="fw-bold">AED {{ number_format($service->base_price, 2) }}</div>
                                                <small class="text-muted">Per Session</small>
                                            @elseif($service->pricing_type === 'package')
                                                <div class="fw-bold">AED {{ number_format($service->package_price, 2) }}</div>
                                                <small class="text-muted">{{ $service->package_sessions }} Sessions</small>
                                            @else
                                                <div class="fw-bold text-info">Quote Based</div>
                                                <small class="text-muted">Contact for Price</small>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        @if($service->duration_minutes > 0)
                                            {{ $service->getFormattedDuration() }}
                                        @else
                                            <span class="text-muted">Variable</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div>
                                            @php
                                                $locationLabels = [
                                                    'vendor_location' => 'Vendor Location',
                                                    'customer_location' => 'Customer Location',
                                                    'both' => 'Both Locations',
                                                    'online_remote' => 'Online/Remote'
                                                ];
                                            @endphp
                                            <small>{{ $locationLabels[$service->service_location] ?? $service->service_location }}</small>
                                            @if($service->mobile_service && $service->travel_fee > 0)
                                                <div class="text-muted small">+AED {{ number_format($service->travel_fee) }} travel</div>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex flex-column gap-1">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" 
                                                       {{ $service->is_available ? 'checked' : '' }}
                                                       onchange="toggleAvailability({{ $service->id }}, this)">
                                                <label class="form-check-label small">
                                                    {{ $service->is_available ? 'Available' : 'Unavailable' }}
                                                </label>
                                            </div>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" 
                                                       {{ $service->is_featured ? 'checked' : '' }}
                                                       onchange="toggleFeatured({{ $service->id }}, this)">
                                                <label class="form-check-label small">Featured</label>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('vendors.services.services.edit', ['vendor' => $vendor, 'service' => $service]) }}" 
                                               class="btn btn-sm btn-outline-primary" title="Edit Service">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a href="{{ route('vendors.services.variants', ['vendor' => $vendor, 'service' => $service]) }}" 
                                               class="btn btn-sm btn-outline-info" title="Manage Variants">
                                                <i class="bi bi-list-ul"></i>
                                                <span class="badge bg-secondary">{{ $service->variants->count() }}</span>
                                            </a>
                                            <button class="btn btn-sm btn-outline-danger" 
                                                    onclick="deleteService({{ $service->id }}, '{{ $service->name }}')" 
                                                    title="Delete Service">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-4">
                    <div class="text-muted small">
                        Showing {{ $services->firstItem() }} to {{ $services->lastItem() }} of {{ $services->total() }} services
                    </div>
                    {{ $services->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-tools text-muted" style="font-size: 4rem;"></i>
                    <h5 class="mt-3 text-muted">No Services Found</h5>
                    <p class="text-muted">Start by creating your first service in this category.</p>
                    <a href="{{ route('vendors.services.services.create', ['vendor' => $vendor, 'categoryId' => $category->id]) }}" 
                       class="btn btn-primary">
                        <i class="bi bi-plus me-1"></i>Create Service
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

@section('scripts')
<script>
// Service search functionality
document.getElementById('serviceSearch').addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    const rows = document.querySelectorAll('.service-row');
    
    rows.forEach(row => {
        const serviceName = row.querySelector('h6').textContent.toLowerCase();
        const serviceDesc = row.querySelector('.text-muted').textContent.toLowerCase();
        
        if (serviceName.includes(searchTerm) || serviceDesc.includes(searchTerm)) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
});

// Service filtering
document.getElementById('serviceFilter').addEventListener('change', function() {
    const filter = this.value;
    const rows = document.querySelectorAll('.service-row');
    
    rows.forEach(row => {
        const badges = row.querySelectorAll('.badge');
        const switches = row.querySelectorAll('.form-check-input');
        
        let shouldShow = true;
        
        switch(filter) {
            case 'available':
                shouldShow = switches[0] && switches[0].checked;
                break;
            case 'featured':
                shouldShow = switches[1] && switches[1].checked;
                break;
            case 'mobile':
                shouldShow = Array.from(badges).some(badge => badge.textContent.includes('Mobile'));
                break;
            case 'unavailable':
                shouldShow = switches[0] && !switches[0].checked;
                break;
            default:
                shouldShow = true;
        }
        
        row.style.display = shouldShow ? '' : 'none';
    });
});

// Select all functionality
document.getElementById('selectAll').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.service-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

document.getElementById('selectAllTable').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.service-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
    document.getElementById('selectAll').checked = this.checked;
});

// Toggle availability
function toggleAvailability(serviceId, checkbox) {
    fetch(`/admin/vendors/{{ $vendor->id }}/services/services/${serviceId}/toggle-availability`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const label = checkbox.nextElementSibling;
            label.textContent = data.is_available ? 'Available' : 'Unavailable';
            
            // Show toast or notification
            showNotification(data.message, 'success');
        } else {
            checkbox.checked = !checkbox.checked; // Revert on error
            showNotification(data.message || 'Error updating availability', 'error');
        }
    })
    .catch(error => {
        checkbox.checked = !checkbox.checked; // Revert on error
        showNotification('Error updating availability', 'error');
    });
}

// Toggle featured status
function toggleFeatured(serviceId, checkbox) {
    fetch(`/admin/vendors/{{ $vendor->id }}/services/services/${serviceId}/toggle-featured`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification(data.message, 'success');
        } else {
            checkbox.checked = !checkbox.checked; // Revert on error
            showNotification(data.message || 'Error updating featured status', 'error');
        }
    })
    .catch(error => {
        checkbox.checked = !checkbox.checked; // Revert on error
        showNotification('Error updating featured status', 'error');
    });
}

// Delete service
function deleteService(serviceId, serviceName) {
    if (confirm(`Are you sure you want to delete "${serviceName}"? This action cannot be undone.`)) {
        fetch(`/admin/vendors/{{ $vendor->id }}/services/services/${serviceId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Remove the row from table
                document.querySelector(`[data-service-id="${serviceId}"]`).remove();
                showNotification(data.message, 'success');
            } else {
                showNotification(data.message || 'Error deleting service', 'error');
            }
        })
        .catch(error => {
            showNotification('Error deleting service', 'error');
        });
    }
}

// Bulk actions
function bulkAction(action) {
    const selectedIds = Array.from(document.querySelectorAll('.service-checkbox:checked'))
                           .map(cb => cb.value);
    
    if (selectedIds.length === 0) {
        alert('Please select at least one service');
        return;
    }
    
    const actionNames = {
        'activate': 'activate',
        'deactivate': 'deactivate', 
        'feature': 'feature',
        'unfeature': 'unfeature',
        'delete': 'delete'
    };
    
    if (action === 'delete' && !confirm(`Are you sure you want to delete ${selectedIds.length} selected services? This action cannot be undone.`)) {
        return;
    }
    
    fetch(`/admin/vendors/{{ $vendor->id }}/services/bulk-action`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            action: action,
            service_ids: selectedIds
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification(data.message, 'success');
            // Reload page to reflect changes
            setTimeout(() => window.location.reload(), 1000);
        } else {
            showNotification(data.message || 'Error performing bulk action', 'error');
        }
    })
    .catch(error => {
        showNotification('Error performing bulk action', 'error');
    });
}

// Notification function
function showNotification(message, type) {
    // Create a simple notification (you can enhance this)
    const notification = document.createElement('div');
    notification.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show position-fixed`;
    notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    notification.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(notification);
    
    // Auto remove after 3 seconds
    setTimeout(() => {
        if (notification.parentNode) {
            notification.parentNode.removeChild(notification);
        }
    }, 3000);
}
</script>
@endsection
@endsection