@extends('layouts.app')

@section('title', 'Equipment Details')
@section('subtitle', 'View equipment information and history')

@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

    <!-- Equipment Header -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-orange-50">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-{{ $equipment->icon_color }}-600 rounded-full flex items-center justify-center mr-4">
                        <i class="{{ $equipment->icon }} text-white text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-gray-900">{{ $equipment->name }}</h3>
                        <p class="text-sm text-gray-600">{{ $equipment->equipment_code }}</p>
                    </div>
                </div>
                <div class="mt-4 sm:mt-0 flex space-x-2">
                    <a href="{{ route('equipment.edit', $equipment) }}" class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors">
                        <i class="fas fa-edit mr-2"></i>Edit
                    </a>
                    <a href="{{ route('equipment.index') }}" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                        <i class="fas fa-arrow-left mr-2"></i>Back
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Equipment Information -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Basic Information -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                        Basic Information
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Equipment Name</label>
                            <p class="text-gray-900 font-medium">{{ $equipment->name }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Equipment Code</label>
                            <p class="text-gray-900 font-medium">{{ $equipment->equipment_code }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-{{ $equipment->category_color }}-100 text-{{ $equipment->category_color }}-800">
                                {{ $equipment->category }}
                            </span>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Condition</label>
                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-{{ $equipment->condition_color }}-100 text-{{ $equipment->condition_color }}-800">
                                {{ ucfirst(str_replace('_', ' ', $equipment->condition)) }}
                            </span>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                            <p class="text-gray-900">{{ $equipment->description ?: 'No description provided' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Purchase Information -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-purple-50">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-shopping-cart text-purple-600 mr-2"></i>
                        Purchase Information
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Purchase Price</label>
                            <p class="text-gray-900 font-medium">${{ number_format($equipment->purchase_price, 2) }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Purchase Date</label>
                            <p class="text-gray-900 font-medium">{{ $equipment->purchase_date?->format('M d, Y') ?: 'Not specified' }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Supplier</label>
                            <p class="text-gray-900 font-medium">{{ $equipment->supplier ?: 'Not specified' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Stock Information -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-yellow-50">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-boxes text-yellow-600 mr-2"></i>
                        Stock Information
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Current Stock</label>
                            <p class="text-gray-900 font-medium text-2xl">{{ $equipment->current_stock }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Minimum Stock Level</label>
                            <p class="text-gray-900 font-medium text-2xl">{{ $equipment->minimum_stock_level }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Available Quantity</label>
                            <p class="text-gray-900 font-medium text-2xl">{{ $equipment->available_quantity }}</p>
                        </div>
                    </div>
                    @if($equipment->isLowStock())
                        <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
                            <div class="flex items-center">
                                <i class="fas fa-exclamation-triangle text-red-600 mr-2"></i>
                                <p class="text-red-800 font-medium">Low Stock Alert</p>
                            </div>
                            <p class="text-red-700 text-sm mt-1">Current stock is below minimum level. Consider reordering.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Additional Information -->
            @if($equipment->notes)
                <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">
                            <i class="fas fa-sticky-note text-gray-600 mr-2"></i>
                            Additional Notes
                        </h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-900">{{ $equipment->notes }}</p>
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Equipment Status -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-green-50">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-chart-pie text-green-600 mr-2"></i>
                        Status Overview
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Current Status</label>
                            <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full bg-{{ $equipment->status_color }}-100 text-{{ $equipment->status_color }}-800">
                                {{ ucfirst(str_replace('_', ' ', $equipment->status)) }}
                            </span>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Currently Assigned To</label>
                            @if($equipment->currentUser())
                                <div class="flex items-center mt-2">
                                    <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-3">
                                        <span class="text-white text-sm font-semibold">{{ $equipment->currentUser()->initials }}</span>
                                    </div>
                                    <div>
                                        <p class="text-gray-900 font-medium">{{ $equipment->currentUser()->full_name }}</p>
                                        <p class="text-gray-600 text-sm">{{ $equipment->currentUser()->employee_id }}</p>
                                    </div>
                                </div>
                            @else
                                <p class="text-gray-500">Not assigned</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Statistics -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-indigo-50">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-chart-bar text-indigo-600 mr-2"></i>
                        Quick Statistics
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-gray-700">Total Issued</span>
                            <span class="text-lg font-bold text-gray-900">{{ $stats['total_issued'] }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-gray-700">Total Returned</span>
                            <span class="text-lg font-bold text-gray-900">{{ $stats['total_returned'] }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-gray-700">Available Quantity</span>
                            <span class="text-lg font-bold text-gray-900">{{ $stats['available_quantity'] }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-gray-700">Low Stock</span>
                            <span class="text-lg font-bold {{ $stats['is_low_stock'] ? 'text-red-600' : 'text-green-600' }}">
                                {{ $stats['is_low_stock'] ? 'Yes' : 'No' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-orange-50">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-bolt text-orange-600 mr-2"></i>
                        Quick Actions
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-3">
                        @if($equipment->status === 'available')
                            <button onclick="openIssueModal({{ $equipment->id }})" class="w-full px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                                <i class="fas fa-hand-holding mr-2"></i>Issue Equipment
                            </button>
                        @elseif($equipment->status === 'issued')
                            <button onclick="openReturnModal({{ $equipment->id }})" class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                                <i class="fas fa-undo mr-2"></i>Return Equipment
                            </button>
                        @endif
                        <a href="{{ route('equipment.edit', $equipment) }}" class="w-full px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors block text-center">
                            <i class="fas fa-edit mr-2"></i>Edit Equipment
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Equipment History -->
    <div class="mt-6 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">
                <i class="fas fa-history text-gray-600 mr-2"></i>
                Equipment History
            </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">Employee</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</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">Notes</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($equipment->equipmentIssues as $issue)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-3">
                                        <span class="text-white text-sm font-semibold">{{ $issue->user->initials }}</span>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-gray-900">{{ $issue->user->full_name }}</div>
                                        <div class="text-sm text-gray-500">{{ $issue->user->employee_id }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $issue->is_returned ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                    {{ $issue->is_returned ? 'Returned' : 'Issued' }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $issue->issued_at->format('M d, Y H:i') }}
                                @if($issue->returned_at)
                                    <br><span class="text-gray-500">Returned: {{ $issue->returned_at->format('M d, Y H:i') }}</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <div>
                                    <span class="text-xs text-gray-500">Issued:</span>
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 ml-1">
                                        {{ ucfirst(str_replace('_', ' ', $issue->condition_on_issue)) }}
                                    </span>
                                </div>
                                @if($issue->condition_on_return)
                                    <div class="mt-1">
                                        <span class="text-xs text-gray-500">Returned:</span>
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 ml-1">
                                            {{ ucfirst(str_replace('_', ' ', $issue->condition_on_return)) }}
                                        </span>
                                    </div>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-900">
                                {{ $issue->notes ?: '-' }}
                                @if($issue->return_notes)
                                    <br><span class="text-gray-500">Return: {{ $issue->return_notes }}</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-gray-500">
                                <div class="flex flex-col items-center">
                                    <i class="fas fa-history text-4xl text-gray-300 mb-4"></i>
                                    <p class="text-lg font-medium">No history available</p>
                                    <p class="text-sm">This equipment has not been issued yet.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </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(\App\Models\User::where('status', 'active')->get() 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">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>

    <!-- 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">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 openReturnModal(equipmentId) {
            document.getElementById('returnForm').action = `/equipment/${equipmentId}/return`;
            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 returnModal = document.getElementById('returnModal');
            
            if (event.target === issueModal) {
                closeIssueModal();
            }
            if (event.target === returnModal) {
                closeReturnModal();
            }
        }
    </script>
</div>
@endsection