@extends('layouts.app')

@section('title', 'View Service Category')

@section('content')
<div class="container-fluid">
    <!-- Back Button -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{{ route('reseller.service-categories.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left mr-2"></i>Back to Service Categories
            </a>
        </div>
    </div>

    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-tags mr-2"></i>View Service Category
                    </h1>
                    <p class="text-muted">Detailed information about {{ $category->name }}</p>
                </div>
                <div>
                    <button class="btn btn-warning" data-toggle="modal" data-target="#editCategoryModal">
                        <i class="fas fa-edit mr-2"></i>Edit Category
                    </button>
                    <button class="btn btn-danger" onclick="deleteCategory({{ $category->id }})">
                        <i class="fas fa-trash mr-2"></i>Delete Category
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Category Details -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Category Information</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <div class="d-flex align-items-center">
                                <div class="mr-3">
                                    <div class="icon-circle bg-primary">
                                        <i class="fas fa-tags text-white"></i>
                                    </div>
                                </div>
                                <div>
                                    <h5 class="mb-1">{{ $category->name }}</h5>
                                    <span class="badge badge-{{ $category->status === 'active' ? 'success' : 'secondary' }}">
                                        {{ ucfirst($category->status) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="text-right">
                                <div class="text-muted small">Created</div>
                                <div class="font-weight-bold">{{ $category->created_at->format('M d, Y H:i') }}</div>
                                <div class="text-muted small mt-1">Last Updated</div>
                                <div class="font-weight-bold">{{ $category->updated_at->format('M d, Y H:i') }}</div>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label font-weight-bold text-primary">Category Code:</label>
                            <p class="mb-0">
                                @if($category->code)
                                    <span class="badge badge-info">{{ $category->code }}</span>
                                @else
                                    <span class="text-muted">Not provided</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label font-weight-bold text-primary">Status:</label>
                            <p class="mb-0">
                                <span class="badge badge-{{ $category->status === 'active' ? 'success' : 'secondary' }}">
                                    {{ ucfirst($category->status) }}
                                </span>
                            </p>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label font-weight-bold text-primary">Description:</label>
                            <p class="mb-0">
                                @if($category->description)
                                    {{ $category->description }}
                                @else
                                    <span class="text-muted">No description provided</span>
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-warning" data-toggle="modal" data-target="#editCategoryModal">
                            <i class="fas fa-edit mr-2"></i>Edit Category
                        </button>
                        <button class="btn btn-danger" onclick="deleteCategory({{ $category->id }})">
                            <i class="fas fa-trash mr-2"></i>Delete Category
                        </button>
                        <a href="{{ route('reseller.service-categories.index') }}" class="btn btn-secondary">
                            <i class="fas fa-list mr-2"></i>View All Categories
                        </a>
                    </div>
                </div>
            </div>

            <!-- Category Statistics -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Category Statistics</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="border-right">
                                <div class="h4 mb-0 text-primary">{{ $category->status === 'active' ? 'Active' : 'Inactive' }}</div>
                                <div class="text-muted small">Status</div>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="h4 mb-0 text-primary">{{ $category->created_at->diffInDays(now()) }}</div>
                            <div class="text-muted small">Days Active</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Service Category Information -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Service Category Information</h6>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <i class="fas fa-tags fa-3x text-primary mb-3"></i>
                        <h6 class="text-primary">Service Category</h6>
                        <p class="text-muted small mb-0">
                            This category represents a specific type of service (e.g., CDN, IX, Transit).
                        </p>
                    </div>
                </div>
            </div>

            <!-- Category Usage -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Category Usage</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 mb-2">
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">Services:</span>
                                <span class="font-weight-bold text-primary">0</span>
                            </div>
                        </div>
                        <div class="col-12 mb-2">
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">Providers:</span>
                                <span class="font-weight-bold text-primary">0</span>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">Items:</span>
                                <span class="font-weight-bold text-primary">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Category Modal -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Service Category</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('reseller.service-categories.update', $category->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Category Name *</label>
                            <input type="text" class="form-control" id="name" name="name" value="{{ $category->name }}" required
                                   placeholder="e.g., CDN, IX, Transit">
                            <div class="form-text">Enter a unique name for the service category</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="code" class="form-label">Code</label>
                            <input type="text" class="form-control" id="code" name="code" value="{{ $category->code }}" 
                                   placeholder="e.g., GGC, INT" maxlength="20">
                            <div class="form-text">Optional short code for the category</div>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="3"
                                      placeholder="Describe what this service category is used for...">{{ $category->description }}</textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="status" class="form-label">Status *</label>
                            <select class="form-control" id="status" name="status" required>
                                <option value="">Select Status</option>
                                <option value="active" {{ $category->status === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ $category->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">Update Category</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.icon-circle {
    height: 3rem;
    width: 3rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.border-right {
    border-right: 1px solid #e3e6f0 !important;
}
</style>

<script>
function deleteCategory(id) {
    if (confirm('Are you sure you want to delete this service category?')) {
        // Create a form and submit it
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("reseller.service-categories.destroy", ":id") }}'.replace(':id', id);
        
        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        // Add method override for DELETE
        const methodField = document.createElement('input');
        methodField.type = 'hidden';
        methodField.name = '_method';
        methodField.value = 'DELETE';
        form.appendChild(methodField);
        
        // Submit the form
        document.body.appendChild(form);
        form.submit();
    }
}
</script>

@endsection