@extends('admin.layout')

@section('title', 'Edit Ticket')

@section('header', 'Edit Ticket')

@section('content')
<div class="px-8">
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-xl shadow-lg p-8">
        <div class="flex items-center justify-between mb-8">
            <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-edit text-blue-600 text-xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold text-gray-800">Edit Ticket</h2>
                    <p class="text-sm text-gray-500 mt-1">Modify ticket information and details</p>
                </div>
            </div>
            <div class="flex items-center space-x-3">
                <span class="text-sm font-medium text-gray-500">Ticket ID:</span>
                <span class="px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg text-sm font-semibold shadow-sm">
                    {{ $ticket->ticket_id }}
                </span>
            </div>
        </div>

        @if ($errors->any())
            <div class="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-400"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">There were errors with your submission:</h3>
                        <div class="mt-2 text-sm text-red-700">
                            <ul class="list-disc list-inside space-y-1">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <form action="{{ route('admin.tickets.update', $ticket) }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')
            
            <!-- Customer Information Section -->
            <div class="border-b border-gray-200 pb-8">
                <div class="flex items-center mb-6">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-user text-blue-600 text-sm"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800">Customer Information</h3>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="first_name" class="block text-sm font-medium text-gray-700 mb-2">
                            First Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="first_name" name="first_name" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            value="{{ old('first_name', $ticket->first_name) }}" placeholder="John">
                    </div>

                    <div>
                        <label for="last_name" class="block text-sm font-medium text-gray-700 mb-2">
                            Last Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="last_name" name="last_name" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            value="{{ old('last_name', $ticket->last_name) }}" placeholder="Doe">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                            Email Address <span class="text-red-500">*</span>
                        </label>
                        <input type="email" id="email" name="email" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            value="{{ old('email', $ticket->email) }}" placeholder="john.doe@example.com">
                    </div>

                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                            Phone Number <span class="text-red-500">*</span>
                        </label>
                        <input type="tel" id="phone" name="phone" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            value="{{ old('phone', $ticket->phone) }}" placeholder="+1 (555) 123-4567">
                    </div>
                </div>
            </div>

            <!-- Ticket Details Section -->
            <div class="border-b border-gray-200 pb-8">
                <div class="flex items-center mb-6">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-ticket-alt text-blue-600 text-sm"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800">Ticket Details</h3>
                </div>

                <div>
                    <label for="apartment_id" class="block text-sm font-medium text-gray-700 mb-2">
                        Apartment <span class="text-red-500">*</span>
                    </label>
                    <select id="apartment_id" name="apartment_id" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">Select an apartment</option>
                        @foreach($apartments as $apartment)
                            <option value="{{ $apartment->id }}" 
                                {{ old('apartment_id', $ticket->apartment_id) == $apartment->id ? 'selected' : '' }}>
                                {{ $apartment->name }} - {{ $apartment->location }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="mt-4">
                    <label for="priority" class="block text-sm font-medium text-gray-700 mb-2">
                        Priority Level <span class="text-red-500">*</span>
                    </label>
                    <select id="priority" name="priority" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">Select priority</option>
                        <option value="low" {{ old('priority', $ticket->priority) == 'low' ? 'selected' : '' }}>Low - Minor issue</option>
                        <option value="medium" {{ old('priority', $ticket->priority) == 'medium' ? 'selected' : '' }}>Medium - Moderate issue</option>
                        <option value="high" {{ old('priority', $ticket->priority) == 'high' ? 'selected' : '' }}>High - Urgent issue</option>
                    </select>
                </div>

                <div class="mt-4">
                    <label for="issue_description" class="block text-sm font-medium text-gray-700 mb-2">
                        Issue Description <span class="text-red-500">*</span>
                    </label>
                    <textarea id="issue_description" name="issue_description" rows="4" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="Please describe the issue in detail...">{{ old('issue_description', $ticket->issue_description) }}</textarea>
                    <p class="text-sm text-gray-500 mt-1">Maximum 1000 characters</p>
                </div>

                <!-- Current Status Display -->
                <div class="mt-6 p-5 bg-gradient-to-r from-gray-50 to-blue-50 rounded-xl border border-gray-200">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-sm">
                                <i class="fas fa-info-circle text-gray-600"></i>
                            </div>
                            <div>
                                <span class="text-sm font-medium text-gray-700">Current Status:</span>
                                <div class="mt-1">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
                                        @if($ticket->status == 'completed') bg-green-100 text-green-800 ring-1 ring-green-200
                                        @elseif($ticket->status == 'in_progress') bg-blue-100 text-blue-800 ring-1 ring-blue-200
                                        @elseif($ticket->status == 'assigned') bg-yellow-100 text-yellow-800 ring-1 ring-yellow-200
                                        @else bg-gray-100 text-gray-800 ring-1 ring-gray-200 @endif">
                                        {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        @if($ticket->technician)
                            <div class="flex items-center space-x-2 text-sm text-gray-600">
                                <i class="fas fa-user-check text-gray-400"></i>
                                <span class="font-medium">Assigned to:</span> 
                                <span class="text-gray-800">{{ $ticket->technician->name }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex justify-between items-center pt-8">
                <div>
                    <a href="{{ route('admin.tickets.show', $ticket) }}" 
                       class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors duration-200 font-medium">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Back to Ticket
                    </a>
                </div>
                <div class="flex space-x-4">
                    <a href="{{ route('admin.tickets.index') }}" 
                       class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors duration-200 font-medium">
                        <i class="fas fa-times mr-2"></i>
                        Cancel
                    </a>
                    <button type="submit" 
                            class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 font-medium shadow-sm hover:shadow-md">
                        <i class="fas fa-save mr-2"></i>
                        Update Ticket
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection