@extends('layouts.aura-main')

@section('main-content')
<div x-data="{ 
    loading: false,
    searchQuery: '',
    
    matchesSearch(label) {
        return label.toLowerCase().includes(this.searchQuery.toLowerCase());
    }
}">
    <div class="mb-8 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">Accounting Mappings</h1>
            <p class="text-slate-500 text-[11px] font-medium uppercase tracking-widest text-indigo-600">Automated Ledger Integration</p>
        </div>

        <div class="relative w-full lg:w-64">
            <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 operations..." 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>
    </div>

    <form action="{{ route('accounting.mappings.store') }}" method="POST" @submit="loading = true">
        @csrf
        <div class="grid grid-cols-1 gap-6">
            @foreach($sections as $sectionName => $items)
            <div class="bg-white border border-slate-200 rounded shadow-sm overflow-hidden" 
                 x-show="@foreach($items as $label) matchesSearch('{{ addslashes($label) }}') || @endforeach false"
                 x-transition>
                
                <div class="bg-slate-50 px-4 py-2 border-b border-slate-200 flex items-center justify-between">
                    <h3 class="text-[10px] font-black uppercase tracking-widest text-slate-400">{{ $sectionName }}</h3>
                    <svg class="w-3 h-3 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>

                <div class="divide-y divide-slate-100">
                    @foreach($items as $key => $label)
                    <div class="p-4 flex flex-col md:flex-row md:items-center gap-4 hover:bg-slate-50/30 transition" x-show="matchesSearch('{{ addslashes($label) }}')">
                        <div class="md:w-1/3">
                            <p class="text-xs font-bold text-slate-700">{{ $label }}</p>
                            <p class="text-[9px] text-slate-400 font-mono tracking-tighter uppercase">{{ $key }}</p>
                        </div>
                        
                        <div class="md:w-2/3">
                            <select name="mappings[{{ $key }}]" class="w-full bg-slate-50 border border-slate-200 rounded px-3 py-2 text-xs outline-none focus:border-indigo-500 focus:bg-white transition">
                                <option value="">-- Unmapped (Manual Entry) --</option>
                                @foreach($accounts as $account)
                                    <option value="{{ $account->id }}" 
                                        @if(isset($currentMappings[$key]) && $currentMappings[$key] == $account->id) selected @endif>
                                        {{ $account->code }} &middot; {{ $account->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>

        <div class="mt-8 mb-20 flex items-center justify-end gap-3 bg-white p-4 border border-slate-200 rounded shadow-lg sticky bottom-4">
            <p class="text-[10px] text-slate-400 italic mr-auto">Changes here affect how AuraAccountify handles future automated transactions.</p>
            <a href="{{ route('accounting.coa') }}" class="text-[11px] font-bold text-slate-400 hover:text-slate-600 px-4">View COA</a>
            <button type="submit" :disabled="loading" class="bg-indigo-600 text-white text-[11px] font-bold px-8 py-2 rounded shadow-md hover:bg-indigo-700 transition flex items-center gap-2">
                <template x-if="loading">
                    <svg class="animate-spin h-3 w-3 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                </template>
                <span x-text="loading ? 'Updating Engine...' : 'Apply Mappings'"></span>
            </button>
        </div>
    </form>
</div>
@endsection