@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">Edit Request</h1>
                <div class="mt-2 inline-flex items-center gap-2 text-sm bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-1 rounded-full">
                    <i class="fas fa-edit text-xs"></i>
                    <span>ID: {{ $serviceRequest->id }}</span>
                </div>
            </div>
            <a href="{{ route('admin.service-requests.show', $serviceRequest) }}" 
               class="inline-flex items-center gap-2 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 
                      px-4 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                <i class="fas fa-arrow-left text-sm"></i>
                Back to Details
            </a>
        </div>
    </div>

    <form action="{{ route('admin.service-requests.update', $serviceRequest) }}" method="POST">
        @csrf
        @method('PUT')
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Column (2/3) -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Contact Information (Read-only) -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center">
                            <i class="fas fa-user text-blue-500 dark:text-blue-400 text-sm"></i>
                        </div>
                        Contact Information
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-500 dark:text-gray-400">
                        <div class="space-y-1">
                            <p class="text-sm font-medium">Full Name</p>
                            <p>{{ $contactInfo['name'] ?? 'N/A' }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-sm font-medium">Email</p>
                            <p>{{ $contactInfo['email'] ?? 'N/A' }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-sm font-medium">Phone</p>
                            <p>{{ $contactInfo['phone'] ?? 'N/A' }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-sm font-medium">Company</p>
                            <p>{{ $contactInfo['company'] ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>

                <!-- Business Information -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-green-50 dark:bg-green-900/20 flex items-center justify-center">
                            <i class="fas fa-briefcase text-green-500 dark:text-green-400 text-sm"></i>
                        </div>
                        Business Information
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Business Type</label>
                            <select name="business_type_id" 
                                    class="w-full border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 text-sm
                                           bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white 
                                           focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">
                                @foreach($businessTypes as $type)
                                    <option value="{{ $type->id }}" {{ $serviceRequest->business_type_id == $type->id ? 'selected' : '' }}>
                                        {{ $type->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Business Model</label>
                            <select name="business_model_id" 
                                    class="w-full border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 text-sm
                                           bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white 
                                           focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">
                                @foreach($businessModels as $model)
                                    <option value="{{ $model->id }}" {{ $serviceRequest->business_model_id == $model->id ? 'selected' : '' }}>
                                        {{ $model->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Branch</label>
                            <select name="branch_id" 
                                    class="w-full border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 text-sm
                                           bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white 
                                           focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}" {{ $serviceRequest->branch_id == $branch->id ? 'selected' : '' }}>
                                        {{ $branch->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Services Requested (Read-only) -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center">
                            <i class="fas fa-list-alt text-purple-500 dark:text-purple-400 text-sm"></i>
                        </div>
                        Services Requested ({{ count($servicesData) }})
                    </h3>
                    <div class="space-y-3 text-gray-500 dark:text-gray-400">
                        @foreach($servicesData as $index => $service)
                            <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-lg bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center flex-shrink-0">
                                        <i class="fas fa-cog text-purple-500 dark:text-purple-400 text-sm"></i>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-medium">{{ $service['name'] ?? 'Unnamed Service' }}</p>
                                        @if($service['description'] ?? false)
                                            <p class="text-xs mt-1">{{ Str::limit($service['description'], 80) }}</p>
                                        @endif
                                    </div>
                                </div>
                                @if($service['price'] ?? false)
                                    <span class="text-sm font-semibold">
                                        {{ number_format($service['price'], 0) }} SR
                                    </span>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Right Column (1/3) -->
            <div class="space-y-6">
                <!-- Request Settings -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center">
                            <i class="fas fa-cog text-orange-500 dark:text-orange-400 text-sm"></i>
                        </div>
                        Request Settings
                    </h3>
                    <div class="space-y-4">
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
                            <select name="status" 
                                    class="w-full border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 text-sm
                                           bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white 
                                           focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">
                                @foreach($statuses as $value => $label)
                                    <option value="{{ $value }}" {{ $serviceRequest->status == $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Total Price (SR)</label>
                            <input type="number" 
                                   name="total_price" 
                                   value="{{ $serviceRequest->total_price }}" 
                                   step="0.01"
                                   min="0"
                                   required
                                   class="w-full border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 text-sm
                                          bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white 
                                          focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">
                        </div>

                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Package Type</label>
                            <input type="text" 
                                   value="{{ ucfirst($serviceRequest->package_type) }}" 
                                   readonly
                                   class="w-full border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 text-sm
                                          bg-gray-50 dark:bg-gray-700/50 text-gray-500 dark:text-gray-400">
                        </div>
                    </div>
                </div>

                <!-- Admin Notes -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 flex items-center justify-center">
                            <i class="fas fa-sticky-note text-yellow-500 dark:text-yellow-400 text-sm"></i>
                        </div>
                        Admin Notes
                    </h3>
                    <textarea name="admin_notes" 
                              rows="4"
                              placeholder="Add any internal notes or comments about this request..."
                              class="w-full border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 text-sm
                                     bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white 
                                     focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">{{ old('admin_notes', $serviceRequest->admin_notes) }}</textarea>
                </div>

                <!-- Action Buttons -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <div class="space-y-3">
                        <button type="submit" 
                                class="w-full inline-flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white 
                                       px-4 py-2 rounded-lg hover:from-blue-600 hover:to-blue-700 active:scale-[0.98] transition-all shadow-sm hover:shadow">
                            <i class="fas fa-save text-sm"></i>
                            Update Request
                        </button>
                        
                        <a href="{{ route('admin.service-requests.show', $serviceRequest) }}" 
                           class="w-full inline-flex items-center justify-center gap-2 border border-gray-200 dark:border-gray-700 
                                  text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                            <i class="fas fa-times text-sm"></i>
                            Cancel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
    select:focus, input:focus, textarea:focus {
        outline: none;
    }
    
    input[readonly] {
        cursor: not-allowed;
    }
</style>
@endsection