@extends('dashboard.layout')

@section('content')
<div class="flex flex-col h-full overflow-auto py-2">
 

    <!-- Desktop Header -->
    <div class="hidden md:block mb-6 ">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Service Request Details</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Request ID: {{ $serviceRequest->id }}</p>
            </div>
            <div class="flex items-center space-x-3">
                <a href="{{ route('dashboard.service.requests') }}" 
                   class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to List
                </a>
            </div>
        </div>
    </div>

    <!-- Mobile Action Menu -->
    <div id="mobileActionMenu" class="md:hidden hidden absolute right-4 top-16 bg-white dark:bg-dark-secondary rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
        <div class="p-2">
            <a href="{{ route('dashboard.service.requests') }}" 
               class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
                <i class="fas fa-list mr-3"></i>
                Back to List
            </a>
        </div>
    </div>

    <!-- Main Content -->
    <div class="px-4 md:px-0 pb-20 md:pb-0">
        <!-- Request Summary Card (Mobile Top) -->
        <div class="md:hidden bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 mb-4">
            <div class="flex items-center justify-between mb-3">
                <div>
                    <h3 class="text-base font-semibold text-gray-900 dark:text-white">Request Summary</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400">ID: {{ $serviceRequest->id }}</p>
                </div>
                @php
                    $statusColors = [
                        'pending' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
                        'in_progress' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
                        'approved' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                        'cancelled' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
                    ];
                    $statusLabels = [
                        'pending' => 'Pending',
                        'in_progress' => 'In Progress',
                        'approved' => 'Approved',
                        'cancelled' => 'Cancelled'
                    ];
                @endphp
                <span class="px-2 py-1 rounded-full text-xs font-semibold {{ $statusColors[$serviceRequest->status] }}">
                    {{ $statusLabels[$serviceRequest->status] }}
                </span>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400">Package</p>
                    <p class="text-sm font-semibold text-gray-900 dark:text-white capitalize">{{ $serviceRequest->package_type }}</p>
                </div>
                <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400">Total</p>
                    <p class="text-lg font-bold text-green-600 dark:text-green-400">{{ number_format($serviceRequest->total_price, 2) }} SR</p>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">
            <!-- Left Column -->
            <div class="lg:col-span-2 space-y-4 md:space-y-6">
                <!-- Contact Information -->
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 md:p-6">
                    <h3 class="text-base md:text-lg font-semibold text-gray-900 dark:text-white mb-3 md:mb-4 flex items-center">
                        <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center mr-2">
                            <i class="fas fa-user-circle 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-3 md:gap-4">
                        <div>
                            <label class="text-xs md:text-sm font-medium text-gray-500 dark:text-gray-400">Full Name</label>
                            <p class="text-sm md:text-base text-gray-900 dark:text-white font-medium">{{ $contactInfo['name'] ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <label class="text-xs md:text-sm font-medium text-gray-500 dark:text-gray-400">Email</label>
                            <p class="text-sm md:text-base text-gray-900 dark:text-white">{{ $contactInfo['email'] ?? 'N/A' }}</p>
                        </div>
                        <div class="mt-3 md:mt-0">
                            <label class="text-xs md:text-sm font-medium text-gray-500 dark:text-gray-400">Phone</label>
                            <p class="text-sm md:text-base text-gray-900 dark:text-white">{{ $contactInfo['phone'] ?? 'N/A' }}</p>
                        </div>
                        <div class="mt-3 md:mt-0">
                            <label class="text-xs md:text-sm font-medium text-gray-500 dark:text-gray-400">Company</label>
                            <p class="text-sm md:text-base text-gray-900 dark:text-white">{{ $contactInfo['company'] ?? 'N/A' }}</p>
                        </div>
                    </div>
                    
                    <!-- Contact Actions (Mobile) -->
                    <div class="md:hidden mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                        <div class="flex space-x-2">
                            @if($contactInfo['email'] ?? false)
                                <a href="mailto:{{ $contactInfo['email'] }}" 
                                   class="flex-1 px-3 py-2 bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 text-sm font-medium rounded text-center">
                                    <i class="fas fa-envelope mr-1"></i>
                                    Email
                                </a>
                            @endif
                            @if($contactInfo['phone'] ?? false)
                                <a href="tel:{{ $contactInfo['phone'] }}" 
                                   class="flex-1 px-3 py-2 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 text-sm font-medium rounded text-center">
                                    <i class="fas fa-phone mr-1"></i>
                                    Call
                                </a>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Business Information -->
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 md:p-6">
                    <h3 class="text-base md:text-lg font-semibold text-gray-900 dark:text-white mb-3 md:mb-4 flex items-center">
                        <div class="w-8 h-8 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center mr-2">
                            <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-3 md:gap-4">
                        <div>
                            <label class="text-xs md:text-sm font-medium text-gray-500 dark:text-gray-400">Business Type</label>
                            <p class="text-sm md:text-base text-gray-900 dark:text-white font-medium">{{ $serviceRequest->businessType->name ?? 'N/A' }}</p>
                        </div>
                        <div class="mt-3 md:mt-0">
                            <label class="text-xs md:text-sm font-medium text-gray-500 dark:text-gray-400">Business Model</label>
                            <p class="text-sm md:text-base text-gray-900 dark:text-white">{{ $serviceRequest->businessModel->name ?? 'N/A' }}</p>
                        </div>
                        <div class="mt-3 md:mt-0">
                            <label class="text-xs md:text-sm font-medium text-gray-500 dark:text-gray-400">Branch</label>
                            <p class="text-sm md:text-base text-gray-900 dark:text-white">{{ $serviceRequest->branch->name ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>

                <!-- Services Requested -->
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 md:p-6">
                    <div class="flex items-center justify-between mb-3 md:mb-4">
                        <h3 class="text-base md:text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                            <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center mr-2">
                                <i class="fas fa-list-alt text-purple-500 dark:text-purple-400 text-sm"></i>
                            </div>
                            Services Requested
                        </h3>
                        <span class="px-2 py-1 bg-purple-100 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 text-xs font-medium rounded">
                            {{ count($servicesData) }} services
                        </span>
                    </div>
                    <div class="space-y-2 md:space-y-3">
                        @php
                            $totalPrice = 0;
                        @endphp
                        @foreach($servicesData as $index => $service)
                            @php
                                $price = $service['price'] ?? 0;
                                $totalPrice += $price;
                            @endphp
                            <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 md:w-8 md:h-8 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center mr-2 md:mr-3">
                                        <i class="fas fa-cog text-purple-500 dark:text-purple-400 text-xs md:text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $service['name'] ?? 'Unnamed Service' }}</p>
                                        @if($service['description'] ?? false)
                                            <p class="text-xs text-gray-500 dark:text-gray-400 line-clamp-1">{{ $service['description'] }}</p>
                                        @endif
                                    </div>
                                </div>
                                @if($price > 0)
                                    <span class="text-sm font-semibold text-gray-900 dark:text-white">
                                        {{ number_format($price, 2) }} SR 
                                    </span>
                                @endif
                            </div>
                        @endforeach
                        
                        <!-- Service Price Summary (Mobile) -->
                        <div class="md:hidden mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Services Total:</span>
                                <span class="text-base font-bold text-gray-900 dark:text-white">{{ number_format($totalPrice, 2) }} SR</span>
                            </div>
                            @if($totalPrice < $serviceRequest->total_price)
                                <div class="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
                                    <div class="flex justify-between items-center">
                                        <span class="text-xs text-gray-500 dark:text-gray-400">Other charges:</span>
                                        <span class="text-sm text-gray-700 dark:text-gray-300">{{ number_format($serviceRequest->total_price - $totalPrice, 2) }} SR</span>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column -->
            <div class="space-y-4 md:space-y-6">
                <!-- Request Summary (Desktop) -->
                <div class="hidden md:block bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                        <div class="w-8 h-8 bg-orange-100 dark:bg-orange-900/20 rounded-lg flex items-center justify-center mr-2">
                            <i class="fas fa-file-invoice-dollar text-orange-500 dark:text-orange-400 text-sm"></i>
                        </div>
                        Request Summary
                    </h3>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600 dark:text-gray-400">Package Type:</span>
                            <span class="font-medium text-gray-900 dark:text-white capitalize">{{ $serviceRequest->package_type }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600 dark:text-gray-400">Total Price:</span>
                            <span class="text-lg font-bold text-green-600 dark:text-green-400">{{ number_format($serviceRequest->total_price, 2) }} SR</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600 dark:text-gray-400">Status:</span>
                            <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $statusColors[$serviceRequest->status] }}">
                                {{ $statusLabels[$serviceRequest->status] }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600 dark:text-gray-400">Created:</span>
                            <span class="text-sm text-gray-900 dark:text-white">{{ $serviceRequest->created_at->format('M j, Y g:i A') }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600 dark:text-gray-400">Last Updated:</span>
                            <span class="text-sm text-gray-900 dark:text-white">{{ $serviceRequest->updated_at->format('M j, Y g:i A') }}</span>
                        </div>
                    </div>
                </div>

                <!-- Timestamps (Mobile) -->
                <div class="md:hidden bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-4">
                    <h3 class="text-base font-semibold text-gray-900 dark:text-white mb-3">Timestamps</h3>
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-gray-500 dark:text-gray-400">Created:</span>
                            <span class="text-xs text-gray-900 dark:text-white">{{ $serviceRequest->created_at->format('M j, Y') }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-gray-500 dark:text-gray-400">Time:</span>
                            <span class="text-xs text-gray-900 dark:text-white">{{ $serviceRequest->created_at->format('g:i A') }}</span>
                        </div>
                        <div class="pt-2 border-t border-gray-200 dark:border-gray-700">
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated:</span>
                                <span class="text-xs text-gray-900 dark:text-white">{{ $serviceRequest->updated_at->format('M j, Y') }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Admin Notes -->
                @if($serviceRequest->admin_notes)
                    <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 md:p-6">
                        <h3 class="text-base md:text-lg font-semibold text-gray-900 dark:text-white mb-3 md:mb-4 flex items-center">
                            <div class="w-8 h-8 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center mr-2">
                                <i class="fas fa-sticky-note text-yellow-500 dark:text-yellow-400 text-sm"></i>
                            </div>
                            Admin Notes
                        </h3>
                        <p class="text-sm text-gray-700 dark:text-gray-300 bg-yellow-50 dark:bg-yellow-900/20 p-3 rounded-lg">
                            {{ $serviceRequest->admin_notes }}
                        </p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Mobile Action Bar -->
    <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-dark-secondary border-t border-gray-200 dark:border-gray-700 p-3 shadow-lg z-10">
        <div class="flex items-center justify-between">
            <a href="{{ route('dashboard.service.requests') }}" 
               class="flex-1 mr-2 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-center text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-dark-secondary hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>
                Back
            </a>
            <button onclick="shareRequest()" 
                    class="flex-1 ml-2 px-4 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg text-sm font-medium hover:from-blue-600 hover:to-blue-700 transition-colors">
                <i class="fas fa-share mr-2"></i>
                Share
            </button>
        </div>
    </div>
</div>

<style>
    .line-clamp-1 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .line-clamp-2 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    @media (max-width: 768px) {
        .mobile-card {
            margin: 0.5rem;
        }
        
        h1 {
            font-size: 1.5rem;
        }
        
        h2 {
            font-size: 1.25rem;
        }
        
        h3 {
            font-size: 1.1rem;
        }
    }
</style>

<script>
    // Mobile action menu toggle
    document.getElementById('mobileMenuBtn')?.addEventListener('click', function() {
        const menu = document.getElementById('mobileActionMenu');
        menu.classList.toggle('hidden');
        
        // Close menu when clicking outside
        document.addEventListener('click', function closeMenu(e) {
            if (!document.getElementById('mobileMenuBtn').contains(e.target) && 
                !document.getElementById('mobileActionMenu').contains(e.target)) {
                menu.classList.add('hidden');
                document.removeEventListener('click', closeMenu);
            }
        });
    });

    // Copy request info function
    function copyRequestInfo() {
        const contactInfo = @json($contactInfo);
        const businessType = "{{ $serviceRequest->businessType->name ?? 'N/A' }}";
        const businessModel = "{{ $serviceRequest->businessModel->name ?? 'N/A' }}";
        const state = "{{ $serviceRequest->state->name ?? 'N/A' }}";
        const packageType = "{{ $serviceRequest->package_type }}";
        const totalPrice = "{{ number_format($serviceRequest->total_price, 2) }}";
        const status = "{{ $statusLabels[$serviceRequest->status] }}";
        
        const infoText = `Service Request Details:
        
Request ID: {{ $serviceRequest->id }}
Status: ${status}
Package: ${packageType}
Total: ${totalPrice} SR

Client Information:
Name: ${contactInfo.name}
Email: ${contactInfo.email}
Phone: ${contactInfo.phone}
Company: ${contactInfo.company}

Business Information:
Type: ${businessType}
Model: ${businessModel}
State: ${state}

Services: {{ count($servicesData) }}

Created: {{ $serviceRequest->created_at->format('M j, Y g:i A') }}
        `;
        
        navigator.clipboard.writeText(infoText)
            .then(() => {
                showToast('Request information copied to clipboard!');
            })
            .catch(err => {
                console.error('Failed to copy: ', err);
                showToast('Failed to copy to clipboard');
            });
    }

    // Share request function
    function shareRequest() {
        const requestId = "{{ $serviceRequest->id }}";
        const clientName = "{{ $contactInfo['name'] ?? 'N/A' }}";
        const packageType = "{{ $serviceRequest->package_type }}";
        const totalPrice = "{{ number_format($serviceRequest->total_price, 2) }}";
        const status = "{{ $statusLabels[$serviceRequest->status] }}";
        
        const shareText = `Service Request #${requestId}
Client: ${clientName}
Package: ${packageType}
Total: ${totalPrice} SR 
Status: ${status}

View details: ${window.location.href}`;
        
        if (navigator.share) {
            navigator.share({
                title: `Service Request #${requestId}`,
                text: shareText,
                url: window.location.href
            })
            .then(() => console.log('Request shared successfully'))
            .catch((error) => console.log('Error sharing:', error));
        } else {
            // Fallback for browsers that don't support Web Share API
            navigator.clipboard.writeText(shareText)
                .then(() => {
                    showToast('Request details copied to clipboard!');
                })
                .catch(err => {
                    console.error('Failed to copy: ', err);
                    showToast('Failed to copy to clipboard');
                });
        }
    }

    // Toast notification function
    function showToast(message) {
        const toast = document.createElement('div');
        toast.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50 max-w-sm text-center';
        toast.textContent = message;
        document.body.appendChild(toast);
        
        // Animate in
        setTimeout(() => {
            toast.classList.add('opacity-100');
        }, 10);
        
        // Remove after 3 seconds
        setTimeout(() => {
            toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 300);
        }, 3000);
    }

    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Service request details page loaded');
        
        // Add swipe gesture for back navigation
        let touchStartX = 0;
        let touchEndX = 0;
        
        document.addEventListener('touchstart', function(e) {
            touchStartX = e.changedTouches[0].screenX;
        });
        
        document.addEventListener('touchend', function(e) {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        });
        
        function handleSwipe() {
            const swipeThreshold = 100;
            const swipeLength = touchEndX - touchStartX;
            
            if (swipeLength > swipeThreshold) {
                // Swipe right - go back
                window.history.back();
            }
        }
        
        // Expand service descriptions on tap (mobile)
        const serviceItems = document.querySelectorAll('.bg-gray-50.rounded-lg');
        serviceItems.forEach(item => {
            item.addEventListener('click', function() {
                if (window.innerWidth < 768) {
                    const description = this.querySelector('.line-clamp-1');
                    if (description) {
                        description.classList.toggle('line-clamp-1');
                        description.classList.toggle('line-clamp-2');
                    }
                }
            });
        });
    });
</script>
@endsection