@extends('layouts.app')

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

@section('content')
<div class="p-6">
    <!-- Breadcrumb -->
    <nav class="flex mb-4" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ route('leave.index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary-600">
                    <i class="fas fa-list mr-2"></i> Leave Requests
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4 4"/>
                    </svg>
                    <span class="ml-1 text-sm font-medium text-gray-500">Request #{{ $leaveRequest->id }}</span>
                </div>
            </li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Leave Request Details -->
        <div class="lg:col-span-2">
            <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">Leave Request Details</h5>
                    <div>
                        @switch($leaveRequest->status->name)
                            @case('pending')
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Pending</span>
                                @break
                            @case('approved')
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Approved</span>
                                @break
                            @case('rejected')
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Rejected</span>
                                @break
                            @default
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">{{ $leaveRequest->status->name }}</span>
                        @endswitch
                    </div>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <h6 class="text-sm font-medium text-gray-900 mb-3">Employee Information</h6>
                            <div class="flex items-center mb-4">
                                <img class="h-16 w-16 rounded-full" src="{{ $leaveRequest->user->avatar }}" alt="">
                                <div class="ml-4">
                                    <h5 class="text-lg font-medium text-gray-900">{{ $leaveRequest->user->full_name }}</h5>
                                    <p class="text-sm text-gray-500">{{ $leaveRequest->user->email }}</p>
                                    <p class="text-sm text-gray-500">{{ $leaveRequest->user->departments->first()?->name ?? 'No Department' }}</p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h6 class="text-sm font-medium text-gray-900 mb-3">Leave Information</h6>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-500">Leave Type:</span>
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{{ $leaveRequest->leaveType->name }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-500">From Date:</span>
                                    <span class="text-sm text-gray-900">{{ $leaveRequest->from_date->format('l, F d, Y') }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-500">To Date:</span>
                                    <span class="text-sm text-gray-900">{{ $leaveRequest->to_date->format('l, F d, Y') }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-500">Duration:</span>
                                    <span class="text-sm text-gray-900">
                                        {{ $leaveRequest->days_count }} day(s)
                                        @if($leaveRequest->is_half_day)
                                            <span class="text-gray-500 text-xs">(Half Day)</span>
                                        @endif
                                    </span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-500">Applied On:</span>
                                    <span class="text-sm text-gray-900">{{ $leaveRequest->created_at->format('F d, Y h:i A') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6">
                        <h6 class="text-sm font-medium text-gray-900 mb-3">Reason for Leave</h6>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-700">{{ $leaveRequest->reason }}</p>
                        </div>
                    </div>

                    @if($leaveRequest->remarks)
                        <div class="mb-6">
                            <h6 class="text-sm font-medium text-gray-900 mb-3">Additional Remarks</h6>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <p class="text-sm text-gray-700">{{ $leaveRequest->remarks }}</p>
                            </div>
                        </div>
                    @endif

                    @if($leaveRequest->approved_by)
                        <div class="mb-6">
                            <h6 class="text-sm font-medium text-gray-900 mb-3">Approval Information</h6>
                            <div class="bg-{{ $leaveRequest->status->name === 'approved' ? 'green' : 'red' }}-50 p-4 rounded-lg">
                                <div class="flex items-center mb-3">
                                    <img class="h-8 w-8 rounded-full" src="{{ $leaveRequest->approvedBy->avatar }}" alt="">
                                    <div class="ml-3">
                                        <span class="text-sm font-medium text-gray-900">{{ $leaveRequest->approvedBy->full_name }}</span>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $leaveRequest->status->name === 'approved' ? 'green' : 'red' }}-100 text-{{ $leaveRequest->status->name === 'approved' ? 'green' : 'red' }}-800 ml-2">
                                            {{ ucfirst($leaveRequest->status->name) }}
                                        </span>
                                        <br>
                                        <span class="text-xs text-gray-500">{{ $leaveRequest->approved_at->format('F d, Y h:i A') }}</span>
                                    </div>
                                </div>
                                @if($leaveRequest->approval_notes)
                                    <div class="border-t border-{{ $leaveRequest->status->name === 'approved' ? 'green' : 'red' }}-200 pt-2 mt-2">
                                        <span class="text-sm font-medium text-gray-700">Notes:</span> {{ $leaveRequest->approval_notes }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif

                    <!-- Action Buttons -->
                    @if($leaveRequest->status->name === 'pending')
                        <div class="flex gap-3">
                            <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" onclick="approveLeave({{ $leaveRequest->id }})">
                                <i class="fas fa-check mr-2"></i> Approve
                            </button>
                            <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" onclick="rejectLeave({{ $leaveRequest->id }})">
                                <i class="fas fa-times mr-2"></i> Reject
                            </button>
                            <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" onclick="deleteLeave({{ $leaveRequest->id }})">
                                <i class="fas fa-trash mr-2"></i> Delete
                            </button>
                            <a href="{{ route('leave.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                <i class="fas fa-arrow-left mr-2"></i> Back to List
                            </a>
                        </div>
                    @else
                        <div class="flex gap-3">
                            @if(in_array($leaveRequest->status->name, ['pending', 'rejected']))
                                <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" onclick="deleteLeave({{ $leaveRequest->id }})">
                                    <i class="fas fa-trash mr-2"></i> Delete
                                </button>
                            @endif
                            <a href="{{ route('leave.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                <i class="fas fa-arrow-left mr-2"></i> Back to List
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="lg:col-span-1">
            <!-- Leave Balance -->
            @if($leaveBalance)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h6 class="text-sm font-medium text-gray-900">Leave Balance ({{ $leaveBalance->year }})</h6>
                    </div>
                    <div class="p-6">
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-sm text-gray-500">Total Days</span>
                                <span class="text-sm font-medium text-gray-900">{{ $leaveBalance->total_days }}</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
                                <div class="bg-green-500 h-2 rounded-full" style="width: {{ ($leaveBalance->remaining_days / $leaveBalance->total_days) * 100 }}%"></div>
                            </div>
                        </div>
                        <div class="grid grid-cols-3 text-center">
                            <div>
                                <div class="text-green-600 font-medium">{{ $leaveBalance->remaining_days }}</div>
                                <div class="text-xs text-gray-500">Available</div>
                            </div>
                            <div>
                                <div class="text-yellow-600 font-medium">{{ $leaveRequest->days_count }}</div>
                                <div class="text-xs text-gray-500">This Request</div>
                            </div>
                            <div>
                                <div class="text-red-600 font-medium">{{ $leaveBalance->used_days }}</div>
                                <div class="text-xs text-gray-500">Used</div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Leave History -->
            @if($leaveHistory->count() > 0)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h6 class="text-sm font-medium text-gray-900">Recent Leave History</h6>
                    </div>
                    <div class="p-6">
                        <div class="space-y-4">
                            @foreach($leaveHistory as $history)
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <div class="w-2 h-2 rounded-full bg-{{ $history->status->name === 'approved' ? 'green' : ($history->status->name === 'rejected' ? 'red' : 'yellow') }}-500 mt-1.5"></div>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <span class="text-sm font-medium text-gray-900">{{ $history->leaveType->name }}</span>
                                                <div class="text-xs text-gray-500">
                                                    {{ $history->from_date->format('M d') }} - {{ $history->to_date->format('M d, Y') }}
                                                </div>
                                                <div class="text-xs text-gray-500">{{ $history->days_count }} day(s)</div>
                                            </div>
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $history->status->name === 'approved' ? 'green' : ($history->status->name === 'rejected' ? 'red' : 'yellow') }}-100 text-{{ $history->status->name === 'approved' ? 'green' : ($history->status->name === 'rejected' ? 'red' : 'yellow') }}-800">
                                                {{ ucfirst($history->status->name) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modals -->
@include('leave.partials.tailwind-modals')
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<script>
let currentLeaveId = null;

function approveLeave(leaveId) {
    currentLeaveId = leaveId;
    showModal('approveModal');
}

function rejectLeave(leaveId) {
    currentLeaveId = leaveId;
    showModal('rejectModal');
}

function deleteLeave(leaveId) {
    if (confirm('Are you sure you want to delete this leave request?')) {
        $.ajax({
            url: `/leave/${leaveId}`,
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    window.location.href = '{{ route("leave.index") }}';
                } else {
                    alert(response.message);
                }
            },
            error: function(xhr) {
                alert(xhr.responseJSON?.message || 'An error occurred');
            }
        });
    }
}

$('#approveForm').on('submit', function(e) {
    e.preventDefault();
    
    $.ajax({
        url: `/leave/${currentLeaveId}/approve`,
        method: 'POST',
        data: $(this).serialize(),
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.success) {
                closeModal('approveModal');
                location.reload();
            } else {
                alert(response.message);
            }
        },
        error: function(xhr) {
            alert(xhr.responseJSON?.message || 'An error occurred');
        }
    });
});

$('#rejectForm').on('submit', function(e) {
    e.preventDefault();
    
    $.ajax({
        url: `/leave/${currentLeaveId}/reject`,
        method: 'POST',
        data: $(this).serialize(),
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.success) {
                closeModal('rejectModal');
                location.reload();
            } else {
                alert(response.message);
            }
        },
        error: function(xhr) {
            alert(xhr.responseJSON?.message || 'An error occurred');
        }
    });
});
</script>
@endsection