@extends('layouts.admin')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Categories</h1>
        <p class="page-subtitle">Manage product categories and organization.</p>
    </div>
    <button class="btn btn-primary" onclick="openModal('createCategoryModal')">
        <i class="fa-solid fa-plus"></i> Add New Category
    </button>
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>#ID</th>
                    <th>Category Name</th>
                    <th>Slug</th>
                    <th>Total Products</th>
                    <th style="text-align: right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($categories as $category)
                <tr>
                    <td>#{{ $category->id }}</td>
                    <td><div class="td-name">{{ $category->name }}</div></td>
                    <td><code>{{ $category->slug }}</code></td>
                    <td><span class="badge" style="background: var(--surface-2);">{{ $category->products_count }} Products</span></td>
                    <td style="text-align: right;">
                        <div class="action-btns" style="justify-content: flex-end;">
                            <button class="action-btn edit" onclick="editCategory({{ json_encode($category) }})">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </button>
                            <form action="{{ route('admin.categories.destroy', $category->id) }}" method="POST" onsubmit="return confirm('Delete this category?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-btn delete"><i class="fa-solid fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div id="createCategoryModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 500px;">
        <div class="auth-header">
            <h2 class="auth-title">Add Category</h2>
            <button class="close-btn" onclick="closeModal('createCategoryModal')">&times;</button>
        </div>
        <form action="{{ route('admin.categories.store') }}" method="POST">
            @csrf
            <div class="form-group">
                <label class="form-label">Category Name</label>
                <input type="text" name="name" class="form-input" required placeholder="Ex: Smart Security" style="padding-left:15px">
            </div>
            <button type="submit" class="btn btn-primary btn-auth" style="margin-top:20px">Save Category</button>
        </form>
    </div>
</div>

<div id="editCategoryModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 500px;">
        <div class="auth-header">
            <h2 class="auth-title">Edit Category</h2>
            <button class="close-btn" onclick="closeModal('editCategoryModal')">&times;</button>
        </div>
        <form id="editCategoryForm" method="POST">
            @csrf @method('PUT')
            <div class="form-group">
                <label class="form-label">Category Name</label>
                <input type="text" name="name" id="edit_name" class="form-input" required style="padding-left:15px">
            </div>
            <button type="submit" class="btn btn-primary btn-auth" style="margin-top:20px">Update Category</button>
        </form>
    </div>
</div>
@push('styles')
<style>
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        display: none; 
        align-items: center;
        justify-content: center;
        z-index: 9999;
        backdrop-filter: blur(5px);
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal-content {
        background: var(--surface);
        padding: 30px;
        border-radius: 15px;
        width: 100%;
        position: relative;
        border: 1px solid var(--border);
    }
</style>
@endpush
@push('scripts')
<script>
    function openModal(id) {
        const modal = document.getElementById(id);
        if (modal) {
            modal.classList.add('active');
        }
    }

    function closeModal(id) {
        const modal = document.getElementById(id);
        if (modal) {
            modal.classList.remove('active');
        }
    }

    function editCategory(category) {
        const form = document.getElementById('editCategoryForm');
        form.action = "/admin/categories/" + category.id;
        
        document.getElementById('edit_name').value = category.name;
        
        openModal('editCategoryModal');
    }

    window.onclick = function(event) {
        if (event.target.classList.contains('modal-overlay')) {
            event.target.classList.remove('active');
        }
    }
</script>
@endpush
@endsection