@extends('layouts.app')

@section('title', 'Equipment')
@section('subtitle', 'Track equipment inventory and usage')

@section('content')
<div class="max-w-7xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                {{ session('success') }}
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                {{ session('error') }}
            </div>
        </div>
    @endif

    <!-- Page Header -->
    <div class="mb-6 sm:mb-8">
        <div class="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3">
            <a href="{{ route('equipment.create') }}" class="bg-orange-500 text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition-colors text-sm sm:text-base font-medium shadow-md hover:shadow-lg">
                <i class="fas fa-plus mr-2"></i>
                <span class="hidden sm:inline">Add Equipment</span>
                <span class="sm:hidden">Add</span>
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6 mb-6 sm:mb-8">
        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border-l-4 border-blue-500">
            <div class="p-4 sm:p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                        <i class="fas fa-tools text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Total Equipment</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $stats['total_equipment'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border-l-4 border-green-500">
            <div class="p-4 sm:p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-green-100 text-green-600">
                        <i class="fas fa-check-circle text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Available</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $stats['available_equipment'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border-l-4 border-yellow-500">
            <div class="p-4 sm:p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
                        <i class="fas fa-hand-holding text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Issued</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $stats['issued_equipment'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border-l-4 border-red-500">
            <div class="p-4 sm:p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-red-100 text-red-600">
                        <i class="fas fa-exclamation-triangle text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Low Stock</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $stats['low_stock_equipment'] }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <form method="GET" action="{{ route('equipment.index') }}" class="grid grid-cols-1 md:grid-cols-5 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                <select name="category" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500">
                    <option value="">All Categories</option>
                    <option value="PPE" {{ request('category') == 'PPE' ? 'selected' : '' }}>Personal Protective Equipment</option>
                    <option value="Tools" {{ request('category') == 'Tools' ? 'selected' : '' }}>Tools</option>
                    <option value="Machinery" {{ request('category') == 'Machinery' ? 'selected' : '' }}>Machinery</option>
                    <option value="Communication" {{ request('category') == 'Communication' ? 'selected' : '' }}>Communication</option>
                    <option value="Safety" {{ request('category') == 'Safety' ? 'selected' : '' }}>Safety</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Condition</label>
                <select name="condition" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500">
                    <option value="">All Conditions</option>
                    <option value="new" {{ request('condition') == 'new' ? 'selected' : '' }}>New</option>
                    <option value="good" {{ request('condition') == 'good' ? 'selected' : '' }}>Good</option>
                    <option value="fair" {{ request('condition') == 'fair' ? 'selected' : '' }}>Fair</option>
                    <option value="needs_repair" {{ request('condition') == 'needs_repair' ? 'selected' : '' }}>Needs Repair</option>
                    <option value="damaged" {{ request('condition') == 'damaged' ? 'selected' : '' }}>Damaged</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500">
                    <option value="">All Status</option>
                    <option value="available" {{ request('status') == 'available' ? 'selected' : '' }}>Available</option>
                    <option value="issued" {{ request('status') == 'issued' ? 'selected' : '' }}>Issued</option>
                    <option value="low_stock" {{ request('status') == 'low_stock' ? 'selected' : '' }}>Low Stock</option>
                    <option value="repair" {{ request('status') == 'repair' ? 'selected' : '' }}>Under Repair</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Employee</label>
                <select name="employee_id" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500">
                    <option value="">All Employees</option>
                    @foreach($employees as $employee)
                        <option value="{{ $employee->id }}" {{ request('employee_id') == $employee->id ? 'selected' : '' }}>
                            {{ $employee->full_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Search</label>
                <input type="text" name="search" placeholder="Search equipment..." value="{{ request('search') }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500">
            </div>
            <div class="md:col-span-5 flex justify-end space-x-2">
                <button type="submit" class="bg-orange-500 text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition-colors">
                    <i class="fas fa-search mr-2"></i>Filter
                </button>
                <a href="{{ route('equipment.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors">
                    <i class="fas fa-times mr-2"></i>Clear
                </a>
            </div>
        </form>
    </div>

    <!-- Equipment Table -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-medium text-gray-900">Equipment Inventory</h3>
        </div>
        
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Equipment
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Category
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Condition
                        </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">
                            Stock
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Assigned To
                        </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">
                    @forelse($equipment as $item)
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-{{ $item->icon_color }}-600 rounded-full flex items-center justify-center">
                                        <i class="{{ $item->icon }} text-white"></i>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">{{ $item->name }}</div>
                                        <div class="text-sm text-gray-500">{{ $item->equipment_code }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-{{ $item->category_color }}-100 text-{{ $item->category_color }}-800">
                                    {{ $item->category }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-{{ $item->condition_color }}-100 text-{{ $item->condition_color }}-800">
                                    {{ ucfirst(str_replace('_', ' ', $item->condition)) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-{{ $item->status_color }}-100 text-{{ $item->status_color }}-800">
                                    {{ ucfirst(str_replace('_', ' ', $item->status)) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <div class="text-center">
                                    <div class="font-medium">{{ $item->current_stock }}</div>
                                    <div class="text-xs text-gray-500">Min: {{ $item->minimum_stock_level }}</div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                @if($item->currentUsers()->count() > 0)
                                    <div class="space-y-1">
                                        @foreach($item->currentUsers()->take(2) as $user)
                                            <div class="flex items-center">
                                                <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mr-2">
                                                    <span class="text-white text-xs font-semibold">{{ $user->initials }}</span>
                                                </div>
                                                <span class="text-sm">{{ $user->full_name }}</span>
                                            </div>
                                        @endforeach
                                        @if($item->currentUsers()->count() > 2)
                                            <div class="text-xs text-gray-500">
                                                +{{ $item->currentUsers()->count() - 2 }} more
                                            </div>
                                        @endif
                                    </div>
                                @else
                                    <span class="text-gray-500">-</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    @if($item->status === 'available' || $item->status === 'partially_issued')
                                        <button onclick="openIssueModal({{ $item->id }})" class="text-green-600 hover:text-green-900" title="Issue">
                                            <i class="fas fa-hand-holding"></i>
                                        </button>
                                        @if($item->current_stock > 1)
                                            <button onclick="openBulkIssueModal({{ $item->id }})" class="text-purple-600 hover:text-purple-900" title="Bulk Issue">
                                                <i class="fas fa-users"></i>
                                            </button>
                                        @endif
                                    @endif
                                    @if($item->currentUsers()->count() > 0)
                                        <button onclick="openReturnModal({{ $item->id }})" class="text-blue-600 hover:text-blue-900" title="Return">
                                            <i class="fas fa-undo"></i>
                                        </button>
                                    @endif
                                    <a href="{{ route('equipment.edit', $item) }}" class="text-yellow-600 hover:text-yellow-900" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ route('equipment.show', $item) }}" class="text-blue-600 hover:text-blue-900" title="View">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    @if(!$item->equipmentIssues()->exists())
                                        <form method="POST" action="{{ route('equipment.destroy', $item) }}" class="inline" onsubmit="return confirm('Are you sure you want to delete this equipment?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 hover:text-red-900" title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                                <div class="flex flex-col items-center">
                                    <i class="fas fa-tools text-4xl text-gray-300 mb-4"></i>
                                    <p class="text-lg font-medium">No equipment found</p>
                                    <p class="text-sm">Try adjusting your filters or add new equipment.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($equipment->hasPages())
            <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
                <div class="flex items-center justify-between">
                    <div class="text-sm text-gray-700">
                        Showing {{ $equipment->firstItem() }} to {{ $equipment->lastItem() }} of {{ $equipment->total() }} results
                    </div>
                    <div class="flex space-x-2">
                        @if($equipment->previousPageUrl())
                            <a href="{{ $equipment->previousPageUrl() }}" class="px-3 py-1 text-sm text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors">
                                Previous
                            </a>
                        @endif
                        
                        @foreach($equipment->getUrlRange(1, $equipment->lastPage()) as $page => $url)
                            @if($page == $equipment->currentPage())
                                <span class="px-3 py-1 text-sm text-white bg-orange-500 rounded-md">{{ $page }}</span>
                            @else
                                <a href="{{ $url }}" class="px-3 py-1 text-sm text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors">{{ $page }}</a>
                            @endif
                        @endforeach
                        
                        @if($equipment->nextPageUrl())
                            <a href="{{ $equipment->nextPageUrl() }}" class="px-3 py-1 text-sm text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors">
                                Next
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        @endif
    </div>

    <!-- Issue Equipment Modal -->
    <div id="issueModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Issue Equipment</h3>
                <form id="issueForm" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Employee</label>
                        <select name="user_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500">
                            <option value="">Select Employee</option>
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}">{{ $employee->full_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Expected Return Date</label>
                        <input type="date" name="expected_return_date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                        <textarea name="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500" placeholder="Optional notes..."></textarea>
                    </div>
                    <div class="flex justify-end space-x-2">
                        <button type="button" onclick="closeIssueModal()" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                            Cancel
                        </button>
                        <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                            Issue Equipment
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Bulk Issue Equipment Modal -->
    <div id="bulkIssueModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-[500px] shadow-lg rounded-md bg-white">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Bulk Issue Equipment</h3>
                <form id="bulkIssueForm" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Select Employees</label>
                        <div class="max-h-48 overflow-y-auto border border-gray-300 rounded-lg p-3">
                            @foreach($employees as $employee)
                                <label class="flex items-center mb-2">
                                    <input type="checkbox" name="user_ids[]" value="{{ $employee->id }}" class="mr-2 rounded">
                                    <div class="flex items-center">
                                        <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mr-2">
                                            <span class="text-white text-xs font-semibold">{{ $employee->initials }}</span>
                                        </div>
                                        <span class="text-sm">{{ $employee->full_name }} ({{ $employee->employee_id }})</span>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Expected Return Date</label>
                        <input type="date" name="expected_return_date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                        <textarea name="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500" placeholder="Optional notes..."></textarea>
                    </div>
                    <div class="flex justify-end space-x-2">
                        <button type="button" onclick="closeBulkIssueModal()" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                            Cancel
                        </button>
                        <button type="submit" class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors">
                            Issue to Selected Employees
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Return Equipment Modal -->
    <div id="returnModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Return Equipment</h3>
                <form id="returnForm" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Select Assignment to Return</label>
                        <select name="issue_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500">
                            <option value="">Select Assignment</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Condition on Return</label>
                        <select name="condition_on_return" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500">
                            <option value="new">New</option>
                            <option value="good">Good</option>
                            <option value="fair">Fair</option>
                            <option value="needs_repair">Needs Repair</option>
                            <option value="damaged">Damaged</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Return Notes</label>
                        <textarea name="return_notes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500" placeholder="Optional notes..."></textarea>
                    </div>
                    <div class="flex justify-end space-x-2">
                        <button type="button" onclick="closeReturnModal()" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                            Cancel
                        </button>
                        <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                            Return Equipment
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function openIssueModal(equipmentId) {
            document.getElementById('issueForm').action = `/equipment/${equipmentId}/issue`;
            document.getElementById('issueModal').classList.remove('hidden');
        }

        function closeIssueModal() {
            document.getElementById('issueModal').classList.add('hidden');
        }

        function openBulkIssueModal(equipmentId) {
            document.getElementById('bulkIssueForm').action = `/equipment/${equipmentId}/bulk-issue`;
            document.getElementById('bulkIssueModal').classList.remove('hidden');
        }

        function closeBulkIssueModal() {
            document.getElementById('bulkIssueModal').classList.add('hidden');
            // Clear checkboxes
            document.querySelectorAll('#bulkIssueModal input[type="checkbox"]').forEach(checkbox => {
                checkbox.checked = false;
            });
        }

        function openReturnModal(equipmentId) {
            document.getElementById('returnForm').action = `/equipment/${equipmentId}/return`;
            
            // Fetch active assignments for this equipment
            fetch(`/api/equipment/${equipmentId}/assignments`)
                .then(response => response.json())
                .then(data => {
                    const select = document.querySelector('#returnModal select[name="issue_id"]');
                    select.innerHTML = '<option value="">Select Assignment</option>';
                    
                    data.assignments.forEach(assignment => {
                        const option = document.createElement('option');
                        option.value = assignment.id;
                        option.textContent = `${assignment.user.name} - Issued: ${assignment.issued_at}`;
                        select.appendChild(option);
                    });
                })
                .catch(error => {
                    console.error('Error fetching assignments:', error);
                });
            
            document.getElementById('returnModal').classList.remove('hidden');
        }

        function closeReturnModal() {
            document.getElementById('returnModal').classList.add('hidden');
        }

        // Close modals when clicking outside
        window.onclick = function(event) {
            const issueModal = document.getElementById('issueModal');
            const bulkIssueModal = document.getElementById('bulkIssueModal');
            const returnModal = document.getElementById('returnModal');
            
            if (event.target === issueModal) {
                closeIssueModal();
            }
            if (event.target === bulkIssueModal) {
                closeBulkIssueModal();
            }
            if (event.target === returnModal) {
                closeReturnModal();
            }
        }
    </script>
</div>
@endsection