@extends('layouts.branch')

@section('title', 'Employee Master')
@section('header', 'Employee Master')

@section('content')
<div class="space-y-10" x-data="{ 
    id_search: '',
    name_search: '',
    phone_search: '',
    type_filter: 'all',
    sort_by: 'created_at',
    sort_dir: 'desc',
    loading: false,

    fetchEmployees(url = null) {
        this.loading = true;
        if (!url) {
            url = '{{ route('branch.employees.index') }}?' + 
                  'id_search=' + this.id_search + 
                  '&name_search=' + this.name_search + 
                  '&phone_search=' + this.phone_search + 
                  '&type_filter=' + this.type_filter +
                  '&sort_by=' + this.sort_by +
                  '&sort_dir=' + this.sort_dir;
        }

        fetch(url, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(response => response.text())
        .then(html => {
            document.getElementById('table-container').innerHTML = html;
            this.loading = false;
            this.bindPagination();
            window.history.pushState({}, '', url);
        });
    },

    bindPagination() {
        document.querySelectorAll('.ajax-pagination a').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                this.fetchEmployees(link.getAttribute('href'));
            });
        });
    },

    toggleSort(field) {
        if (this.sort_by === field) {
            this.sort_dir = this.sort_dir === 'asc' ? 'desc' : 'asc';
        } else {
            this.sort_by = field;
            this.sort_dir = 'asc';
        }
        this.fetchEmployees();
    }
}" x-init="bindPagination()">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-8 bg-white p-10 rounded-[3rem] shadow-sm border border-slate-100 italic relative overflow-hidden">
        <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-50/50 rounded-full -mr-32 -mt-32 blur-3xl"></div>
        <div class="relative z-10">
            <h2 class="text-4xl font-black text-slate-800 tracking-tighter uppercase leading-none">Employee Hierarchy</h2>
            <p class="text-[11px] text-slate-400 font-bold tracking-widest uppercase mt-3 italic max-w-md">Comprehensive management of clinical and non-clinical workforce assets.</p>
        </div>
        <div class="flex items-center gap-4 relative z-10">
            <a href="{{ route('branch.employees.create') }}" class="flex items-center gap-3 px-8 py-4 bg-indigo-600 text-white rounded-[2rem] font-black uppercase tracking-widest text-[11px] hover:bg-slate-900 shadow-2xl shadow-indigo-200 transition-all group">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
                Add New Employee
            </a>
        </div>
    </div>

    <div class="bg-white rounded-[3rem] shadow-sm border border-slate-100 overflow-hidden">
        <div class="p-8 border-b border-slate-50">
            <div class="flex flex-wrap items-center gap-4">
                <!-- ID search -->
                <div class="relative flex-1 min-w-[150px] group">
                    <input type="text" x-model="id_search" @input.debounce.500ms="fetchEmployees()" placeholder="Search ID..." 
                        class="w-full pl-10 pr-4 py-3 bg-slate-50 border-none rounded-2xl focus:ring-4 focus:ring-indigo-50 transition-all font-bold text-xs placeholder:text-slate-300">
                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-300 group-focus-within:text-indigo-500 transition-colors">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-4 0a2 2 0 114 0"/></svg>
                    </div>
                </div>

                <!-- Name search -->
                <div class="relative flex-[2] min-w-[200px] group">
                    <input type="text" x-model="name_search" @input.debounce.500ms="fetchEmployees()" placeholder="Search Employee Name..." 
                        class="w-full pl-10 pr-4 py-3 bg-slate-50 border-none rounded-2xl focus:ring-4 focus:ring-indigo-50 transition-all font-bold text-xs placeholder:text-slate-300">
                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-300 group-focus-within:text-indigo-500 transition-colors">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    </div>
                </div>

                <!-- Phone search -->
                <div class="relative flex-1 min-w-[150px] group">
                    <input type="text" x-model="phone_search" @input.debounce.500ms="fetchEmployees()" placeholder="Search Phone..." 
                        class="w-full pl-10 pr-4 py-3 bg-slate-50 border-none rounded-2xl focus:ring-4 focus:ring-indigo-50 transition-all font-bold text-xs placeholder:text-slate-300">
                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-300 group-focus-within:text-indigo-500 transition-colors">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                    </div>
                </div>

                <!-- Type filter -->
                <div class="relative flex-1 min-w-[150px]">
                    <select x-model="type_filter" @change="fetchEmployees()" 
                        class="w-full pl-10 pr-8 py-3 bg-slate-50 border-none rounded-2xl focus:ring-4 focus:ring-indigo-50 transition-all font-bold text-xs text-slate-600 appearance-none cursor-pointer">
                        <option value="all">All Staff Types</option>
                        <option value="clinical">Clinical Only</option>
                        <option value="non-clinical">Non-Clinical</option>
                    </select>
                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-300">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
                    </div>
                    <div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none text-slate-300">
                        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </div>
                </div>
            </div>
        </div>

        <div id="table-container" :class="loading ? 'opacity-50 pointer-events-none' : ''">
            @include('branch.employees._table')
        </div>
    </div>
</div>
@endsection