@extends('layouts.admin')

@section('title', 'Create Collection')
@section('page-title', 'Create Collection')

@push('styles')
<style>
    .dropdown-check-list .dropdown-menu {
        padding: 0;
    }
    .dropdown-check-list .form-check {
        cursor: pointer;
    }
    .dropdown-check-list .form-check:hover {
        background-color: #f8f9fa;
    }
    .dropdown-check-list .dropdown-menu li {
        transition: background-color 0.2s;
    }
    .dropdown-check-list .dropdown-menu li:hover {
        background-color: #f8f9fa;
    }
    .dropdown-check-list input[type="text"] {
        border: none;
        box-shadow: none;
    }
    .dropdown-check-list input[type="text"]:focus {
        border: none;
        box-shadow: none;
        outline: none;
    }
</style>
@endpush

@section('content')
<section class="section">
    <div class="card">
        <div class="card-header">
            <h4>Create New Collection</h4>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.collections.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="title">Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title') }}" required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="slug">Slug</label>
                            <input type="text" class="form-control @error('slug') is-invalid @enderror" id="slug" name="slug" value="{{ old('slug') }}">
                            <small class="form-text text-muted">Leave empty to auto-generate from title</small>
                            @error('slug')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="3">{{ old('description') }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="image">Collection Image</label>
                            <input type="file" class="form-control @error('image') is-invalid @enderror" id="image" name="image" accept="image/*">
                            <small class="form-text text-muted">Accepted formats: JPEG, PNG, JPG, GIF, WEBP. Max size: 5MB</small>
                            @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="mt-2" id="imagePreview"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="sort_order">Sort Order</label>
                            <input type="number" class="form-control @error('sort_order') is-invalid @enderror" id="sort_order" name="sort_order" value="{{ old('sort_order') }}" min="0">
                            <small class="form-text text-muted">Lower numbers appear first</small>
                            @error('sort_order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Select Products <span class="text-muted">(Optional)</span></label>
                    @error('products')
                        <div class="alert alert-danger">{{ $message }}</div>
                    @enderror
                    @error('products.*')
                        <div class="alert alert-danger">{{ $message }}</div>
                    @enderror
                    @if($products->count() > 0)
                        <div class="dropdown-check-list" id="productsDropdown">
                            <button type="button" class="btn btn-outline-secondary form-control text-start" id="productsDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                <span id="selectedProductsText">Select products...</span>
                                <span class="float-end"><i class="bi bi-chevron-down"></i></span>
                            </button>
                            <ul class="dropdown-menu w-100" style="max-height: 300px; overflow-y: auto;">
                                <li class="px-3 py-2 border-bottom">
                                    <input type="text" class="form-control form-control-sm" id="productSearch" placeholder="Search products...">
                                </li>
                                <li><hr class="dropdown-divider"></li>
                                @foreach($products as $product)
                                    <li class="px-3 py-2">
                                        <div class="form-check">
                                            <input class="form-check-input product-checkbox" type="checkbox" name="products[]" value="{{ $product->id }}" id="product_{{ $product->id }}" {{ in_array($product->id, old('products', [])) ? 'checked' : '' }}>
                                            <label class="form-check-label w-100" for="product_{{ $product->id }}">
                                                <strong>{{ $product->name }}</strong><br>
                                                <small class="text-muted">${{ number_format($product->price, 2) }} | SKU: {{ $product->sku }}</small>
                                            </label>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <small class="form-text text-muted">Click to open dropdown and select products</small>
                    @else
                        <div class="alert alert-warning">No active products available. Please create products first.</div>
                    @endif
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Create Collection</button>
                    <a href="{{ route('admin.collections.index') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    // Image preview
    document.getElementById('image').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.getElementById('imagePreview');
                preview.innerHTML = '<img src="' + e.target.result + '" class="img-thumbnail" style="max-height: 200px; margin-top: 10px;">';
            };
            reader.readAsDataURL(file);
        }
    });

    // Product dropdown with checkboxes
    document.addEventListener('DOMContentLoaded', function() {
        const dropdown = document.getElementById('productsDropdown');
        const button = document.getElementById('productsDropdownBtn');
        const selectedText = document.getElementById('selectedProductsText');
        const checkboxes = dropdown.querySelectorAll('.product-checkbox');
        const searchInput = document.getElementById('productSearch');

        // Update button text based on selected products
        function updateButtonText() {
            const checked = Array.from(checkboxes).filter(cb => cb.checked);
            if (checked.length === 0) {
                selectedText.textContent = 'Select products...';
            } else {
                selectedText.textContent = `${checked.length} product(s) selected`;
            }
        }

        // Initialize button text
        updateButtonText();

        // Handle checkbox changes
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                updateButtonText();
            });
        });

        // Prevent dropdown from closing when clicking inside
        const dropdownMenu = dropdown.querySelector('.dropdown-menu');
        dropdownMenu.addEventListener('click', function(e) {
            e.stopPropagation();
        });

        // Search functionality
        if (searchInput) {
            searchInput.addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase();
                checkboxes.forEach(checkbox => {
                    const label = checkbox.closest('li');
                    const text = label.textContent.toLowerCase();
                    if (text.includes(searchTerm)) {
                        label.style.display = '';
                    } else {
                        label.style.display = 'none';
                    }
                });
            });

            // Prevent search input from closing dropdown
            searchInput.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        }
    });
</script>
@endpush