@extends('layouts.branch')

@section('title', 'Clinical Departments')
@section('header', 'Operational Units')

@section('content')
<div class="space-y-6" x-data="{
    activeIds: {{ json_encode($activeDepartmentIds) }},
    loading: null,

    async toggle(id, url) {
        if (this.loading) return;
        this.loading = id;
        
        try {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            const data = await response.json();
            
            if (data.status === 'success') {
                if (this.activeIds.includes(id)) {
                    this.activeIds = this.activeIds.filter(i => i !== id);
                } else {
                    this.activeIds.push(id);
                }
            }
        } catch (error) {
            console.error('Toggle failed:', error);
        } finally {
            this.loading = null;
        }
    }
}">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Operational Units', 'url' => route('branch.departments')]
        ]
    ])

    <div class="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm">
        <h2 class="text-2xl font-black text-slate-800 uppercase tracking-tight">Department Activation</h2>
        <p class="text-slate-500 font-medium mt-1 uppercase tracking-widest text-[10px]">
            Enable clinical departments operating at this facility to activate them for registrations and medical staffing.
        </p>
    </div>

    <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50/50 border-b border-slate-100">
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Unit Information</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Operational Scope</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Current Status</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @foreach($allDepartments as $dept)
                        <tr class="group hover:bg-slate-50/30 transition-colors">
                            <td class="px-8 py-6">
                                <div class="flex items-center gap-4">
                                    <div class="h-10 w-10 rounded-2xl flex items-center justify-center font-black transition-colors"
                                        :class="activeIds.includes({{ $dept->id }}) ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-400'">
                                        {{ substr($dept->name, 0, 1) }}
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-black text-slate-800 uppercase tracking-tight">{{ $dept->name }}</h4>
                                        <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1">ID: #{{ str_pad($dept->id, 3, '0', STR_PAD_LEFT) }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-8 py-6">
                                <div class="text-xs text-slate-600 font-medium max-w-md leading-relaxed">
                                    {!! $dept->description ?? 'Specialized clinical care unit functioning as a core operational department.' !!}
                                </div>
                            </td>
                            <td class="px-8 py-6">
                                <div class="flex items-center gap-2">
                                    <div class="h-1.5 w-1.5 rounded-full" :class="activeIds.includes({{ $dept->id }}) ? 'bg-indigo-500' : 'bg-slate-300'"></div>
                                    <span class="text-[10px] font-black uppercase tracking-widest" :class="activeIds.includes({{ $dept->id }}) ? 'text-indigo-600' : 'text-slate-400'"
                                          x-text="activeIds.includes({{ $dept->id }}) ? 'Operating' : 'Inactive'"></span>
                                </div>
                            </td>
                            <td class="px-8 py-6 text-right">
                                <button @click="toggle({{ $dept->id }}, '{{ route('branch.departments.toggle', $dept->id) }}')"
                                    class="px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-sm inline-flex items-center justify-center gap-2 min-w-[120px]"
                                    :class="activeIds.includes({{ $dept->id }}) ? 'bg-slate-900 text-white hover:bg-rose-600' : 'bg-indigo-600 text-white hover:bg-slate-900'">
                                    
                                    <template x-if="loading === {{ $dept->id }}">
                                        <svg class="animate-spin h-3 w-3" 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="activeIds.includes({{ $dept->id }}) ? 'Deactivate' : 'Activate'"></span>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection