{{-- resources/views/expenses/categories.blade.php --}}
@extends('layouts.app')
@section('title', 'Expense Categories')
@section('page_title', 'Expense Categories')
@section('page_subtitle', 'Manage expense categories')

@section('content')

<div class="d-flex justify-content-between align-items-center mb-3">
    <a href="{{ tenant_route('expenses.index') }}"
       class="btn btn-sm btn-outline-secondary">← Expenses</a>
</div>

<div class="row g-3">

    {{-- Category list --}}
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    Categories
                    <span style="font-size:.75rem;font-weight:400;
                                 color:var(--muted);margin-left:6px;">
                        {{ $categories->count() }} total
                    </span>
                </span>
            </div>

            @if($categories->isEmpty())
                <div class="card-body text-center py-4">
                    <p class="text-muted mb-0" style="font-size:.8rem;">
                        No categories yet
                    </p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Expenses</th>
                                <th>Type</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($categories as $cat)
                                <tr>
                                    <td>
                                        <div style="display:flex;
                                                    align-items:center;gap:8px;">
                                            @if($cat->color)
                                                <span style="width:10px;height:10px;
                                                             border-radius:50%;
                                                             background:{{ $cat->color }};
                                                             flex-shrink:0;"></span>
                                            @endif
                                            <div>
                                                <div class="fw-semibold"
                                                     style="font-size:.83rem;">
                                                    {{ $cat->name }}
                                                </div>
                                                @if($cat->description)
                                                    <div style="font-size:.7rem;
                                                                color:var(--muted);">
                                                        {{ $cat->description }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td style="font-size:.8rem;color:var(--muted);">
                                        {{ $cat->expenses_count }}
                                    </td>
                                    <td>
                                        @if($cat->is_system)
                                            <span style="font-size:.68rem;
                                                         background:#f1f5f9;
                                                         color:var(--muted);
                                                         padding:2px 7px;
                                                         border-radius:4px;">
                                                System
                                            </span>
                                        @else
                                            <span style="font-size:.68rem;
                                                         background:#dbeafe;
                                                         color:#1e40af;
                                                         padding:2px 7px;
                                                         border-radius:4px;">
                                                Custom
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        @if(!$cat->is_system)
                                            <div class="d-flex gap-1">
                                                <button class="btn btn-xs btn-outline-secondary"
                                                        onclick="editCategory({{ $cat->id }}, '{{ $cat->name }}', '{{ $cat->description }}', '{{ $cat->color }}')">
                                                    <i class="bi bi-pencil"></i>
                                                </button>
                                                <form method="POST"
                                                      action="{{ tenant_route('expenses.categories.destroy', ['category' => $cat->id]) }}"
                                                      onsubmit="return confirm('Delete this category?')">
                                                    @csrf @method('DELETE')
                                                    <button class="btn btn-xs btn-outline-danger"
                                                            type="submit">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    {{-- Add category --}}
    <div class="col-xl-4">
        <div class="card" id="categoryFormCard">
            <div class="card-header">
                <span class="card-title" id="formTitle">
                    Add Category
                </span>
            </div>
            <div class="card-body">
                <form method="POST"
                      id="categoryForm"
                      action="{{ tenant_route('expenses.categories.store') }}">
                    @csrf
                    <input type="hidden" name="_method" id="formMethod" value="POST">
                    <input type="hidden" name="_category_id" id="categoryId">

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="name"
                               id="categoryName"
                               class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name') }}"
                               placeholder="e.g. Maintenance & Repairs"
                               required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Description
                        </label>
                        <textarea name="description"
                                  id="categoryDescription"
                                  rows="2"
                                  class="form-control"
                                  placeholder="Optional description">{{ old('description') }}</textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Color</label>
                        <input type="color" name="color"
                               id="categoryColor"
                               class="form-control form-control-color"
                               value="{{ old('color', '#6366f1') }}">
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-sm">
                            Save Category
                        </button>
                        <button type="button"
                                onclick="resetForm()"
                                class="btn btn-outline-secondary btn-sm">
                            Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
function editCategory(id, name, description, color) {
    const form = document.getElementById('categoryForm');
    document.getElementById('formTitle').textContent = 'Edit Category';
    document.getElementById('formMethod').value = 'PUT';
    document.getElementById('categoryId').value = id;
    document.getElementById('categoryName').value = name;
    document.getElementById('categoryDescription').value = description || '';
    document.getElementById('categoryColor').value = color || '#6366f1';

    // Update form action
    form.action = form.action.replace(/\/categories\/\d+$/, '')
        + '/categories/' + id;
    form.querySelector('[name="_method"]').value = 'PUT';

    document.getElementById('categoryFormCard')
        .scrollIntoView({ behavior: 'smooth' });
    document.getElementById('categoryName').focus();
}

function resetForm() {
    document.getElementById('formTitle').textContent = 'Add Category';
    document.getElementById('categoryForm').reset();
    document.getElementById('formMethod').value = 'POST';
    document.getElementById('categoryId').value = '';
    document.getElementById('categoryForm').action =
        '{{ tenant_route('expenses.categories.store') }}';
}
</script>
@endpush