@extends('layouts.admin-flowdash')

@section('title', 'Job Positions')
@section('page-title', 'Job Positions')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Job Positions</li>
@endsection

@section('page-actions')
    <div class="ml-auto">
        <button class="btn btn-primary" data-toggle="modal" data-target="#createJobModal">
            <i class="material-icons">add</i> Add Job Position
        </button>
    </div>
@endsection

@push('styles')
    
    <script>
        function appData() {
            return {
                sidebarOpen: false, 
                showCreateModal: false, 
                showEditModal: false, 
                editJob: {},
                careersMenuOpen: {{ request()->is('admin/job-positions*') ? 'true' : 'false' }},
                showToast: false,
                toastMessage: '',
                toastType: 'success',
                
                showToastMessage(message, type = 'success') {
                    this.toastMessage = message;
                    this.toastType = type;
                    this.showToast = true;
                    setTimeout(() => {
                        this.showToast = false;
                    }, 5000);
                },
                
                openEditModal(jobData) {
                    try {
                        this.editJob = typeof jobData === 'string' ? JSON.parse(jobData) : jobData;
                        this.showEditModal = true;
                        console.log('Edit modal opened with job data:', this.editJob);
                    } catch (error) {
                        console.error('Error parsing job data:', error);
                        this.showToastMessage('Error loading job data for editing', 'error');
                    }
                },
                
                async handleFormSubmit(event) {
                    event.preventDefault();
                    const form = event.target;
                    const formData = new FormData(form);
                    
                    // Handle checkbox properly - unchecked checkboxes don't get submitted
                    const isActiveCheckbox = form.querySelector('input[name="is_active"]');
                    if (isActiveCheckbox) {
                        if (isActiveCheckbox.checked) {
                            formData.set('is_active', '1');
                        } else {
                            formData.set('is_active', '0');
                        }
                    }
                    
                    // Debug: Log form data
                    console.log('Form submission data:');
                    for (let [key, value] of formData.entries()) {
                        console.log(key + ': ' + value);
                    }
                    
                    try {
                        const response = await fetch(form.action, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });
                        
                        if (response.redirected) {
                            // If redirected, it means authentication failed
                            this.showToastMessage('Please log in to continue', 'error');
                            setTimeout(() => {
                                window.location.href = response.url;
                            }, 2000);
                            return;
                        }
                        
                        if (response.ok) {
                            const result = await response.json();
                            this.showCreateModal = false;
                            this.showToastMessage(result.message || 'Job position created successfully!', 'success');
                            // Reload page to see new job position
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else if (response.status === 422) {
                            // Validation errors
                            const errorData = await response.json();
                            let errorMessage = 'Validation errors: ';
                            if (errorData.errors) {
                                const errors = Object.values(errorData.errors).flat();
                                errorMessage += errors.join(', ');
                            } else {
                                errorMessage += 'Please check your input and try again.';
                            }
                            this.showToastMessage(errorMessage, 'error');
                        } else {
                            const errorText = await response.text();
                            if (errorText.includes('Page Expired')) {
                                this.showToastMessage('Session expired. Please refresh and try again.', 'error');
                                setTimeout(() => {
                                    window.location.reload();
                                }, 2000);
                            } else {
                                this.showToastMessage('Error creating job position. Please try again.', 'error');
                            }
                        }
                    } catch (error) {
                        console.error('Form submission error:', error);
                        this.showToastMessage('Network error. Please check your connection and try again.', 'error');
                    }
                },
                
                async handleEditFormSubmit(event) {
                    event.preventDefault();
                    const form = event.target;
                    const formData = new FormData(form);
                    
                    // Handle checkbox properly - unchecked checkboxes don't get submitted
                    const isActiveCheckbox = form.querySelector('input[name="is_active"]');
                    if (isActiveCheckbox) {
                        if (isActiveCheckbox.checked) {
                            formData.set('is_active', '1');
                        } else {
                            formData.set('is_active', '0');
                        }
                    }
                    
                    // Debug: Log form data
                    console.log('Edit form submission data:');
                    for (let [key, value] of formData.entries()) {
                        console.log(key + ': ' + value);
                    }
                    
                    try {
                        const response = await fetch(form.action, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });
                        
                        if (response.redirected) {
                            // If redirected, it means authentication failed
                            this.showToastMessage('Please log in to continue', 'error');
                            setTimeout(() => {
                                window.location.href = response.url;
                            }, 2000);
                            return;
                        }
                        
                        if (response.ok) {
                            const result = await response.json();
                            this.showEditModal = false;
                            this.showToastMessage(result.message || 'Job position updated successfully!', 'success');
                            // Reload page to see updated job position
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else if (response.status === 422) {
                            // Validation errors
                            const errorData = await response.json();
                            let errorMessage = 'Validation errors: ';
                            if (errorData.errors) {
                                const errors = Object.values(errorData.errors).flat();
                                errorMessage += errors.join(', ');
                            } else {
                                errorMessage += 'Please check your input and try again.';
                            }
                            this.showToastMessage(errorMessage, 'error');
                        } else {
                            const errorText = await response.text();
                            if (errorText.includes('Page Expired')) {
                                this.showToastMessage('Session expired. Please refresh and try again.', 'error');
                                setTimeout(() => {
                                    window.location.reload();
                                }, 2000);
                            } else {
                                this.showToastMessage('Error updating job position. Please try again.', 'error');
                            }
                        }
                    } catch (error) {
                        console.error('Edit form submission error:', error);
                        this.showToastMessage('Network error. Please check your connection and try again.', 'error');
                    }
                }
            };
        }
    </script>
    
    <!-- Alpine.js for interactivity -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-50" x-data="appData()" @show-toast.window="showToastMessage($event.detail.message, $event.detail.type)">
    <div class="flex h-screen">
        <!-- Sidebar -->
        <div class="fixed inset-y-0 left-0 z-30 w-64 bg-white transform transition-transform duration-300 lg:translate-x-0 lg:static lg:inset-0"
             :class="{'translate-x-0': sidebarOpen, '-translate-x-full': !sidebarOpen}">
            
            <!-- Logo -->
            <div class="flex items-center justify-center h-16 bg-white">
                <img src="{{ asset('assets/images/aufg-logo.png') }}" alt="UFG" class="h-10 w-auto">
            </div>
            
            <!-- Navigation -->
            <nav class="p-4">
                <a href="{{ route('admin.dashboard') }}" class="flex items-center p-3 mb-2 text-gray-700 hover:bg-gray-100 rounded-lg">
                    <x-icon name="home" type="outline" class="w-5 h-5 mr-3" />
                    Dashboard
                </a>
                
                <a href="#" class="flex items-center p-3 mb-2 text-gray-700 hover:bg-gray-100 rounded-lg">
                    <x-icon name="users" type="outline" class="w-5 h-5 mr-3" />
                    Users
                </a>

                <!-- Careers Menu with Dropdown -->
                <div class="mb-2">
                    <button @click="careersMenuOpen = !careersMenuOpen" 
                            class="flex items-center justify-between w-full p-3 rounded-lg transition-colors
                                   {{ request()->is('admin/job-positions*') ? 'bg-indigo-50 text-indigo-700 font-medium hover:bg-indigo-100' : 'text-gray-700 hover:bg-gray-100' }}">
                        <div class="flex items-center">
                            <x-icon name="academic-cap" type="outline" class="w-5 h-5 mr-3" />
                            Careers
                        </div>
                        <svg class="w-4 h-4 transition-transform duration-200" 
                             :class="{ 'rotate-180': careersMenuOpen }" 
                             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"></path>
                        </svg>
                    </button>
                    
                    <!-- Careers Submenu -->
                    <div x-show="careersMenuOpen" 
                         x-transition:enter="transition ease-out duration-100"
                         x-transition:enter-start="opacity-0 transform -translate-y-2"
                         x-transition:enter-end="opacity-100 transform translate-y-0"
                         x-transition:leave="transition ease-in duration-75"
                         x-transition:leave-start="opacity-100 transform translate-y-0"
                         x-transition:leave-end="opacity-0 transform -translate-y-2"
                         class="mt-1 ml-4 border-l-2 border-gray-200 pl-4 space-y-1">
                        
                        <a href="{{ route('admin.job-positions') }}" 
                           class="flex items-center p-2 text-sm rounded-md transition-colors
                                  {{ request()->is('admin/job-positions*') ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                            <span class="mr-2 text-gray-400">•</span>
                            <x-icon name="briefcase" type="outline" class="w-4 h-4 mr-2" />
                            Job Positions
                        </a>
                        
                        <!-- Applications link -->
                        <a href="{{ route('admin.applications') }}" 
                           class="flex items-center p-2 text-sm rounded-md transition-colors
                                  {{ request()->is('admin/applications*') ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                            <span class="mr-2 text-gray-400">•</span>
                            <x-icon name="document-text" type="outline" class="w-4 h-4 mr-2" />
                            Applications
                        </a>
                        
                        <!-- Career Enquiries -->
                        <a href="{{ route('admin.career-enquiries') }}" 
                           class="flex items-center p-2 text-sm rounded-md transition-colors
                                  {{ request()->is('admin/career-enquiries*') ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                            <span class="mr-2 text-gray-400">•</span>
                            <x-icon name="chat-bubble-left-right" type="outline" class="w-4 h-4 mr-2" />
                            Career Enquiries
                        </a>
                    </div>
                </div>
                
                <a href="#" class="flex items-center p-3 mb-2 text-gray-700 hover:bg-gray-100 rounded-lg">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                    </svg>
                    Analytics
                </a>
                
                <a href="#" class="flex items-center p-3 mb-2 text-gray-700 hover:bg-gray-100 rounded-lg">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    Settings
                </a>
            </nav>
            
            <!-- Admin Info & Logout -->
            <div class="absolute bottom-4 left-4 right-4">
                <div class="mb-3 px-3 py-2 bg-gray-50 rounded-lg">
                    <p class="text-sm font-semibold text-gray-800">UFG Admin</p>
                    <p class="text-xs text-gray-500">Administrator Panel</p>
                </div>
                <form action="{{ route('admin.logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="flex items-center p-3 w-full text-gray-700 hover:bg-gray-100 rounded-lg">
                        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                        </svg>
                        Logout
                    </button>
                </form>
            </div>
        </div>
        
        <!-- Mobile sidebar overlay -->
        <div class="fixed inset-0 z-20 bg-black bg-opacity-50 lg:hidden"
             x-show="sidebarOpen"
             @click="sidebarOpen = false"
             x-transition:enter="transition-opacity ease-linear duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-linear duration-300"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0">
        </div>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- Top Navigation -->
            <header class="bg-white shadow-sm">
                <div class="flex items-center justify-between px-6 py-4">
                    <div class="flex items-center">
                        <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                        </button>
                        <div class="ml-4 flex items-center">
                            <h1 class="text-2xl font-semibold text-gray-900">Job Positions</h1>
                            <span class="ml-3 px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">System Administrator</span>
                        </div>
                    </div>
                    
                    <div class="flex items-center space-x-4">
                        <button @click="showCreateModal = true" class="bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700 transition-colors">
                            Add New Position
                        </button>
                        
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-gray-600 text-white rounded-full flex items-center justify-center">
                                {{ substr(auth()->user()->name, 0, 1) }}
                            </div>
                            <span class="ml-2 text-sm font-medium text-gray-700">{{ auth()->user()->name }}</span>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Dashboard Content -->
            <main class="flex-1 overflow-y-auto p-6">
                <!-- Initialize Toast on Page Load -->
                @if(session('success'))
                <div x-data x-init="$nextTick(() => $dispatch('show-toast', { message: '{{ addslashes(session('success')) }}', type: 'success' }))"></div>
                @endif
                
                @if(session('error'))
                <div x-data x-init="$nextTick(() => $dispatch('show-toast', { message: '{{ addslashes(session('error')) }}', type: 'error' }))"></div>
                @endif

                @if($errors->any())
                <div x-data x-init="$nextTick(() => $dispatch('show-toast', { message: 'Please fix the validation errors', type: 'error' }))"></div>
                @endif

                <!-- Job Positions Table -->
                <div class="bg-white rounded-lg shadow">
                    <div class="p-6">
                        <h3 class="text-lg font-semibold mb-4">Manage Job Positions ({{ $jobPositions->count() }})</h3>
                        <div class="overflow-x-auto">
                            <table class="w-full table-fixed">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="w-2/5 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th>
                                        <th class="w-1/6 px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
                                        <th class="w-1/6 px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Experience</th>
                                        <th class="w-1/12 px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                        <th class="w-1/12 px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                        <th class="w-1/12 px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    @forelse($jobPositions as $job)
                                    <tr>
                                        <td class="px-4 py-4">
                                            <div>
                                                <div class="font-medium text-gray-900 text-sm">{{ $job->title }}</div>
                                                <div class="text-xs text-gray-500 truncate">{{ Str::limit($job->description, 50) }}</div>
                                            </div>
                                        </td>
                                        <td class="px-3 py-4 text-sm text-gray-900">
                                            <div class="truncate">{{ $job->location }}</div>
                                        </td>
                                        <td class="px-3 py-4 text-sm text-gray-900">
                                            <div class="truncate">{{ $job->experience }}</div>
                                        </td>
                                        <td class="px-3 py-4">
                                            <span class="inline-flex px-1.5 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-800">
                                                {{ ucfirst($job->type) }}
                                            </span>
                                        </td>
                                        <td class="px-3 py-4">
                                            <span class="inline-flex px-1.5 py-0.5 text-xs font-medium rounded {{ $job->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                                {{ $job->is_active ? 'Active' : 'Inactive' }}
                                            </span>
                                        </td>
                                        <td class="px-3 py-4 text-center">
                                            <div class="relative" x-data="{ open: false }">
                                                <button @click="open = !open" @click.away="open = false" class="inline-flex items-center justify-center w-8 h-8 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 rounded-full">
                                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                                        <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
                                                    </svg>
                                                </button>
                                                
                                                <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 z-10 mt-2 w-48 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" style="display: none;">
                                                    <div class="py-1">
                                                        <button @click="openEditModal('{{ addslashes(json_encode($job)) }}'); open = false" class="group flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left">
                                                            <x-icon name="pencil" type="outline" class="mr-3 h-4 w-4 text-gray-400 group-hover:text-gray-500" />
                                                            Edit
                                                        </button>
                                                        
                                                        <form action="{{ route('admin.job-positions.toggle', $job) }}" method="POST" class="w-full">
                                                            @csrf
                                                            @method('PATCH')
                                                            <button type="submit" class="group flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left">
                                                                @if($job->is_active)
                                                                    <x-icon name="pause-circle" type="outline" class="mr-3 h-4 w-4 text-gray-400 group-hover:text-gray-500" />
                                                                @else
                                                                    <x-icon name="check-circle" type="outline" class="mr-3 h-4 w-4 text-gray-400 group-hover:text-gray-500" />
                                                                @endif
                                                                {{ $job->is_active ? 'Deactivate' : 'Activate' }}
                                                            </button>
                                                        </form>
                                                        
                                                        <form action="{{ route('admin.job-positions.delete', $job) }}" method="POST" class="w-full" onsubmit="return confirm('Are you sure you want to delete this job position?')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="group flex items-center px-4 py-2 text-sm text-red-700 hover:bg-red-50 w-full text-left">
                                                                <x-icon name="trash" type="outline" class="mr-3 h-4 w-4 text-red-400 group-hover:text-red-500" />
                                                                Delete
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="6" class="px-6 py-4 text-center text-gray-500">
                                            No job positions found. <button @click="showCreateModal = true" class="text-indigo-600 hover:text-indigo-800">Create one now</button>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- Create Job Modal -->
    <div x-show="showCreateModal" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black opacity-50" @click="showCreateModal = false"></div>
            <div class="bg-white rounded-lg max-w-md w-full p-6 relative">
                <h3 class="text-lg font-semibold mb-4">Add New Job Position</h3>
                <form action="{{ route('admin.job-positions.store') }}" method="POST" @submit="handleFormSubmit($event)">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Title</label>
                            <input type="text" name="title" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Location</label>
                            <input type="text" name="location" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Experience</label>
                            <input type="text" name="experience" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Type</label>
                            <select name="type" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                                <option value="full-time">Full-time</option>
                                <option value="part-time">Part-time</option>
                                <option value="contract">Contract</option>
                                <option value="internship">Internship</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Tags (comma separated)</label>
                            <input type="text" name="tags" placeholder="Engineering, Manufacturing, Quality" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Description</label>
                            <textarea name="description" rows="3" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" name="is_active" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                            <label class="ml-2 block text-sm text-gray-900">Active</label>
                        </div>
                    </div>
                    <div class="mt-6 flex space-x-3">
                        <button type="submit" class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            Create Position
                        </button>
                        <button type="button" @click="showCreateModal = false" class="flex-1 bg-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Job Modal -->
    <div x-show="showEditModal" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black opacity-50" @click="showEditModal = false"></div>
            <div class="bg-white rounded-lg max-w-md w-full p-6 relative">
                <h3 class="text-lg font-semibold mb-4">Edit Job Position</h3>
                <form :action="`{{ url('/admin/job-positions') }}/${editJob.id}`" method="POST" @submit="handleEditFormSubmit($event)">
                    @csrf
                    @method('PUT')
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Title</label>
                            <input type="text" name="title" :value="editJob.title" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Location</label>
                            <input type="text" name="location" :value="editJob.location" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Experience</label>
                            <input type="text" name="experience" :value="editJob.experience" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Type</label>
                            <select name="type" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                                <option value="full-time" :selected="editJob.type === 'full-time'">Full-time</option>
                                <option value="part-time" :selected="editJob.type === 'part-time'">Part-time</option>
                                <option value="contract" :selected="editJob.type === 'contract'">Contract</option>
                                <option value="internship" :selected="editJob.type === 'internship'">Internship</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Tags (comma separated)</label>
                            <input type="text" name="tags" :value="editJob.tags ? editJob.tags.join(', ') : ''" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Description</label>
                            <textarea name="description" rows="3" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" x-text="editJob.description"></textarea>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" name="is_active" :checked="editJob.is_active" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                            <label class="ml-2 block text-sm text-gray-900">Active</label>
                        </div>
                    </div>
                    <div class="mt-6 flex space-x-3">
                        <button type="submit" class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            Update Position
                        </button>
                        <button type="button" @click="showEditModal = false" class="flex-1 bg-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div x-show="showToast" 
         x-transition:enter="transition ease-out duration-300 transform"
         x-transition:enter-start="translate-y-full opacity-0"
         x-transition:enter-end="translate-y-0 opacity-100"
         x-transition:leave="transition ease-in duration-200 transform"
         x-transition:leave-start="translate-y-0 opacity-100"
         x-transition:leave-end="translate-y-full opacity-0"
         class="fixed z-50 max-w-sm"
         style="bottom: 1rem; right: 1rem; min-width: 300px; display: none;">
        <div class="rounded-lg shadow-lg overflow-hidden"
             :class="{
                 'bg-green-500 text-white': toastType === 'success',
                 'bg-red-500 text-white': toastType === 'error',
                 'bg-yellow-500 text-white': toastType === 'warning',
                 'bg-blue-500 text-white': toastType === 'info'
             }">
            <div class="p-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <!-- Success Icon -->
                        <svg x-show="toastType === 'success'" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        
                        <!-- Error Icon -->
                        <svg x-show="toastType === 'error'" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                        </svg>
                        
                        <!-- Warning Icon -->
                        <svg x-show="toastType === 'warning'" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                        </svg>
                        
                        <!-- Info Icon -->
                        <svg x-show="toastType === 'info'" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium" x-text="toastMessage"></p>
                    </div>
                    <div class="ml-auto pl-3">
                        <button @click="showToast = false" class="inline-flex text-white hover:text-gray-200 focus:outline-none focus:text-gray-200">
                            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>