@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Edit Category - {{ $category->name }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{{ route('product-categories.index', $website) }}" class="btn btn-sm btn-secondary">
            <i class="bi bi-arrow-left"></i> Back to Categories
        </a>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        @foreach($errors->all() as $error)
            <div>{{ $error }}</div>
        @endforeach
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<form action="{{ route('product-categories.update', [$website, $category]) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Basic Information</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">Category Name *</label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                               id="name" name="name" value="{{ old('name', $category->name) }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="slug" class="form-label">Slug *</label>
                        <input type="text" class="form-control @error('slug') is-invalid @enderror"
                               id="slug" name="slug" value="{{ old('slug', $category->slug) }}" required>
                        <div class="form-text">Used in the category URL</div>
                        @error('slug')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control @error('description') is-invalid @enderror"
                                  id="description" name="description" rows="4">{{ old('description', $category->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Category Image -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-image me-2"></i>Category Image</h5>
                </div>
                <div class="card-body">
                    @if($category->image)
                        <div class="mb-3">
                            <label class="form-label">Current Image</label>
                            <div class="d-flex align-items-center">
                                <img src="{{ $category->image }}" alt="{{ $category->name }}" 
                                     class="img-thumbnail me-3" style="max-width: 150px;">
                                <div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="remove_image" name="remove_image" value="1">
                                        <label class="form-check-label text-danger" for="remove_image">
                                            Remove current image
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    
                    <div class="mb-3">
                        <label for="image" class="form-label">{{ $category->image ? 'Replace Image' : 'Upload Image' }}</label>
                        <input type="file" class="form-control @error('image') is-invalid @enderror"
                               id="image" name="image" accept="image/*">
                        <div class="form-text">Optional. Recommended size: 300x300 pixels</div>
                        @error('image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Image preview -->
                    <div id="image-preview" class="d-none">
                        <img id="preview-img" src="" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                    </div>
                </div>
            </div>

            <!-- SEO Settings -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-search me-2"></i>SEO Settings</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="meta_title" class="form-label">Meta Title</label>
                        <input type="text" class="form-control @error('meta_title') is-invalid @enderror"
                               id="meta_title" name="meta_title" value="{{ old('meta_title', $category->meta_title) }}" maxlength="60">
                        <div class="form-text">Leave empty to use category name. Recommended: 50-60 characters</div>
                        @error('meta_title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="meta_description" class="form-label">Meta Description</label>
                        <textarea class="form-control @error('meta_description') is-invalid @enderror"
                                  id="meta_description" name="meta_description" rows="3" maxlength="160">{{ old('meta_description', $category->meta_description) }}</textarea>
                        <div class="form-text">Leave empty to auto-generate from description. Recommended: 150-160 characters</div>
                        @error('meta_description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="meta_keywords" class="form-label">Meta Keywords</label>
                        <input type="text" class="form-control @error('meta_keywords') is-invalid @enderror"
                               id="meta_keywords" name="meta_keywords" value="{{ old('meta_keywords', $category->meta_keywords) }}">
                        <div class="form-text">Comma-separated keywords (optional)</div>
                        @error('meta_keywords')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Category Settings -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-gear me-2"></i>Category Settings</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="parent_id" class="form-label">Parent Category</label>
                        <select class="form-select @error('parent_id') is-invalid @enderror" id="parent_id" name="parent_id">
                            <option value="">No Parent (Main Category)</option>
                            @foreach($parentCategories as $parent)
                                <option value="{{ $parent->id }}" 
                                        {{ old('parent_id', $category->parent_id) == $parent->id ? 'selected' : '' }}>
                                    {{ $parent->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('parent_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1"
                                   {{ old('is_active', $category->is_active) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                Category Active
                            </label>
                        </div>
                        <div class="form-text">Inactive categories won't be visible to customers</div>
                    </div>

                    <div class="mb-3">
                        <label for="sort_order" class="form-label">Sort Order</label>
                        <input type="number" min="0" class="form-control @error('sort_order') is-invalid @enderror"
                               id="sort_order" name="sort_order" value="{{ old('sort_order', $category->sort_order) }}">
                        <div class="form-text">Lower numbers appear first</div>
                        @error('sort_order')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Category Stats -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-bar-chart me-2"></i>Category Stats</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="mb-0">{{ $category->products->count() }}</h4>
                                <small class="text-muted">Direct Products</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="mb-0">{{ $category->allProducts()->count() }}</h4>
                            <small class="text-muted">Total Products</small>
                        </div>
                    </div>
                    
                    @if($category->children->count() > 0)
                        <hr>
                        <div class="text-center">
                            <h4 class="mb-0">{{ $category->children->count() }}</h4>
                            <small class="text-muted">Subcategories</small>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Actions -->
            <div class="card">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary w-100 mb-2">
                        <i class="bi bi-check-lg"></i> Update Category
                    </button>
                    
                    <a href="{{ route('product-categories.index', $website) }}" class="btn btn-outline-secondary w-100 mb-2">
                        <i class="bi bi-arrow-left"></i> Back to Categories
                    </a>
                    
                    @if($category->products()->count() === 0 && $category->children()->count() === 0)
                        <button type="button" class="btn btn-outline-danger w-100" onclick="confirmDelete()">
                            <i class="bi bi-trash"></i> Delete Category
                        </button>
                    @else
                        <button type="button" class="btn btn-outline-secondary w-100" disabled title="Cannot delete category with products or subcategories">
                            <i class="bi bi-trash"></i> Cannot Delete
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Delete Form -->
@if($category->products()->count() === 0 && $category->children()->count() === 0)
    <form id="delete-form" action="{{ route('product-categories.destroy', [$website, $category]) }}" method="POST" class="d-none">
        @csrf
        @method('DELETE')
    </form>
@endif
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Auto-generate slug from category name
    $('#name').on('input', function() {
        var name = $(this).val();
        var slug = name.toLowerCase()
            .replace(/[^a-z0-9 -]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .trim('-');
        $('#slug').val(slug);
    });

    // Image preview
    $('#image').on('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#preview-img').attr('src', e.target.result);
                $('#image-preview').removeClass('d-none');
            };
            reader.readAsDataURL(file);
        } else {
            $('#image-preview').addClass('d-none');
        }
    });

    // Character counters for SEO fields
    $('#meta_title').on('input', function() {
        const length = $(this).val().length;
        const color = length > 60 ? 'text-danger' : length > 50 ? 'text-warning' : 'text-muted';
        $(this).next('.form-text').html(`Leave empty to use category name. <span class="${color}">${length}/60 characters</span>`);
    });

    $('#meta_description').on('input', function() {
        const length = $(this).val().length;
        const color = length > 160 ? 'text-danger' : length > 150 ? 'text-warning' : 'text-muted';
        $(this).next('.form-text').html(`Leave empty to auto-generate from description. <span class="${color}">${length}/160 characters</span>`);
    });
});

function confirmDelete() {
    if (confirm('Are you sure you want to delete this category? This action cannot be undone.')) {
        $('#delete-form').submit();
    }
}
</script>
@endpush