@extends('layouts.app')

@section('title', 'Categories - Cash Book')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 bg-white border-b border-gray-200">
                <h2 class="text-2xl font-bold mb-4">Categories</h2>
                
                <!-- Two buttons side-by-side -->
                <div class="mb-4 flex gap-2 items-center">
                    @if(in_array(auth()->user()->role, ['super_admin', 'co_admin']))
                        @if(empty($businessId))
                            <button disabled
                                    class="bg-gray-400 text-white font-bold py-2 px-4 rounded inline-block cursor-not-allowed"
                                    title="Select a business first">
                                Add Category
                            </button>
                            <button disabled
                                    class="bg-gray-400 text-white font-bold py-2 px-4 rounded inline-block cursor-not-allowed"
                                    title="Select a business first">
                                Add Sub-Category
                            </button>
                            <span class="text-sm text-gray-500 ml-2">Select a business first</span>
                        @else
                            <a href="{{ route('categories.create', ['business_id' => $businessId]) }}"
                               class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded inline-block">
                                Add Category
                            </a>
                            <a href="{{ route('categories.create.sub', ['business_id' => $businessId]) }}"
                               class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded inline-block">
                                Add Sub-Category
                            </a>
                        @endif
                    @endif
                </div>
                
                <!-- Business filter -->
                <form method="GET" class="mb-4">
                    <label for="business_id" class="block text-sm font-medium text-gray-700">Filter by Business</label>
                    <select name="business_id" id="business_id" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" onchange="this.form.submit()">
                        <option value="" selected>Select Business</option>
                        @foreach($businesses as $business)
                            <option value="{{ $business->id }}" {{ request('business_id') == $business->id ? 'selected' : '' }}>{{ $business->name }}</option>
                        @endforeach
                    </select>
                </form>
            </div>

            <div class="p-6">
                @if(session('success'))
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                        {{ session('success') }}
                    </div>
                @endif

                @if(session('error'))
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                        {{ session('error') }}
                    </div>
                @endif

                @if(empty($businessId))
                    <div class="text-center text-gray-500 py-8">
                        <p class="text-lg">Select a business to view categories</p>
                    </div>
                @else
                    <div class="overflow-x-auto">
                        <table class="min-w-full bg-white">
                            <thead>
                                <tr>
                                    <th class="py-2 px-4 border-b">#</th>
                                    <th class="py-2 px-4 border-b">Name</th>
                                    <th class="py-2 px-4 border-b">Type</th>
                                    <th class="py-2 px-4 border-b">Business</th>
                                    <th class="py-2 px-4 border-b">Limit</th>
                                    <th class="py-2 px-4 border-b">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($categories as $category)
                                    @include('categories._category-row', ['category' => $category, 'loop' => $loop])
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection