@extends('layouts.aura-main')

@section('main-content')
<div x-data="{ 
    openModal: {{ $errors->any() ? 'true' : 'false' }}, 
    deleteModal: false,
    errorModal: {{ $errors->any() ? 'true' : 'false' }},
    editMode: false,
    loading: false,
    uploading: false,
    searchQuery: '', 
    
    // Form Data
    catId: '',
    catName: '',
    catType: 'debit',
    actionUrl: '',

    setEdit(category) {
        this.editMode = true;
        this.catId = category.id;
        this.catName = category.name;
        this.catType = category.type;
        this.actionUrl = '{{ url('accounting/categories') }}/' + category.id;
        this.openModal = true;
    },

    setCreate() {
        this.editMode = false;
        this.catId = '';
        this.catName = '';
        this.catType = 'debit';
        this.actionUrl = '{{ route('accounting.categories.store') }}';
        this.openModal = true;
    },

    confirmDelete(id, name) {
        this.catId = id;
        this.catName = name;
        this.deleteModal = true;
    },

    matchesSearch(name) {
        const query = this.searchQuery.toLowerCase();
        return name.toLowerCase().includes(query);
    }
}">
    <div class="mb-6 flex flex-col lg:flex-row justify-between items-start lg:items-end gap-4">
        <div>
            <h1 class="text-lg font-bold text-slate-900 leading-tight">Primary Categories</h1>
            <p class="text-slate-500 text-[11px] font-medium uppercase tracking-widest text-indigo-600">Core Accounting Pillars</p>
        </div>
        
        <div class="flex flex-wrap items-center gap-2 w-full lg:w-auto">
            <div class="flex items-center bg-slate-100 rounded-lg p-1 border border-slate-200">
                <a href="{{ route('accounting.categories.template') }}" 
                   class="text-[10px] font-bold text-slate-600 hover:text-indigo-600 px-3 py-1 transition flex items-center gap-1">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0L8 8m4-4v12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                    Template
                </a>
                <div class="w-px h-4 bg-slate-200"></div>
                <form action="{{ route('accounting.categories.import') }}" method="POST" enctype="multipart/form-data" class="inline-flex">
                    @csrf
                    <input type="file" name="file" id="catFileInput" class="hidden" @change="uploading = true; $el.form.submit()">
                    <button type="button" @click="document.getElementById('catFileInput').click()" 
                            class="text-[10px] font-bold text-indigo-600 hover:text-indigo-800 px-3 py-1 transition flex items-center gap-2">
                        <span x-show="!uploading" class="flex items-center gap-1">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                            Import
                        </span>
                        <span x-show="uploading" class="animate-spin h-3 w-3 border-2 border-indigo-600 border-t-transparent rounded-full"></span>
                    </button>
                </form>
            </div>

            <div class="relative flex-grow lg:w-40">
                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-slate-400">
                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                </span>
                <input type="text" x-model="searchQuery" placeholder="Search pillars..." class="w-full bg-white border border-slate-200 rounded px-3 py-1.5 pl-9 text-xs outline-none focus:border-indigo-500 transition shadow-sm">
            </div>
            
            <button @click="setCreate()" class="bg-indigo-600 text-white px-4 py-1.5 rounded text-[11px] font-bold shadow-sm hover:bg-indigo-700 transition">
                + Add Category
            </button>
        </div>
    </div>

    <div class="bg-white border border-slate-200 rounded shadow-sm overflow-hidden">
        <table class="w-full text-left border-collapse">
            <thead class="bg-slate-50 border-b border-slate-200 uppercase text-slate-400 text-[10px] font-bold">
                <tr>
                    <th class="px-4 py-2">Category Name</th>
                    <th class="px-4 py-2">Normal Balance</th>
                    <th class="px-4 py-2 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="text-xs">
                @forelse($categories as $category)
                <tr x-show="matchesSearch('{{ addslashes($category->name) }}')" 
                    class="border-b border-slate-100 hover:bg-slate-50/50 transition" x-cloak x-transition.opacity>
                    <td class="px-4 py-2 font-semibold text-slate-700">{{ $category->name }}</td>
                    <td class="px-4 py-2 uppercase font-bold text-slate-400 text-[9px]">{{ $category->type }}</td>
                    <td class="px-4 py-2 text-right flex justify-end gap-3">
                        <button @click="setEdit({ id: '{{ $category->id }}', name: '{{ addslashes($category->name) }}', type: '{{ $category->type }}' })" 
                                class="text-indigo-600 hover:underline">Edit</button>
                        
                        <button @click="confirmDelete('{{ $category->id }}', '{{ addslashes($category->name) }}')" 
                                class="text-red-400 hover:text-red-600">Delete</button>
                    </td>
                </tr>
                @empty
                <tr><td colspan="3" class="px-4 py-12 text-center text-slate-400 italic">No categories found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div x-show="openModal" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 backdrop-blur-sm" x-cloak x-transition>
        <div class="bg-white rounded shadow-xl w-full max-w-md p-6 border border-slate-200">
            <h2 class="text-sm font-bold text-slate-900 mb-4" x-text="editMode ? 'Edit Primary Category' : 'New Primary Category'"></h2>
            <form :action="actionUrl" method="POST" @submit="loading = true">
                @csrf
                <template x-if="editMode"><input type="hidden" name="_method" value="PUT"></template>
                <div class="space-y-4">
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Category Name</label>
                        <input type="text" name="name" x-model="catName" class="w-full bg-slate-50 border border-slate-200 rounded px-3 py-2 text-xs outline-none focus:border-indigo-500" required>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Normal Balance</label>
                        <select name="type" x-model="catType" class="w-full bg-slate-50 border border-slate-200 rounded px-3 py-2 text-xs outline-none">
                            <option value="debit">Debit</option>
                            <option value="credit">Credit</option>
                        </select>
                    </div>
                </div>
                <div class="flex justify-end gap-2 pt-4 mt-6 border-t border-slate-100">
                    <button type="button" @click="openModal = false" class="text-[11px] font-bold text-slate-400 px-4 py-2 hover:text-slate-600">Cancel</button>
                    <button type="submit" :disabled="loading" class="bg-indigo-600 text-white text-[11px] font-bold px-5 py-2 rounded shadow-sm hover:bg-indigo-700 transition">
                        <span x-text="loading ? 'Processing...' : 'Save Category'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div x-show="deleteModal" class="fixed inset-0 z-[60] flex items-center justify-center bg-slate-900/60 backdrop-blur-sm" x-cloak x-transition>
        <div class="bg-white rounded-lg shadow-2xl w-full max-w-sm p-6 border border-slate-200 text-center">
            <div class="w-12 h-12 rounded-full bg-red-50 text-red-500 flex items-center justify-center mx-auto mb-4">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
            </div>
            <h3 class="text-sm font-bold text-slate-900 mb-2">Delete <span x-text="catName"></span>?</h3>
            <p class="text-slate-500 text-[11px] mb-6 px-4">This action is dangerous. Removing a primary pillar will affect all linked groups, types, and ledger accounts.</p>
            <form :action="'{{ url('accounting/categories') }}/' + catId" method="POST">
                @csrf @method('DELETE')
                <div class="flex flex-col gap-2">
                    <button type="submit" class="w-full bg-red-500 text-white text-[11px] font-bold py-2.5 rounded shadow-sm hover:bg-red-600 transition">Confirm Delete Pillar</button>
                    <button type="button" @click="deleteModal = false" class="w-full text-slate-400 text-[11px] font-bold py-2 hover:text-slate-600">Nevermind, Go Back</button>
                </div>
            </form>
        </div>
    </div>

    <div x-show="errorModal" class="fixed inset-0 z-[70] flex items-center justify-center bg-slate-900/60 backdrop-blur-sm" x-cloak x-transition>
        <div class="bg-white rounded-lg shadow-2xl w-full max-w-md p-6 border border-slate-200" @click.away="errorModal = false">
            <div class="w-12 h-12 rounded-full bg-red-50 text-red-500 flex items-center justify-center mx-auto mb-4">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
            </div>
            <h3 class="text-sm font-bold text-slate-900 text-center mb-2">Import Blocked</h3>
            <div class="max-h-48 overflow-y-auto bg-red-50 rounded border border-red-100 p-3 mb-6">
                <ul class="space-y-2 text-[10px] text-red-600">
                    @foreach($errors->all() as $error)
                        <li>• {{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <button type="button" @click="errorModal = false" class="w-full bg-slate-900 text-white text-[11px] font-bold py-2.5 rounded hover:bg-slate-800 transition">Fix and Retry</button>
        </div>
    </div>
</div>
@endsection