@extends('layouts.branch')

@section('title', 'Doctors')
@section('header', 'Doctor Management')

@section('content')
<div class="space-y-6" x-data="{
    search: '{{ request('search', '') }}',
    sortBy: '{{ request('sort_by', 'created_at') }}',
    sortDir: '{{ request('sort_dir', 'desc') }}',
    limit: '{{ request('limit', '10') }}',
    activeView: 'list',
    loading: false,
    
    async updateTable(url = null) {
        this.loading = true;
        if (!url) {
            url = '{{ route('branch.doctors.index') }}?' + new URLSearchParams({
                search: this.search,
                sort_by: this.sortBy,
                sort_dir: this.sortDir,
                limit: this.limit
            }).toString();
        }
        
        try {
            const response = await fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            const html = await response.text();
            document.getElementById('doctors-table-container').innerHTML = html;
            
            this.bindPagination();
            window.history.pushState({}, '', url);
        } catch (error) {
            console.error('Search failed:', error);
        } finally {
            this.loading = false;
        }
    },

    sort(field) {
        if (this.sortBy === field) {
            this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
        } else {
            this.sortBy = field;
            this.sortDir = 'asc';
        }
        this.updateTable();
    },

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

    async toggleStatus(url) {
        try {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            if (response.ok) {
                this.updateTable(window.location.href);
            }
        } catch (error) {
            console.error('Status toggle failed:', error);
        }
    },

    exportPdf() {
        const url = '{{ route('branch.doctors.export-pdf') }}?' + new URLSearchParams({
            search: this.search
        }).toString();
        window.location.href = url;
    }
}" x-init="bindPagination()">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Doctors', 'url' => route('branch.doctors.index')]
        ]
    ])

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div class="flex items-center gap-4 flex-1">
            <div class="max-w-md relative flex-1">
                <input type="text" x-model="search" @input.debounce.500ms="updateTable()" 
                    placeholder="Search by name, phone or email..." 
                    class="w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-400">
                <div class="absolute left-3 top-2.5 text-slate-400">
                    <svg x-show="!loading" class="h-5 w-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"/>
                    </svg>
                    <svg x-show="loading" class="animate-spin h-5 w-5" fill="none" stroke="currentColor" 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>
                </div>
            </div>

            <select x-model="limit" @change="updateTable()" class="px-3 py-2 border border-slate-200 rounded-lg text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="10">10 Rows</option>
                <option value="50">50 Rows</option>
                <option value="100">100 Rows</option>
                <option value="all">All Records</option>
            </select>
        </div>

        <div class="flex items-center gap-3">
            <div class="flex items-center bg-slate-100 p-1 rounded-xl mr-2">
                <button @click="activeView = 'list'" :class="activeView === 'list' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'" class="p-2 rounded-lg transition-all">
                    <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="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                </button>
                <button @click="activeView = 'grid'" :class="activeView === 'grid' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'" class="p-2 rounded-lg transition-all">
                    <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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
                </button>
            </div>
            <button @click="exportPdf()" class="flex items-center px-4 py-2 bg-white border border-slate-200 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors text-sm font-medium">
                <svg class="mr-2 h-4 w-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                </svg>
                Export PDF
            </button>
            <a href="{{ route('branch.doctors.create') }}" class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm shadow-indigo-200 text-sm font-medium">
                <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Register Doctor
            </a>
        </div>
    </div>

    <div id="doctors-table-container" :class="loading ? 'opacity-50 pointer-events-none transition-opacity' : 'transition-opacity'">
        <template x-if="activeView === 'list'">
            @include('branch.doctors._table')
        </template>
        <template x-if="activeView === 'grid'">
            @include('branch.doctors._grid')
        </template>
    </div>
</div>
@endsection