@extends('admin.layout')

@section('title', 'Task Details')

@section('header', 'Task Details')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Back Navigation -->
    <div class="mb-6">
        <a href="{{ route('admin.tasks.index') }}" class="inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Tasks
        </a>
    </div>

    <!-- Task Header Card -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 px-6 py-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-white">{{ $task->title }}</h1>
                    <p class="text-white/80 mt-1">
                        Created on {{ $task->created_at->format('F d, Y \a\t g:i A') }}
                    </p>
                </div>
                <div class="flex space-x-3">
                    <a href="{{ route('admin.tasks.edit', $task) }}" 
                       class="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur-sm text-white rounded-lg hover:bg-white/30 transition-all duration-200 border border-white/30">
                        <i class="fas fa-edit mr-2"></i>Edit
                    </a>
                    @if($task->status === 'completed' && !$task->isPaid())
                        <button onclick="showPaymentModal()" 
                                class="inline-flex items-center px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all duration-200 shadow-md">
                            <i class="fas fa-dollar-sign mr-2"></i>Record Payment
                        </button>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="p-6">
            <!-- Status and Priority Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-sm font-medium text-blue-600 mb-1">Status</h3>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-{{ $task->getStatusColor() }}-100 text-{{ $task->getStatusColor() }}-800">
                                {{ ucfirst(str_replace('_', ' ', $task->status)) }}
                            </span>
                        </div>
                        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-info-circle text-blue-600"></i>
                        </div>
                    </div>
                    @if($task->assigned_at)
                        <p class="mt-2 text-xs text-blue-600">
                            Assigned: {{ $task->assigned_at->format('M d, Y g:i A') }}
                        </p>
                    @endif
                    @if($task->completed_at)
                        <p class="mt-1 text-xs text-blue-600">
                            Completed: {{ $task->completed_at->format('M d, Y g:i A') }}
                        </p>
                    @endif
                </div>

                <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-4 border border-purple-100">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-sm font-medium text-purple-600 mb-1">Priority</h3>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-{{ $task->getPriorityColor() }}-100 text-{{ $task->getPriorityColor() }}-800">
                                {{ ucfirst($task->priority) }}
                            </span>
                        </div>
                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-flag text-purple-600"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-4 border border-green-100">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-sm font-medium text-green-600 mb-1">Technician</h3>
                            <p class="text-sm font-medium text-gray-900">
                                {{ $task->technician->name ?? 'Not Assigned' }}
                            </p>
                        </div>
                        <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-tools text-green-600"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl p-4 border border-yellow-100">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-sm font-medium text-yellow-600 mb-1">Payment</h3>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium 
                                @if($task->isPaid()) bg-green-100 text-green-800
                                @elseif($task->status === 'completed') bg-orange-100 text-orange-800
                                @else bg-gray-100 text-gray-800 @endif">
                                @if($task->isPaid()) Paid
                                @elseif($task->status === 'completed') Pending
                                @else Not Available
                                @endif
                            </span>
                        </div>
                        <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-dollar-sign text-yellow-600"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Description -->
            @if($task->description)
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                        <div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mr-2">
                            <i class="fas fa-file-alt text-gray-600 text-sm"></i>
                        </div>
                        Description
                    </h3>
                    <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                        <p class="text-gray-700 leading-relaxed">{{ nl2br($task->description) }}</p>
                    </div>
                </div>
            @endif

            <!-- Linked Ticket -->
            @if($task->ticket)
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-2">
                            <i class="fas fa-ticket-alt text-blue-600 text-sm"></i>
                        </div>
                        Linked Ticket
                    </h3>
                    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6 border border-blue-200">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <div class="bg-white rounded-lg p-3">
                                <p class="text-xs font-medium text-blue-600 mb-1">Ticket ID</p>
                                <p class="text-sm font-semibold text-blue-900">#{{ $task->ticket->ticket_id }}</p>
                            </div>
                            <div class="bg-white rounded-lg p-3">
                                <p class="text-xs font-medium text-blue-600 mb-1">Customer</p>
                                <p class="text-sm text-blue-900">{{ $task->ticket->first_name }} {{ $task->ticket->last_name }}</p>
                            </div>
                            <div class="bg-white rounded-lg p-3">
                                <p class="text-xs font-medium text-blue-600 mb-1">Email</p>
                                <p class="text-sm text-blue-900">{{ $task->ticket->email }}</p>
                            </div>
                            <div class="bg-white rounded-lg p-3">
                                <p class="text-xs font-medium text-blue-600 mb-1">Phone</p>
                                <p class="text-sm text-blue-900">{{ $task->ticket->phone }}</p>
                            </div>
                            <div class="bg-white rounded-lg p-3">
                                <p class="text-xs font-medium text-blue-600 mb-1">Apartment</p>
                                <p class="text-sm text-blue-900">{{ $task->ticket->apartment->name ?? 'N/A' }}</p>
                            </div>
                            <div class="bg-white rounded-lg p-3">
                                <p class="text-xs font-medium text-blue-600 mb-1">Location</p>
                                <p class="text-sm text-blue-900">{{ $task->ticket->block_name }} - {{ $task->ticket->floor_number }} - {{ $task->ticket->room_number }}</p>
                            </div>
                        </div>
                        @if($task->ticket->issue_description)
                            <div class="mt-4 bg-white rounded-lg p-3">
                                <p class="text-xs font-medium text-blue-600 mb-2">Issue Description</p>
                                <p class="text-sm text-blue-900">{{ $task->ticket->issue_description }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            <!-- Two Column Layout for Technician and Payment -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <!-- Technician Assignment -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                        <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-2">
                            <i class="fas fa-tools text-green-600 text-sm"></i>
                        </div>
                        Technician Assignment
                    </h3>
                    <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-4 border border-green-200">
                        @if($task->technician)
                            <div class="bg-white rounded-lg p-4">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <p class="text-sm font-semibold text-gray-900 mb-1">{{ $task->technician->name }}</p>
                                        <p class="text-sm text-gray-600 mb-1">{{ $task->technician->email }}</p>
                                        <p class="text-sm text-gray-600">{{ $task->technician->phone }}</p>
                                    </div>
                                    <div>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $task->technician->status === 'free' ? 'green' : 'yellow' }}-100 text-{{ $task->technician->status === 'free' ? 'green' : 'yellow' }}-800">
                                            {{ ucfirst($task->technician->status) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="text-center py-4">
                                <i class="fas fa-user-slash text-3xl text-gray-400 mb-2"></i>
                                <p class="text-sm text-gray-500 mb-3">No technician assigned</p>
                                @if($task->status === 'pending')
                                    <form action="{{ route('admin.tasks.assign-technician', $task) }}" method="POST">
                                        @csrf
                                        <div class="flex flex-col sm:flex-row gap-2">
                                            <select name="technician_id" required
                                                    class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                                <option value="">Select Technician</option>
                                                @foreach(\App\Models\Technician::free()->get() as $technician)
                                                    <option value="{{ $technician->id }}">{{ $technician->name }}</option>
                                                @endforeach
                                            </select>
                                            <button type="submit" 
                                                    class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors">
                                                Assign
                                            </button>
                                        </div>
                                    </form>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Payment Information -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                        <div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center mr-2">
                            <i class="fas fa-dollar-sign text-yellow-600 text-sm"></i>
                        </div>
                        Payment Information
                    </h3>
                    <div class="bg-gradient-to-br {{ $task->isPaid() ? 'from-green-50 to-emerald-50 border-green-200' : ($task->status === 'completed' ? 'from-orange-50 to-yellow-50 border-orange-200' : 'from-gray-50 to-slate-50 border-gray-200') }} rounded-xl p-4 border">
                        @if($task->isPaid())
                            <div class="bg-white rounded-lg p-4">
                                <div class="flex items-center mb-3">
                                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-check text-white"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-semibold text-green-800">Payment Completed</h4>
                                        <p class="text-xs text-green-600">Payment successfully recorded</p>
                                    </div>
                                </div>
                                <div class="grid grid-cols-2 gap-3">
                                    <div>
                                        <p class="text-xs text-gray-500 mb-1">Amount</p>
                                        <p class="text-lg font-bold text-green-600">${{ number_format($task->payment_amount, 2) }}</p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 mb-1">Method</p>
                                        <p class="text-sm font-medium text-gray-900">{{ ucfirst(str_replace('_', ' ', $task->payment_method)) }}</p>
                                    </div>
                                </div>
                            </div>
                        @elseif($task->status === 'completed' && !$task->isPaid())
                            <div class="bg-white rounded-lg p-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center mr-3 animate-pulse">
                                            <i class="fas fa-dollar-sign text-white"></i>
                                        </div>
                                        <div>
                                            <h4 class="text-sm font-semibold text-orange-800">Payment Required</h4>
                                            <p class="text-xs text-orange-600">Task completed but payment not recorded</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <a href="{{ route('admin.payments.create', $task) }}" 
                                       class="w-full inline-flex items-center justify-center px-4 py-2 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg hover:from-green-700 hover:to-emerald-700 transition-all duration-200">
                                        <i class="fas fa-plus-circle mr-2"></i>Record Payment
                                    </a>
                                </div>
                            </div>
                        @else
                            <div class="bg-white rounded-lg p-4">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gray-400 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-clock text-white"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-semibold text-gray-700">Payment Pending</h4>
                                        <p class="text-xs text-gray-500">Payment will be available when task is completed</p>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Admin Notes -->
            @if($task->admin_notes)
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                        <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center mr-2">
                            <i class="fas fa-sticky-note text-purple-600 text-sm"></i>
                        </div>
                        Admin Notes
                    </h3>
                    <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-4 border border-purple-200">
                        <p class="text-gray-700 leading-relaxed">{{ nl2br($task->admin_notes) }}</p>
                    </div>
                </div>
            @endif

            <!-- Status Update -->
            @if($task->status !== 'completed')
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                        <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center mr-2">
                            <i class="fas fa-sync-alt text-indigo-600 text-sm"></i>
                        </div>
                        Update Status
                    </h3>
                    <div class="bg-gradient-to-br from-indigo-50 to-blue-50 rounded-xl p-4 border border-indigo-200">
                        <form action="{{ route('admin.tasks.update-status', $task) }}" method="POST">
                            @csrf
                            <div class="flex flex-col sm:flex-row gap-3">
                                <select name="status" required
                                        class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                    <option value="{{ $task->status }}" selected>{{ ucfirst(str_replace('_', ' ', $task->status)) }}</option>
                                    @if($task->status === 'pending')
                                        <option value="assigned">Assigned</option>
                                    @endif
                                    @if($task->status === 'assigned')
                                        <option value="in_progress">In Progress</option>
                                        <option value="pending">Pending</option>
                                    @endif
                                    @if($task->status === 'in_progress')
                                        <option value="completed">Completed</option>
                                        <option value="assigned">Assigned</option>
                                    @endif
                                </select>
                                <button type="submit" 
                                        class="px-6 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors">
                                    Update Status
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Payment Modal -->
<div id="paymentModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full 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">Record Payment</h3>
            <form action="{{ route('admin.tasks.record-payment', $task) }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Amount ($)</label>
                    <input type="number" name="payment_amount" step="0.01" min="0" required
                           class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
                    <select name="payment_method" required
                            class="w-full border border-gray-300 rounded-lg px-3 py-2">
                        <option value="">Select Method</option>
                        <option value="cash">Cash</option>
                        <option value="bank_transfer">Bank Transfer</option>
                        <option value="check">Check</option>
                        <option value="online">Online Payment</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Notes (Optional)</label>
                    <textarea name="payment_notes" rows="3"
                              class="w-full border border-gray-300 rounded-lg px-3 py-2"></textarea>
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="hidePaymentModal()"
                            class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400">
                        Cancel
                    </button>
                    <button type="submit"
                            class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                        Record Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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

function hidePaymentModal() {
    document.getElementById('paymentModal').classList.add('hidden');
    document.querySelector('#paymentModal form').reset();
}
</script>
@endsection