@extends('layouts.app')

@section('title', 'Permission Board')

@section('content')
<div class="p-6" id="permission-board-app">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h5 class="text-lg font-semibold text-gray-900">Permission Board</h5>
            <div class="flex gap-2">
                <button @click="showRequestModal = true" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-plus mr-2"></i> New Permission Request
                </button>
                <button @click="exportPermissions" class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-download mr-2"></i> Export
                </button>
            </div>
        </div>
        
        <div class="p-6">
            <!-- Filters -->
            <form @submit.prevent="loadPermissions" class="mb-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                        <select v-model="filters.status" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                            <option value="">All Status</option>
                            <option value="pending">Pending</option>
                            <option value="approved">Approved</option>
                            <option value="rejected">Rejected</option>
                        </select>
                    </div>
                    <div>
                        <label for="user_id" class="block text-sm font-medium text-gray-700 mb-2">Employee</label>
                        <select v-model="filters.user_id" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                            <option value="">All Employees</option>
                            <option v-for="user in users" :value="user.id" :key="user.id">
                                @{{ user.first_name + ' ' + user.last_name }}
                            </option>
                        </select>
                    </div>
                    <div>
                        <label for="date_from" class="block text-sm font-medium text-gray-700 mb-2">From Date</label>
                        <input type="date" v-model="filters.date_from" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                    </div>
                    <div>
                        <label for="date_to" class="block text-sm font-medium text-gray-700 mb-2">To Date</label>
                        <input type="date" v-model="filters.date_to" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                    </div>
                    <div class="md:col-span-4 flex gap-2">
                        <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            <i class="fas fa-filter mr-2"></i> Filter
                        </button>
                        <button type="button" @click="clearFilters" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            <i class="fas fa-times mr-2"></i> Clear
                        </button>
                    </div>
                </div>
            </form>

            <!-- Statistics Cards -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6" v-if="statistics">
                <div class="bg-blue-50 p-4 rounded-lg">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
                            <i class="fas fa-list text-white"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-600">Total Requests</p>
                            <p class="text-2xl font-bold text-gray-900">@{{ statistics.total_requests }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-yellow-50 p-4 rounded-lg">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
                            <i class="fas fa-clock text-white"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-600">Pending</p>
                            <p class="text-2xl font-bold text-gray-900">@{{ statistics.pending_requests }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-green-50 p-4 rounded-lg">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                            <i class="fas fa-check text-white"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-600">Approved</p>
                            <p class="text-2xl font-bold text-gray-900">@{{ statistics.approved_requests }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-red-50 p-4 rounded-lg">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
                            <i class="fas fa-times text-white"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-600">Rejected</p>
                            <p class="text-2xl font-bold text-gray-900">@{{ statistics.rejected_requests }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Permission Requests Table -->
            <div class="overflow-x-auto shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                <table class="min-w-full divide-y divide-gray-300">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Permission Type</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date & Time</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reason</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Applied On</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr v-if="loading">
                            <td colspan="9" class="px-6 py-12 text-center">
                                <i class="fas fa-spinner fa-spin text-2xl text-gray-400"></i>
                                <p class="mt-2 text-gray-500">Loading permission requests...</p>
                            </td>
                        </tr>
                        <tr v-else-if="permissions.length === 0">
                            <td colspan="9" class="px-6 py-12 text-center">
                                <i class="fas fa-inbox text-2xl text-gray-400"></i>
                                <p class="mt-2 text-gray-500">No permission requests found</p>
                            </td>
                        </tr>
                        <tr v-for="permission in permissions" :key="permission.id" class="hover:bg-gray-50 transition-colors duration-150">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">@{{ permission.id }}</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="h-10 w-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-sm">
                                        @{{ permission.user.first_name ? permission.user.first_name.charAt(0).toUpperCase() : 'U' }}
                                    </div>
                                    <div class="ml-3">
                                        <div class="text-sm font-medium text-gray-900">@{{ permission.user.first_name }} @{{ permission.user.last_name }}</div>
                                        <div class="text-sm text-gray-500">@{{ permission.user.email }}</div>
                                        <div v-if="permission.user.employee_code" class="text-xs text-gray-400">@{{ permission.user.employee_code }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    @{{ permission.permission_type }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <div class="font-medium">@{{ permission.permission_date }}</div>
                                <div class="text-xs text-gray-500">@{{ permission.from_time }} - @{{ permission.to_time }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800">
                                    @{{ permission.duration_hours }}h
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-900">
                                <div class="max-w-xs truncate" :title="permission.reason">
                                    @{{ permission.reason }}
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span :class="getStatusClass(permission.status)" class="inline-flex px-2 py-1 text-xs font-semibold rounded-full">
                                    @{{ permission.status }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">@{{ formatDate(permission.created_at) }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    <button @click="viewPermission(permission)" class="inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-blue-600 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-150">
                                        <i class="fas fa-eye mr-1"></i> View
                                    </button>
                                    <button v-if="permission.status === 'pending'" @click="approvePermission(permission)" class="inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-green-600 bg-green-50 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-150">
                                        <i class="fas fa-check mr-1"></i> Approve
                                    </button>
                                    <button v-if="permission.status === 'pending'" @click="rejectPermission(permission)" class="inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-red-600 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-150">
                                        <i class="fas fa-times mr-1"></i> Reject
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Permission Request Modal -->
    <div v-if="showRequestModal" class="fixed inset-0 bg-gray-900 bg-opacity-75 overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
        <div class="relative w-full max-w-2xl bg-white rounded-xl shadow-2xl">
            <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 rounded-t-xl">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-semibold text-gray-900">New Permission Request</h3>
                    <button @click="showRequestModal = false" class="text-gray-400 hover:text-gray-600 transition-colors duration-200">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            
            <div class="px-6 py-6">
                <form @submit.prevent="submitPermissionRequest">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Permission Type</label>
                            <select v-model="newRequest.permission_type_id" required class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200">
                                <option value="">Select Permission Type</option>
                                <option v-for="type in permissionTypes" :value="type.id" :key="type.id">
                                    @{{ type.name }}
                                </option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Date</label>
                            <input type="date" v-model="newRequest.permission_date" required class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Time Duration</label>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-xs text-gray-600 mb-1">From Time</label>
                                    <input type="time" v-model="newRequest.from_time" required class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200">
                                </div>
                                <div>
                                    <label class="block text-xs text-gray-600 mb-1">To Time</label>
                                    <input type="time" v-model="newRequest.to_time" required class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200">
                                </div>
                            </div>
                        </div>
                        
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Reason</label>
                            <textarea v-model="newRequest.reason" required rows="4" class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200 resize-none" placeholder="Please provide a detailed reason for your permission request..."></textarea>
                        </div>
                        
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Notes (Optional)</label>
                            <textarea v-model="newRequest.notes" rows="3" class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200 resize-none" placeholder="Any additional information or details that may help with your request..."></textarea>
                        </div>
                    </div>
                    
                    <div class="mt-8 flex justify-end space-x-3 pt-6 border-t border-gray-200">
                        <button type="button" @click="showRequestModal = false" class="px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200">
                            Cancel
                        </button>
                        <button type="submit" :disabled="submitting" class="px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center">
                            <i v-if="submitting" class="fas fa-spinner fa-spin mr-2"></i>
                            <i v-else class="fas fa-paper-plane mr-2"></i>
                            Submit Request
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Permission Details Modal -->
    <div v-if="showDetailsModal" class="fixed inset-0 bg-gray-900 bg-opacity-75 overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
        <div class="relative w-full max-w-lg bg-white rounded-xl shadow-2xl">
            <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 rounded-t-xl">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-semibold text-gray-900">Permission Details</h3>
                    <button @click="showDetailsModal = false" class="text-gray-400 hover:text-gray-600 transition-colors duration-200">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            
            <div class="px-6 py-6">
                <div v-if="selectedPermission" class="space-y-4">
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <div class="h-12 w-12 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-semibold shadow-sm">
                                @{{ selectedPermission.user.first_name ? selectedPermission.user.first_name.charAt(0).toUpperCase() : 'U' }}
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-900">@{{ selectedPermission.user.first_name }} @{{ selectedPermission.user.last_name }}</p>
                                <p class="text-xs text-gray-500">@{{ selectedPermission.user.email }}</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 gap-4">
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Permission Type</label>
                            <p class="mt-1 text-sm text-gray-900 font-medium">@{{ selectedPermission.permission_type }}</p>
                        </div>
                        
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Date & Time</label>
                            <p class="mt-1 text-sm text-gray-900 font-medium">@{{ selectedPermission.permission_period }}</p>
                        </div>
                        
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Duration</label>
                            <p class="mt-1 text-sm text-gray-900 font-medium">@{{ selectedPermission.duration_hours }} hours</p>
                        </div>
                        
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Reason</label>
                            <p class="mt-1 text-sm text-gray-900">@{{ selectedPermission.reason }}</p>
                        </div>
                        
                        <div v-if="selectedPermission.notes" class="bg-white border border-gray-200 rounded-lg p-4">
                            <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Additional Notes</label>
                            <p class="mt-1 text-sm text-gray-900">@{{ selectedPermission.notes }}</p>
                        </div>
                        
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</label>
                            <div class="mt-2">
                                <span :class="getStatusClass(selectedPermission.status)" class="inline-flex px-3 py-1 text-xs font-semibold rounded-full">
                                    @{{ selectedPermission.status }}
                                </span>
                            </div>
                        </div>
                        
                        <div v-if="selectedPermission.approval_notes" class="bg-white border border-gray-200 rounded-lg p-4">
                            <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Approval Notes</label>
                            <p class="mt-1 text-sm text-gray-900">@{{ selectedPermission.approval_notes }}</p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 flex justify-end">
                    <button @click="showDetailsModal = false" class="px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const { createApp } = Vue;

createApp({
    data() {
        return {
            permissions: [],
            permissionTypes: [],
            users: [],
            statistics: null,
            loading: false,
            submitting: false,
            showRequestModal: false,
            showDetailsModal: false,
            selectedPermission: null,
            filters: {
                status: '',
                user_id: '',
                date_from: '',
                date_to: ''
            },
            newRequest: {
                permission_type_id: '',
                permission_date: '',
                from_time: '',
                to_time: '',
                reason: '',
                notes: ''
            }
        }
    },
    mounted() {
        this.loadPermissionTypes();
        this.loadUsers();
        this.loadPermissions();
        this.loadStatistics();
    },
    methods: {
        async loadPermissions() {
            this.loading = true;
            try {
                const response = await axios.get('/api/v1/admin/permissions', {
                    params: this.filters
                });
                this.permissions = response.data.data.permissions;
            } catch (error) {
                console.error('Error loading permissions:', error);
                this.$toast?.error?.('Failed to load permission requests');
            } finally {
                this.loading = false;
            }
        },
        async loadPermissionTypes() {
            try {
                const response = await axios.get('/api/v1/employee/permission/types');
                this.permissionTypes = response.data.data.permission_types;
            } catch (error) {
                console.error('Error loading permission types:', error);
            }
        },
        async loadUsers() {
            try {
                const response = await axios.get('/api/users');
                this.users = response.data.data || [];
            } catch (error) {
                console.error('Error loading users:', error);
            }
        },
        async loadStatistics() {
            try {
                const response = await axios.get('/api/v1/admin/permissions/statistics');
                this.statistics = response.data.data.statistics;
            } catch (error) {
                console.error('Error loading statistics:', error);
            }
        },
        async submitPermissionRequest() {
            this.submitting = true;
            try {
                const response = await axios.post('/api/v1/employee/permission/request', this.newRequest);
                this.$toast?.success?.(response.data.message);
                this.showRequestModal = false;
                this.resetNewRequest();
                this.loadPermissions();
                this.loadStatistics();
            } catch (error) {
                console.error('Error submitting request:', error);
                const message = error.response?.data?.message || 'Failed to submit permission request';
                this.$toast?.error?.(message);
            } finally {
                this.submitting = false;
            }
        },
        async approvePermission(permission) {
            if (!confirm(`Are you sure you want to approve this permission request for ${permission.user.first_name} ${permission.user.last_name}?`)) {
                return;
            }
            
            try {
                const response = await axios.post(`/api/v1/admin/permissions/${permission.id}/approve`);
                this.$toast?.success?.(response.data.message);
                this.loadPermissions();
                this.loadStatistics();
            } catch (error) {
                console.error('Error approving permission:', error);
                const message = error.response?.data?.message || 'Failed to approve permission request';
                this.$toast?.error?.(message);
            }
        },
        async rejectPermission(permission) {
            const reason = prompt('Please enter rejection reason:');
            if (!reason) return;
            
            try {
                const response = await axios.post(`/api/v1/admin/permissions/${permission.id}/reject`, {
                    rejection_reason: reason
                });
                this.$toast?.success?.(response.data.message);
                this.loadPermissions();
                this.loadStatistics();
            } catch (error) {
                console.error('Error rejecting permission:', error);
                const message = error.response?.data?.message || 'Failed to reject permission request';
                this.$toast?.error?.(message);
            }
        },
        viewPermission(permission) {
            this.selectedPermission = permission;
            this.showDetailsModal = true;
        },
        clearFilters() {
            this.filters = {
                status: '',
                user_id: '',
                date_from: '',
                date_to: ''
            };
            this.loadPermissions();
        },
        resetNewRequest() {
            this.newRequest = {
                permission_type_id: '',
                permission_date: '',
                from_time: '',
                to_time: '',
                reason: '',
                notes: ''
            };
        },
        getStatusClass(status) {
            const classes = {
                'pending': 'bg-yellow-100 text-yellow-800',
                'approved': 'bg-green-100 text-green-800',
                'rejected': 'bg-red-100 text-red-800'
            };
            return classes[status] || 'bg-gray-100 text-gray-800';
        },
        formatDate(dateString) {
            return new Date(dateString).toLocaleDateString();
        },
        exportPermissions() {
            const params = new URLSearchParams(this.filters);
            window.open(`/api/v1/admin/permissions/export?${params}`, '_blank');
        }
    }
}).mount('#permission-board-app');
</script>
@endsection