@extends('layouts.app')

@section('title', 'Permission Request Details')

@section('content')
<div class="p-6">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h5 class="text-lg font-semibold text-gray-900">Permission Request Details</h5>
            <div class="flex gap-2">
                <a href="{{ request()->headers->get('referer') ?: route('permission.index') }}" class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </a>
            </div>
        </div>
        
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Employee Information -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h6 class="text-sm font-semibold text-gray-900 mb-3">Employee Information</h6>
                    <dl class="space-y-2">
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Name:</dt>
                            <dd class="text-sm font-medium text-gray-900">{{ $permission->user->name }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Email:</dt>
                            <dd class="text-sm text-gray-900">{{ $permission->user->email }}</dd>
                        </div>
                        @if($permission->user->employee_code)
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-600">Employee Code:</dt>
                                <dd class="text-sm text-gray-900">{{ $permission->user->employee_code }}</dd>
                            </div>
                        @endif
                    </dl>
                </div>

                <!-- Permission Details -->
                <div class="bg-blue-50 p-4 rounded-lg">
                    <h6 class="text-sm font-semibold text-gray-900 mb-3">Permission Details</h6>
                    <dl class="space-y-2">
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Type:</dt>
                            <dd class="text-sm font-medium text-gray-900">{{ $permission->permission_type->name }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Date:</dt>
                            <dd class="text-sm text-gray-900">{{ $permission->permission_date->format('Y-m-d') }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Time:</dt>
                            <dd class="text-sm text-gray-900">{{ $permission->from_time->format('H:i') }} - {{ $permission->to_time->format('H:i') }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Duration:</dt>
                            <dd class="text-sm font-medium text-gray-900">{{ number_format($permission->duration_minutes / 60, 2) }} hours</dd>
                        </div>
                    </dl>
                </div>

                <!-- Request Information -->
                <div class="bg-yellow-50 p-4 rounded-lg">
                    <h6 class="text-sm font-semibold text-gray-900 mb-3">Request Information</h6>
                    <dl class="space-y-2">
                        <div>
                            <dt class="text-sm text-gray-600">Reason:</dt>
                            <dd class="text-sm text-gray-900 mt-1">{{ $permission->reason }}</dd>
                        </div>
                        @if($permission->notes)
                            <div>
                                <dt class="text-sm text-gray-600">Additional Notes:</dt>
                                <dd class="text-sm text-gray-900 mt-1">{{ $permission->notes }}</dd>
                            </div>
                        @endif
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Applied On:</dt>
                            <dd class="text-sm text-gray-900">{{ $permission->created_at->format('Y-m-d H:i:s') }}</dd>
                        </div>
                    </dl>
                </div>

                <!-- Status Information -->
                <div class="@if($permission->status->name === 'approved') bg-green-50 @elseif($permission->status->name === 'rejected') bg-red-50 @else bg-yellow-50 @endif p-4 rounded-lg">
                    <h6 class="text-sm font-semibold text-gray-900 mb-3">Status Information</h6>
                    <dl class="space-y-2">
                        <div class="flex justify-between items-center">
                            <dt class="text-sm text-gray-600">Current Status:</dt>
                            <dd>
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full @if($permission->status->name === 'pending') bg-yellow-100 text-yellow-800 @elseif($permission->status->name === 'approved') bg-green-100 text-green-800 @else bg-red-100 text-red-800 @endif">
                                    {{ ucfirst($permission->status->name) }}
                                </span>
                            </dd>
                        </div>
                        @if($permission->approved_by)
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-600">@if($permission->status->name === 'approved') Approved @else Rejected @endif By:</dt>
                                <dd class="text-sm text-gray-900">{{ $permission->approvedBy->name }}</dd>
                            </div>
                        @endif
                        @if($permission->approved_at)
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-600">@if($permission->status->name === 'approved') Approved @else Rejected @endif At:</dt>
                                <dd class="text-sm text-gray-900">{{ $permission->approved_at->format('Y-m-d H:i:s') }}</dd>
                            </div>
                        @endif
                        @if($permission->approval_notes)
                            <div>
                                <dt class="text-sm text-gray-600">@if($permission->status->name === 'approved') Approval @else Rejection @endif Notes:</dt>
                                <dd class="text-sm text-gray-900 mt-1">{{ $permission->approval_notes }}</dd>
                            </div>
                        @endif
                    </dl>
                </div>
            </div>

            <!-- Action Buttons -->
            @if($permission->status->name === 'pending')
                <div class="mt-6 pt-6 border-t border-gray-200">
                    <h6 class="text-sm font-semibold text-gray-900 mb-4">Actions</h6>
                    <div class="flex gap-3">
                        <form method="POST" action="{{ route('permission.approve', $permission->id) }}" class="inline">
                            @csrf
                            <button type="submit" class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                <i class="fas fa-check mr-2"></i> Approve
                            </button>
                        </form>
                        
                        <button onclick="showRejectionForm()" class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                            <i class="fas fa-times mr-2"></i> Reject
                        </button>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Rejection Modal -->
<div id="rejectionModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
    <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">Reject Permission Request</h3>
            <form method="POST" action="{{ route('permission.reject', $permission->id) }}">
                @csrf
                <div class="mb-4">
                    <label for="rejection_reason" class="block text-sm font-medium text-gray-700 mb-2">
                        Rejection Reason <span class="text-red-500">*</span>
                    </label>
                    <textarea name="rejection_reason" id="rejection_reason" required rows="4" 
                              class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
                              placeholder="Enter the reason for rejection"></textarea>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" onclick="hideRejectionForm()" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700">
                        <i class="fas fa-times mr-2"></i> Reject Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function showRejectionForm() {
    document.getElementById('rejectionModal').classList.remove('hidden');
}

function hideRejectionForm() {
    document.getElementById('rejectionModal').classList.add('hidden');
}

// Close modal when clicking outside
window.onclick = function(event) {
    const modal = document.getElementById('rejectionModal');
    if (event.target == modal) {
        hideRejectionForm();
    }
}
</script>
@endsection