@extends('layouts.admin-simple')

@section('title', 'Fixed Asset Categories')

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item">Fixed Assets</li>
    <li class="breadcrumb-item active">Categories</li>
@endsection

@section('page-title')
    <div class="d-flex justify-content-between align-items-center w-100">
        <div class="page-title-left">
            <h3 class="mb-1">Fixed Asset Categories</h3>
            <p class="text-muted mb-0" style="font-size: 13px;">Manage asset category groups</p>
        </div>
        @can('warehouse.fixed-assets.create')
        <div class="page-actions-right">
            <button onclick="showAddModal()" class="btn btn-sm btn-primary">
                <i class="material-icons mr-1" style="font-size: 16px;">add</i>
                Add Category
            </button>
        </div>
        @endcan
    </div>
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="categories-table">
                    <thead class="thead-light">
                        <tr>
                            <th>Code</th>
                            <th>Category Name</th>
                            <th>Assets Count</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($categories as $category)
                        <tr>
                            <td><span class="badge badge-secondary">{{ $category->category_code }}</span></td>
                            <td>{{ $category->category_name }}</td>
                            <td><span class="badge badge-info">{{ $category->assets_count }}</span></td>
                            <td>
                                @if($category->status === 'active')
                                    <span class="badge badge-success">Active</span>
                                @else
                                    <span class="badge badge-secondary">Inactive</span>
                                @endif
                            </td>
                            <td>
                                @can('warehouse.fixed-assets.edit')
                                <button onclick="showEditModal({{ json_encode($category) }})" class="btn btn-sm btn-outline-primary" title="Edit">
                                    <i class="material-icons" style="font-size: 16px;">edit</i>
                                </button>
                                @endcan
                                @can('warehouse.fixed-assets.delete')
                                @if($category->assets_count == 0)
                                <button onclick="deleteCategory({{ $category->id }})" class="btn btn-sm btn-outline-danger" title="Delete">
                                    <i class="material-icons" style="font-size: 16px;">delete</i>
                                </button>
                                @endif
                                @endcan
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No categories found. Create one to get started.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('modals')
<!-- Add/Edit Modal -->
<div class="modal fade" id="categoryModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Add Asset Category</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form id="categoryForm">
                @csrf
                <input type="hidden" id="categoryId" value="">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Asset Group Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="category_code" name="category_code" maxlength="10" placeholder="e.g., VEH, MCH, FRN" required>
                        <small class="text-muted">3-10 character code (auto-uppercase)</small>
                    </div>
                    <div class="form-group">
                        <label>Asset Group Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="category_name" name="category_name" maxlength="100" placeholder="e.g., Vehicles, Machinery" required>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select class="form-control" id="status" name="status">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea class="form-control" id="description" name="description" rows="2" maxlength="1000"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="saveBtn">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function showAddModal() {
    document.getElementById('modalTitle').textContent = 'Add Asset Category';
    document.getElementById('categoryId').value = '';
    document.getElementById('categoryForm').reset();
    document.getElementById('status').value = 'active';
    $('#categoryModal').modal('show');
}

function showEditModal(category) {
    document.getElementById('modalTitle').textContent = 'Edit Asset Category';
    document.getElementById('categoryId').value = category.id;
    document.getElementById('category_code').value = category.category_code;
    document.getElementById('category_name').value = category.category_name;
    document.getElementById('status').value = category.status;
    document.getElementById('description').value = category.description || '';
    $('#categoryModal').modal('show');
}

document.getElementById('categoryForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const id = document.getElementById('categoryId').value;
    const isEdit = !!id;
    const url = isEdit
        ? '{{ route("warehouse.fixed-assets.categories.index") }}/' + id
        : '{{ route("warehouse.fixed-assets.categories.store") }}';

    const formData = new FormData(this);
    if (isEdit) {
        formData.append('_method', 'PUT');
    }

    fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
        },
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            $('#categoryModal').modal('hide');
            location.reload();
        } else {
            alert(data.message || 'An error occurred.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while saving.');
    });
});

function deleteCategory(id) {
    if (!confirm('Are you sure you want to delete this category?')) return;

    fetch('{{ route("warehouse.fixed-assets.categories.index") }}/' + id, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.message || 'Cannot delete this category.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while deleting.');
    });
}
</script>
@endpush