@extends('layouts.admin')

@section('title', 'Roles')
@section('header', 'Role Management')

@section('content')
<div class="space-y-6" x-data="{
    search: '{{ request('search') }}',
    sortBy: '{{ request('sort_by', 'name') }}',
    sortDir: '{{ request('sort_dir', 'asc') }}',
    loading: false,
    
    async updateTable(url = null) {
        this.loading = true;
        if (!url) {
            url = '{{ route('admin.masters.roles.index') }}?' + new URLSearchParams({
                search: this.search,
                sort_by: this.sortBy,
                sort_dir: this.sortDir
            }).toString();
        }
        
        try {
            const response = await fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            const html = await response.text();
            document.getElementById('roles-table-container').innerHTML = html;
            
            // Re-bind pagination links
            this.bindPagination();
            
            // Update URL in browser without reload
            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('.roles-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);
        }
    }
}" x-init="bindPagination()">
    @include('partials.admin._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Masters', 'url' => '#'],
            ['name' => 'Roles', 'url' => route('admin.masters.roles.index')]
        ]
    ])

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div class="flex-1 max-w-md relative">
            <input type="text" x-model="search" @input.debounce.500ms="updateTable()" 
                placeholder="Search roles..." 
                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">
            <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>
        <div class="flex items-center gap-3">
            <a :href="'{{ route('admin.masters.roles.export-pdf') }}?' + new URLSearchParams({ search: search, sort_by: sortBy, sort_dir: sortDir }).toString()" 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">
                <svg class="mr-2 h-5 w-5 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
            </a>
            <a href="{{ route('admin.masters.roles.create') }}" class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Add Role
            </a>
        </div>
    </div>

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