@extends('layouts.app')
@section('title', 'খরচ ক্যাটাগরি')
@section('page-title', 'খরচ ক্যাটাগরি ম্যানেজমেন্ট')

@section('content')
<div class="row g-4">

    {{-- LEFT: Category List --}}
    <div class="col-lg-7">
        <div class="card stat-card">
            <div class="card-header bg-white border-0 pt-3 d-flex justify-content-between align-items-center">
                <h6 class="fw-semibold mb-0">সব ক্যাটাগরি ({{ $categories->count() }})</h6>
                <a href="{{ route('admin.expenses.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>খরচে ফিরুন
                </a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>ক্যাটাগরি</th>
                                <th class="text-center">আইকন</th>
                                <th class="text-center">খরচ সংখ্যা</th>
                                <th class="text-center">স্ট্যাটাস</th>
                                <th class="text-center">একশন</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($categories as $cat)
                            <tr>
                                <td>
                                    <span class="badge bg-{{ $cat->color }} rounded-pill me-2">
                                        <i class="bi bi-{{ $cat->icon }}"></i>
                                    </span>
                                    <span class="fw-semibold">{{ $cat->name }}</span>
                                </td>
                                <td class="text-center text-muted small">
                                    <code>{{ $cat->icon }}</code>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-light text-dark border">{{ $cat->expenses_count }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="badge {{ $cat->status === 'active' ? 'bg-success' : 'bg-secondary' }}">
                                        {{ $cat->status === 'active' ? 'সক্রিয়' : 'নিষ্ক্রিয়' }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <div class="d-flex gap-1 justify-content-center">
                                        <button class="btn btn-sm btn-outline-primary"
                                            onclick="openEdit({{ $cat->id }}, '{{ $cat->name }}', '{{ $cat->icon }}', '{{ $cat->color }}', '{{ $cat->status }}')">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        @if($cat->expenses_count === 0)
                                        <form method="POST" action="{{ route('admin.expense-categories.destroy', $cat) }}"
                                              onsubmit="return confirm('এই ক্যাটাগরি মুছে ফেলবেন?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-5">
                                    কোনো ক্যাটাগরি নেই।
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- RIGHT: Add / Edit Form --}}
    <div class="col-lg-5">

        {{-- Add Form --}}
        <div class="card stat-card mb-4" id="addCard">
            <div class="card-header bg-white border-0 pt-3">
                <h6 class="fw-semibold mb-0">
                    <i class="bi bi-plus-circle text-primary me-2"></i>নতুন ক্যাটাগরি
                </h6>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.expense-categories.store') }}">
                    @csrf
                    @include('admin.expense-categories._form', ['cat' => null])
                    <button type="submit" class="btn btn-primary w-100 mt-3">
                        <i class="bi bi-plus-circle me-2"></i>ক্যাটাগরি যোগ করুন
                    </button>
                </form>
            </div>
        </div>

        {{-- Edit Form (hidden by default) --}}
        <div class="card stat-card border-warning" id="editCard" style="display:none">
            <div class="card-header bg-white border-0 pt-3 d-flex justify-content-between align-items-center">
                <h6 class="fw-semibold mb-0">
                    <i class="bi bi-pencil text-warning me-2"></i>ক্যাটাগরি সম্পাদনা
                </h6>
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="closeEdit()">
                    <i class="bi bi-x"></i>
                </button>
            </div>
            <div class="card-body">
                <form method="POST" id="editForm">
                    @csrf @method('PUT')
                    @include('admin.expense-categories._form', ['cat' => null, 'editing' => true])
                    <button type="submit" class="btn btn-warning w-100 mt-3 fw-semibold">
                        <i class="bi bi-check2 me-2"></i>আপডেট করুন
                    </button>
                </form>
            </div>
        </div>

    </div>
</div>

@push('scripts')
<script>
function openEdit(id, name, icon, color, status) {
    const form = document.getElementById('editForm');
    form.action = `/admin/expense-categories/${id}`;

    form.querySelector('[name="name"]').value   = name;
    form.querySelector('[name="icon"]').value   = icon;
    form.querySelector('[name="color"]').value  = color;
    form.querySelector('[name="status"]').value = status;

    // preview আপডেট
    updatePreview('edit');

    document.getElementById('addCard').style.display  = 'none';
    document.getElementById('editCard').style.display = 'block';
    document.getElementById('editCard').scrollIntoView({ behavior: 'smooth' });
}

function closeEdit() {
    document.getElementById('addCard').style.display  = 'block';
    document.getElementById('editCard').style.display = 'none';
}

function updatePreview(prefix) {
    const icon  = document.querySelector(`#${prefix}Form [name="icon"]`)?.value
                || document.querySelector(`[name="icon"]`)?.value || 'dash';
    const color = document.querySelector(`#${prefix}Form [name="color"]`)?.value
                || document.querySelector(`[name="color"]`)?.value || 'secondary';
    const name  = document.querySelector(`#${prefix}Form [name="name"]`)?.value
                || document.querySelector(`[name="name"]`)?.value || 'নাম';
    const preview = document.getElementById(`${prefix}Preview`);
    if (preview) {
        preview.innerHTML = `<span class="badge bg-${color} rounded-pill fs-6 px-3 py-2">
            <i class="bi bi-${icon} me-1"></i>${name || 'প্রিভিউ'}
        </span>`;
    }
}
</script>
@endpush
@endsection