@extends('layouts.admin')

@section('title', 'Categories Management | Omni Trade')
@section('page_title', 'Store Categories')

@section('content')
<style>
    /* Responsive Grid Layout for PC & Mobile */
    .categories-main-grid {
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        gap: 24px;
        align-items: start;
        width: 100%;
    }

    @media (max-width: 991px) {
        .categories-main-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }
    }

    /* Scrollable Container for Existing Categories */
    .categories-table-wrapper {
        width: 100%;
        max-height: 600px;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        background: #ffffff;
    }

    /* Clean custom scrollbar for horizontal & vertical scroll */
    .categories-table-wrapper::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    .categories-table-wrapper::-webkit-scrollbar-track {
        background: #f8f9ff;
    }
    .categories-table-wrapper::-webkit-scrollbar-thumb {
        background: #c3c6d7;
        border-radius: 4px;
    }
    .categories-table-wrapper::-webkit-scrollbar-thumb:hover {
        background: #565e74;
    }

    /* Sticky Table Header so column titles stay visible when scrolling vertically */
    .categories-table thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #f8f9ff;
        box-shadow: 0 1px 0 var(--admin-border);
    }

    /* Min-width ensures no squishing of cells on smaller viewports */
    .categories-table {
        min-width: 580px;
        width: 100%;
        border-collapse: collapse;
    }

    /* Mobile Header & Responsive Tweaks */
    @media (max-width: 640px) {
        .categories-header-row {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 12px;
        }
        .categories-header-actions {
            width: 100%;
            display: flex;
            gap: 8px;
            flex-direction: column;
        }
        .categories-header-actions .btn {
            width: 100%;
            justify-content: center;
        }
        .form-grid-two-col {
            grid-template-columns: 1fr !important;
        }
    }
</style>

<div style="display:flex; flex-direction:column; gap:24px; max-width:1200px; width:100%;">

    <!-- Top Action / Info Header -->
    <div class="categories-header-row" style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;">
        <div>
            <h2 style="font-size:20px; font-weight:800; color:var(--admin-text-main); margin-bottom:4px;">
                Category Catalog Management
            </h2>
            <p style="font-size:13.5px; color:var(--admin-text-muted); margin:0;">
                Organize your catalog collections, storefront navigation filters, and featured homepage showcases.
            </p>
        </div>
        <div class="categories-header-actions" style="display:flex; gap:10px;">
            <a href="{{ route('admin.products.create') }}" class="btn btn-outline btn-sm">
                <i data-lucide="plus-circle" style="width:14px;"></i> Add Product
            </a>
            <a href="{{ route('store.catalog') }}" target="_blank" class="btn btn-outline btn-sm">
                <i data-lucide="external-link" style="width:14px;"></i> View Storefront Catalog
            </a>
        </div>
    </div>

    @if(session('success'))
        <div style="background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; padding:12px 18px; border-radius:var(--radius-sm); font-size:13.5px; display:flex; align-items:center; gap:8px;">
            <i data-lucide="check-circle" style="width:16px; color:#059669;"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if(isset($errors) && $errors->any())
        <div style="background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:12px 18px; border-radius:var(--radius-sm); font-size:13.5px;">
            <strong style="display:block; margin-bottom:4px;">Please correct the following errors:</strong>
            <ul style="margin-left:18px;">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Responsive Grid: Category List (Left / Top on Mobile) & Add Category Form (Right / Below on Mobile) -->
    <div class="categories-main-grid">

        <!-- Left: Categories Table (Clean Card without Highlights, Fully Scrollable) -->
        <div class="card" style="padding:0; overflow:hidden; border:1px solid var(--admin-border); background:#ffffff;">
            <div style="padding:16px 20px; border-bottom:1px solid var(--admin-border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;">
                <div style="display:flex; align-items:center; gap:8px;">
                    <h3 style="font-size:16px; font-weight:800; color:var(--admin-text-main); margin:0; display:flex; align-items:center; gap:8px;">
                        <i data-lucide="layers" style="width:18px; color:var(--admin-primary);"></i>
                        Existing Categories
                    </h3>
                    <span style="font-size:12px; font-weight:700; padding:2px 8px; border-radius:20px; background:#eff6ff; color:var(--admin-primary); border:1px solid #bfdbfe;">
                        {{ $categories->count() }} Categories
                    </span>
                </div>
                <span style="font-size:11.5px; color:var(--admin-text-muted); display:inline-flex; align-items:center; gap:4px;">
                    <i data-lucide="arrow-left-right" style="width:13px;"></i> Scroll table to view actions
                </span>
            </div>

            <!-- Scrollable Table Container -->
            <div class="categories-table-wrapper">
                <table class="admin-table categories-table">
                    <thead>
                        <tr>
                            <th style="min-width:180px;">Category Name</th>
                            <th style="min-width:110px;">Slug</th>
                            <th style="text-align:center; min-width:85px;">Products</th>
                            <th style="text-align:center; min-width:80px;">Featured</th>
                            <th style="text-align:right; min-width:140px; padding-right:20px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($categories as $cat)
                            <tr>
                                <td>
                                    <div style="display:flex; align-items:center; gap:12px;">
                                        <div style="width:38px; height:38px; border-radius:8px; background:#f8f9ff; border:1px solid var(--admin-border); display:flex; align-items:center; justify-content:center; color:var(--admin-primary); overflow:hidden; flex-shrink:0;">
                                            @if(!empty($cat->image))
                                                <img src="{{ $cat->image }}" alt="{{ $cat->name }}" style="width:100%; height:100%; object-fit:cover;">
                                            @else
                                                <i data-lucide="{{ $cat->icon ?: 'folder' }}" style="width:18px; height:18px;"></i>
                                            @endif
                                        </div>
                                        <div style="min-width:0;">
                                            <strong style="font-size:13.5px; color:var(--admin-text-main); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;">{{ $cat->name }}</strong>
                                            @if(!empty($cat->description))
                                                <span style="font-size:11px; color:var(--admin-text-muted); display:block; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                                    {{ $cat->description }}
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <code style="font-size:11.5px; background:#f1f5f9; padding:2px 6px; border-radius:4px; color:var(--admin-text-muted); white-space:nowrap;">
                                        {{ $cat->slug }}
                                    </code>
                                </td>
                                <td style="text-align:center; white-space:nowrap;">
                                    <a href="{{ route('admin.products.index', ['category_id' => $cat->id]) }}" title="View products in this category" style="display:inline-block; font-size:12px; font-weight:700; color:var(--admin-primary); padding:3px 8px; border-radius:12px; background:#eff4ff; border:1px solid #dce9ff;">
                                        {{ $cat->products_count }} items
                                    </a>
                                </td>
                                <td style="text-align:center; white-space:nowrap;">
                                    @if($cat->is_featured)
                                        <span class="badge badge-success">&#10003; Yes</span>
                                    @else
                                        <span style="font-size:11.5px; color:var(--admin-text-muted);">&mdash;</span>
                                    @endif
                                </td>
                                <td style="text-align:right; padding-right:20px; white-space:nowrap;">
                                    <div style="display:inline-flex; align-items:center; gap:6px;">
                                        <button type="button" onclick="openEditModal({{ json_encode($cat) }})" class="btn btn-outline btn-sm" style="padding:5px 9px;" title="Edit Category">
                                            <i data-lucide="edit-3" style="width:13px;"></i>
                                            <span>Edit</span>
                                        </button>
                                        <form action="{{ route('admin.categories.destroy', $cat->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete category \'{{ addslashes($cat->name) }}\'? (Any attached products will become uncategorized but won\'t be deleted).');" style="display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-outline btn-sm" style="padding:5px 9px; color:var(--admin-danger); border-color:#fecaca;" title="Delete Category">
                                                <i data-lucide="trash-2" style="width:13px;"></i>
                                                <span>Delete</span>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" style="text-align:center; padding:36px; color:var(--admin-text-muted);">
                                    <i data-lucide="folder-x" style="width:36px; height:36px; margin:0 auto 10px; display:block; opacity:0.4;"></i>
                                    No categories created yet. Use the form below to add your first category.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Right: Add New Category Form (Clean Card without Highlights) -->
        <div class="card" style="border:1px solid var(--admin-border); background:#ffffff;">
            <h3 style="font-size:16px; font-weight:800; color:var(--admin-text-main); margin-bottom:18px; display:flex; align-items:center; gap:8px;">
                <i data-lucide="plus-circle" style="width:18px; color:var(--admin-primary);"></i>
                Add New Category
            </h3>

            <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div style="display:flex; flex-direction:column; gap:16px;">
                    <div>
                        <label>Category Name *</label>
                        <input type="text" name="name" id="newCategoryName" value="{{ old('name') }}" required placeholder="e.g. Smart Home &amp; Automation" oninput="autoGenerateSlug(this.value)">
                    </div>

                    <div>
                        <label>URL Slug (Optional)</label>
                        <input type="text" name="slug" id="newCategorySlug" value="{{ old('slug') }}" placeholder="smart-home-automation (auto-generated)">
                        <span style="font-size:11px; color:var(--admin-text-muted); display:block; margin-top:4px;">
                            Used for storefront category filtering (e.g. /catalog?category=slug).
                        </span>
                    </div>

                    <div>
                        <label>Description (Optional)</label>
                        <textarea name="description" rows="3" placeholder="Brief summary of products in this collection...">{{ old('description') }}</textarea>
                    </div>

                    <!-- Icon Preset Selector -->
                    <div>
                        <label>Category Icon</label>
                        <div style="display:flex; gap:8px; align-items:center; margin-bottom:8px;">
                            <input type="text" name="icon" id="newCategoryIcon" value="{{ old('icon', 'folder') }}" placeholder="Lucide icon name (e.g. folder, tag, watch, coffee)">
                        </div>
                        <div style="display:flex; gap:6px; flex-wrap:wrap;">
                            @php
                                $suggestedIcons = ['folder', 'layers', 'tag', 'smartphone', 'watch', 'headphones', 'coffee', 'utensils', 'sparkles', 'zap', 'home', 'camera'];
                            @endphp
                            @foreach($suggestedIcons as $ic)
                                <button type="button" onclick="selectIcon('{{ $ic }}')" style="font-size:11px; padding:3px 8px; border-radius:4px; border:1px solid var(--admin-border); background:#f8f9ff; color:var(--admin-text-main); cursor:pointer; display:inline-flex; align-items:center; gap:4px;">
                                    <i data-lucide="{{ $ic }}" style="width:12px; height:12px;"></i> {{ $ic }}
                                </button>
                            @endforeach
                        </div>
                    </div>

                    <!-- Category Media Image (Optional) -->
                    <div>
                        <label>Category Image / Banner (Optional)</label>
                        <input type="file" name="image_file" accept=".webp,.jpeg,.jpg,.png,image/webp,image/jpeg,image/png">
                        <span style="font-size:11px; color:var(--admin-text-muted); display:block; margin-top:4px;">
                            Accepted formats: WEBP, JPEG, PNG (max 5MB).
                        </span>
                    </div>

                    <div class="form-grid-two-col" style="display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center; background:#f8f9ff; border:1px solid var(--admin-border); border-radius:6px; padding:12px 14px;">
                        <div>
                            <label style="margin-bottom:4px;">Display Priority</label>
                            <input type="number" name="display_order" value="{{ old('display_order', 0) }}" min="0" style="padding:6px 10px; font-size:13px;">
                        </div>

                        <div>
                            <label style="display:flex; align-items:center; gap:8px; cursor:pointer; margin:0; margin-top:16px;">
                                <input type="checkbox" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }} style="accent-color:var(--admin-primary); width:16px; height:16px;">
                                <span style="font-size:12.5px; font-weight:700; color:var(--admin-text-main);">Feature in Nav</span>
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary" style="width:100%; padding:12px; font-size:14px; font-weight:700;">
                        <i data-lucide="check" style="width:16px;"></i> Create Category
                    </button>
                </div>
            </form>
        </div>

    </div>

</div>

<!-- Edit Category Modal (Clean Box without highlights, Mobile Scrollable) -->
<div id="editCategoryModal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(15,23,42,0.5); z-index:100; align-items:center; justify-content:center; backdrop-filter:blur(2px); padding:16px;">
    <div style="background:#ffffff; border:1px solid var(--admin-border); border-radius:10px; width:100%; max-width:520px; box-shadow:0 20px 25px -5px rgba(0,0,0,0.1); overflow:hidden; max-height:90vh; display:flex; flex-direction:column;">
        <div style="display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--admin-border); background:#f8f9ff; flex-shrink:0;">
            <h4 style="font-size:16px; font-weight:800; color:var(--admin-text-main); margin:0; display:flex; align-items:center; gap:8px;">
                <i data-lucide="edit-3" style="width:16px; color:var(--admin-primary);"></i>
                Edit Category
            </h4>
            <button type="button" onclick="closeEditModal()" style="background:none; border:none; color:var(--admin-text-muted); cursor:pointer; font-size:22px; line-height:1; padding:0 4px;">
                &times;
            </button>
        </div>

        <form id="editCategoryForm" method="POST" enctype="multipart/form-data" style="padding:20px; overflow-y:auto; flex:1;">
            @csrf
            @method('PUT')

            <div style="display:flex; flex-direction:column; gap:16px;">
                <div>
                    <label>Category Name *</label>
                    <input type="text" name="name" id="editName" required>
                </div>

                <div>
                    <label>URL Slug</label>
                    <input type="text" name="slug" id="editSlug">
                </div>

                <div>
                    <label>Description</label>
                    <textarea name="description" id="editDescription" rows="2"></textarea>
                </div>

                <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
                    <div>
                        <label>Icon Name</label>
                        <input type="text" name="icon" id="editIcon">
                    </div>
                    <div>
                        <label>Display Priority</label>
                        <input type="number" name="display_order" id="editDisplayOrder" min="0">
                    </div>
                </div>

                <div>
                    <label>Replace Image (Optional)</label>
                    <input type="file" name="image_file" accept=".webp,.jpeg,.jpg,.png,image/webp,image/jpeg,image/png">
                </div>

                <div>
                    <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
                        <input type="checkbox" name="is_featured" id="editIsFeatured" value="1" style="accent-color:var(--admin-primary); width:16px; height:16px;">
                        <span style="font-weight:700; color:var(--admin-text-main); font-size:13px;">Featured in Storefront Navigation</span>
                    </label>
                </div>

                <div style="display:flex; justify-content:flex-end; gap:10px; margin-top:10px; border-top:1px solid var(--admin-border); padding-top:16px;">
                    <button type="button" onclick="closeEditModal()" class="btn btn-outline btn-sm">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-sm" style="padding:8px 20px; font-weight:700;">
                        Save Changes
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    function autoGenerateSlug(name) {
        const slug = name.toLowerCase()
            .trim()
            .replace(/[^\w\s-]/g, '')
            .replace(/[\s_-]+/g, '-')
            .replace(/^-+|-+$/g, '');
        document.getElementById('newCategorySlug').value = slug;
    }

    function selectIcon(iconName) {
        document.getElementById('newCategoryIcon').value = iconName;
    }

    function openEditModal(category) {
        const modal = document.getElementById('editCategoryModal');
        const form = document.getElementById('editCategoryForm');

        form.action = "{{ url('admin/categories') }}/" + category.id;
        document.getElementById('editName').value = category.name || '';
        document.getElementById('editSlug').value = category.slug || '';
        document.getElementById('editDescription').value = category.description || '';
        document.getElementById('editIcon').value = category.icon || 'folder';
        document.getElementById('editDisplayOrder').value = category.display_order || 0;
        document.getElementById('editIsFeatured').checked = !!category.is_featured;

        modal.style.display = 'flex';
        if (window.lucide) window.lucide.createIcons();
    }

    function closeEditModal() {
        document.getElementById('editCategoryModal').style.display = 'none';
    }

    // Close on outside backdrop click
    window.addEventListener('click', function(e) {
        const modal = document.getElementById('editCategoryModal');
        if (e.target === modal) {
            closeEditModal();
        }
    });
</script>
@endpush
@endsection