@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">Start Project</h1>
                <p class="text-gray-500 dark:text-gray-400 mt-1">Create a new project from service request</p>
                <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-file-alt text-xs"></i>
                    <span>Request 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 Request
            </a>
        </div>
    </div>

    <!-- Main Content Grid -->
    <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">
            <!-- Client 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-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>
                    Client Information
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-1">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Full Name</p>
                        <p class="text-gray-900 dark:text-white">{{ $contactInfo['name'] ?? 'N/A' }}</p>
                    </div>
                    <div class="space-y-1">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Email</p>
                        <p class="text-gray-900 dark:text-white">{{ $contactInfo['email'] ?? 'N/A' }}</p>
                    </div>
                    <div class="space-y-1">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Phone</p>
                        <p class="text-gray-900 dark:text-white">{{ $contactInfo['phone'] ?? 'N/A' }}</p>
                    </div>
                    <div class="space-y-1">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Company</p>
                        <p class="text-gray-900 dark:text-white">{{ $contactInfo['company'] ?? 'N/A' }}</p>
                    </div>
                </div>
            </div>

            <!-- Requested Services -->
            <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="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white 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-list-alt text-green-500 dark:text-green-400 text-sm"></i>
                        </div>
                        Requested Services ({{ count($services) }})
                    </h3>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        Total: <span class="font-bold text-green-600 dark:text-green-400">{{ number_format($serviceRequest->total_price, 0) }} SR</span>
                    </div>
                </div>
                <div class="space-y-3">
                    @forelse($services as $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-blue-50 dark:bg-blue-900/20 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-cog text-blue-500 dark:text-blue-400 text-sm"></i>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $service['name'] }}</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">ID: {{ $service['id'] }}</p>
                                </div>
                            </div>
                            <div>
                                @php
                                    $statusConfig = [
                                        'Not Started' => [
                                            'color' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
                                            'icon' => 'fa-clock'
                                        ],
                                        'In Progress' => [
                                            'color' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
                                            'icon' => 'fa-spinner'
                                        ],
                                        'Completed' => [
                                            'color' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                                            'icon' => 'fa-check-circle'
                                        ]
                                    ];
                                    $config = $statusConfig[$service['status']] ?? [
                                        'color' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
                                        'icon' => 'fa-question-circle'
                                    ];
                                @endphp
                                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium {{ $config['color'] }}">
                                    <i class="fas {{ $config['icon'] }} text-xs {{ $service['status'] === 'In Progress' ? 'fa-spin' : '' }}"></i>
                                    {{ $service['status'] }}
                                </span>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-8 text-gray-400 dark:text-gray-500">
                            <i class="fas fa-cogs text-3xl mb-3 opacity-50"></i>
                            <p class="text-sm">No services requested</p>
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Project Requirements -->
            <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-clipboard-list text-purple-500 dark:text-purple-400 text-sm"></i>
                    </div>
                    Project Requirements
                </h3>
                
                <!-- Add Requirement Form -->
                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-4">
                    <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-3">Add New Document</h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                        <div>
                            <input type="text" 
                                   id="requirement-name"
                                   placeholder="Document name"
                                   class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg 
                                          bg-white dark:bg-gray-800 text-gray-900 dark:text-white 
                                          focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">
                        </div>
                        <div>
                            <select id="requirement-type"
                                    class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg 
                                           bg-white dark:bg-gray-800 text-gray-900 dark:text-white 
                                           focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">
                                <option value="">Select type</option>
                                <option value="file">File</option>
                                <option value="text">Text</option>
                                <option value="number">Number</option>
                                <option value="date">Date</option>
                                <option value="url">URL</option>
                            </select>
                        </div>
                        <div>
                            <button id="add-requirement"
                                    class="w-full inline-flex items-center justify-center gap-2 bg-gradient-to-r from-purple-500 to-purple-600 text-white 
                                           px-4 py-2 rounded-lg hover:from-purple-600 hover:to-purple-700 active:scale-[0.98] 
                                           transition-all shadow-sm hover:shadow text-sm">
                                <i class="fas fa-plus text-xs"></i>
                                Add Document
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Requirements List -->
                <div class="space-y-3" id="requirements-container">
                    <div id="no-requirements" class="text-center py-8 text-gray-400 dark:text-gray-500">
                        <i class="fas fa-clipboard-list text-3xl mb-3 opacity-50"></i>
                        <p class="text-sm">No requirements added</p>
                        <p class="text-xs mt-1">Add your first requirement using the form above</p>
                    </div>
                    <!-- Requirements will be added here dynamically -->
                </div>
            </div>
        </div>

        <!-- Right Column (1/3) -->
        <div class="space-y-6">
            <!-- Project Summary -->
            <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-chart-pie text-orange-500 dark:text-orange-400 text-sm"></i>
                    </div>
                    Project Summary
                </h3>
                <div class="space-y-3">
                    <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Total Services</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white">{{ count($services) }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Not Started</span>
                        <span class="text-sm font-medium text-yellow-600 dark:text-yellow-400">
                            {{ count(array_filter($services, fn($s) => $s['status'] === 'Not Started')) }}
                        </span>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                        <span class="text-sm text-gray-500 dark:text-gray-400">In Progress</span>
                        <span class="text-sm font-medium text-blue-600 dark:text-blue-400">
                            {{ count(array_filter($services, fn($s) => $s['status'] === 'In Progress')) }}
                        </span>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Completed</span>
                        <span class="text-sm font-medium text-green-600 dark:text-green-400">
                            {{ count(array_filter($services, fn($s) => $s['status'] === 'Completed')) }}
                        </span>
                    </div>
                    <div class="pt-4 border-t border-gray-100 dark:border-gray-700">
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-gray-900 dark:text-white">Total Amount</span>
                            <span class="text-lg font-bold text-green-600 dark:text-green-400">{{ number_format($serviceRequest->total_price, 0) }} SR</span>
                        </div>
                    </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-cyan-50 dark:bg-cyan-900/20 flex items-center justify-center">
                        <i class="fas fa-briefcase text-cyan-500 dark:text-cyan-400 text-sm"></i>
                    </div>
                    Business Information
                </h3>
                <div class="space-y-3">
                    <div class="space-y-1">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Business Type</p>
                        <p class="text-gray-900 dark:text-white">{{ $serviceRequest->businessType->name ?? 'N/A' }}</p>
                    </div>
                    <div class="space-y-1">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Business Model</p>
                        <p class="text-gray-900 dark:text-white">{{ $serviceRequest->businessModel->name ?? 'N/A' }}</p>
                    </div>
                    <div class="space-y-1">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Branch</p>
                        <p class="text-gray-900 dark:text-white">{{ $serviceRequest->branch->name ?? 'N/A' }}</p>
                    </div>
                    <div class="space-y-1">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Package Type</p>
                        <p class="text-gray-900 dark:text-white capitalize">{{ $serviceRequest->package_type }}</p>
                    </div>
                </div>
            </div>

            <!-- Start Project Form -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                <form action="{{ route('admin.start-Project.submit', $serviceRequest->id) }}" method="POST">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Project Name <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   name="name" 
                                   required 
                                   placeholder="Enter project name"
                                   class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg 
                                          bg-white dark:bg-gray-800 text-gray-900 dark:text-white 
                                          focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">
                        </div>
                        
                        <textarea id="document_array" class="hidden" name="document_array"></textarea>
                        
                        <button type="submit"
                                class="w-full inline-flex items-center justify-center gap-2 bg-gradient-to-r from-green-500 to-green-600 text-white 
                                       px-4 py-2 rounded-lg hover:from-green-600 hover:to-green-700 active:scale-[0.98] 
                                       transition-all shadow-sm hover:shadow">
                            <i class="fas fa-play-circle text-sm"></i>
                            Start Project
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const requirements = [];
        let requirementId = 1;

        const nameInput = document.getElementById('requirement-name');
        const typeSelect = document.getElementById('requirement-type');
        const addButton = document.getElementById('add-requirement');
        const requirementsContainer = document.getElementById('requirements-container');
        const noRequirementsDiv = document.getElementById('no-requirements');
        const documentArrayInput = document.getElementById('document_array');

        // Function to update the requirements display
        function updateRequirementsDisplay() {
            requirementsContainer.innerHTML = '';

            if (requirements.length === 0) {
                noRequirementsDiv.classList.remove('hidden');
                requirementsContainer.appendChild(noRequirementsDiv);
                return;
            }

            noRequirementsDiv.classList.add('hidden');

            requirements.forEach((req, index) => {
                const reqElement = document.createElement('div');
                reqElement.className = 'flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50';
                reqElement.innerHTML = `
                    <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 ${getTypeIcon(req.type)} text-purple-500 dark:text-purple-400 text-sm"></i>
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">${req.name}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 capitalize">${req.type} document</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
                            <i class="fas fa-clock text-xs"></i>
                            Pending
                        </span>
                        <button class="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 delete-requirement" 
                                data-id="${req.id}"
                                title="Delete requirement">
                            <i class="fas fa-trash text-xs"></i>
                        </button>
                    </div>
                `;
                requirementsContainer.appendChild(reqElement);
            });

            // Add event listeners to delete buttons
            document.querySelectorAll('.delete-requirement').forEach(button => {
                button.addEventListener('click', function() {
                    const id = parseInt(this.getAttribute('data-id'));
                    deleteRequirement(id);
                });
            });

            // Update hidden input
            documentArrayInput.value = JSON.stringify(requirements);
        }

        // Helper function to get icon based on type
        function getTypeIcon(type) {
            const icons = {
                'file': 'fa-file',
                'text': 'fa-font',
                'number': 'fa-hashtag',
                'date': 'fa-calendar',
                'url': 'fa-link'
            };
            return icons[type] || 'fa-file';
        }

        // Function to add a new requirement
        function addRequirement() {
            const name = nameInput.value.trim();
            const type = typeSelect.value;

            if (!name || !type) {
                alert('Please fill in both name and type fields');
                return;
            }

            const newRequirement = {
                id: requirementId++,
                name: name,
                type: type,
                status: false,
                value: null,
            };

            requirements.push(newRequirement);
            updateRequirementsDisplay();

            // Reset form
            nameInput.value = '';
            typeSelect.value = '';
            nameInput.focus();
        }

        // Function to delete a requirement
        function deleteRequirement(id) {
            if (confirm('Are you sure you want to delete this requirement?')) {
                const index = requirements.findIndex(req => req.id === id);
                if (index !== -1) {
                    requirements.splice(index, 1);
                    updateRequirementsDisplay();
                }
            }
        }

        // Event listeners
        addButton.addEventListener('click', addRequirement);

        // Allow adding with Enter key
        nameInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addRequirement();
            }
        });

        typeSelect.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addRequirement();
            }
        });

        // Initialize display
        updateRequirementsDisplay();
    });
</script>
@endsection