@extends('layouts.app')
@section('title', 'Category List')

@section('content')

<div class="container-fluid py-4">

    <!-- Header Section -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-2">
        <h2 class="fw-bold text-dark mb-0">List Categories</h2>
        <button class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
            <i class="bi bi-plus-circle me-1"></i> Add Category
        </button>
    </div>

    <!-- Category Table -->
    <div class="card shadow-sm border-0">
        <div class="card-body p-2 p-md-3">
            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle text-center mb-0">
                    <thead class="table-primary">
                        <tr>
                            <th style="width: 60px;">No</th>
                            {{-- <th>Image</th> --}}
                            <th>Name</th>
                            {{-- <th>Description</th> --}}
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($categories as $index => $category)
                            <tr>
                                <td class="fw-semibold">{{ $index + 1 }}</td>
                                {{-- <td>
                                    @if($category->image)
                                        <img src="{{ asset($category->image) }}" class="rounded shadow-sm" width="60" height="60" alt="{{ $category->name }}">
                                    @else
                                        <span class="text-muted fst-italic">No Image</span>
                                    @endif
                                </td> --}}
                                <td class="fw-semibold text-dark">{{ $category->name }}</td>
                                {{-- <td class="text-truncate" style="max-width:200px;">{{ $category->description ?? '—' }}</td> --}}
                                <td>
                                    <div class="d-flex justify-content-center gap-2 flex-wrap">
                                        <!-- Edit Button -->
                                        <button type="button" 
                                            class="btn btn-warning btn-sm editCategoryBtn d-flex align-items-center gap-1"
                                            data-id="{{ $category->id }}" 
                                            data-name="{{ $category->name }}" 
                                            data-description="{{ $category->description }}" 
                                            data-image="{{ $category->image }}" 
                                            data-bs-toggle="modal" 
                                            data-bs-target="#editCategoryModal">
                                            <i class="bi bi-pencil-square"></i>
                                        </button>

                                        <!-- Delete Form -->
                                        <form action="{{ route('categories.destroy', $category->id) }}" method="POST" onsubmit="return confirm('Are you sure to delete this category?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm d-flex align-items-center gap-1">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-muted py-4">No categories found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form action="{{ route('categories.store') }}" method="POST" enctype="multipart/form-data" class="modal-content border-0 shadow">
            @csrf
            <div class="modal-header text-dark">
                <h5 class="modal-title fw-bold" id="addCategoryModalLabel">
                    <i class="bi bi-folder-plus me-2"></i>Add New Category
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Name</label>
                    <input type="text" name="name" class="form-control shadow-sm" placeholder="Enter category name" required>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Description</label>
                    <textarea name="description" class="form-control shadow-sm" rows="2" placeholder="Enter category description"></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Image</label>
                    <input type="file" name="image" class="form-control shadow-sm" accept="image/*" onchange="previewImage(event)">
                    <div class="mt-3 text-center">
                        <img id="imagePreview" class="img-thumbnail d-none" width="100" height="100" alt="Preview">
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle me-1"></i> Cancel
                </button>
                <button type="submit" class="btn btn-success">
                    <i class="bi bi-save me-1"></i> Save Category
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Category Modal -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form id="editCategoryForm" method="POST" enctype="multipart/form-data" class="modal-content border-0 shadow">
            @csrf
            @method('PUT')
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold" id="editCategoryModalLabel">
                    <i class="bi bi-pencil-square me-2"></i> Edit Category
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editCategoryId" name="id">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Name</label>
                    <input type="text" name="name" id="editCategoryName" class="form-control shadow-sm" required>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Description</label>
                    <textarea name="description" id="editCategoryDescription" class="form-control shadow-sm" rows="2"></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Image</label>
                    <input type="file" name="image" id="editCategoryImage" class="form-control shadow-sm" accept="image/*" onchange="previewEditImage(event)">
                    <div class="mt-3 text-center">
                        <img id="editImagePreview" class="img-thumbnail d-none" width="100" height="100" alt="Preview">
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle me-1"></i> Cancel
                </button>
                <button type="submit" class="btn btn-success">
                    <i class="bi bi-save me-1"></i> Update Category
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Scripts -->
<script>
function previewImage(event) {
    const input = event.target;
    const preview = document.getElementById('imagePreview');
    const file = input.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = e => {
            preview.src = e.target.result;
            preview.classList.remove('d-none');
        };
        reader.readAsDataURL(file);
    } else {
        preview.src = '';
        preview.classList.add('d-none');
    }
}

function previewEditImage(event) {
    const file = event.target.files[0];
    const preview = document.getElementById('editImagePreview');
    if (file) {
        const reader = new FileReader();
        reader.onload = e => {
            preview.src = e.target.result;
            preview.classList.remove('d-none');
        };
        reader.readAsDataURL(file);
    } else {
        preview.src = '';
        preview.classList.add('d-none');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const editButtons = document.querySelectorAll('.editCategoryBtn');
    const form = document.getElementById('editCategoryForm');
    const preview = document.getElementById('editImagePreview');

    editButtons.forEach(button => {
        button.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.name;
            const description = this.dataset.description;
            const image = this.dataset.image;

            document.getElementById('editCategoryId').value = id;
            document.getElementById('editCategoryName').value = name;
            document.getElementById('editCategoryDescription').value = description || '';

            if (image) {
                preview.src = `/${image}`;
                preview.classList.remove('d-none');
            } else {
                preview.src = '';
                preview.classList.add('d-none');
            }

            form.action = `/categories/${id}`;
        });
    });
});
</script>

@endsection