@extends('layouts.admin')

@section('content')
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col">
                <h1>Google Verifications</h1>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Email</th>
                                        <th>Status</th>
                                        <th>Created At</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($verifications as $verification)
                                        <tr>
                                            <td>{{ $verification->id }}</td>
                                            <td>{{ $verification->email }}</td>
                                            <td>
                                                @switch($verification->status)
                                                    @case('processing')
                                                        <span class="badge bg-info">Processing</span>
                                                        @break
                                                    @case('pending')
                                                        <span class="badge bg-warning">Pending</span>
                                                        @break
                                                    @case('completed')
                                                        <span class="badge bg-success">Completed</span>
                                                        @break
                                                    @case('rejected')
                                                        <span class="badge bg-danger">Rejected</span>
                                                        @break
                                                @endswitch
                                            </td>
                                            <td>{{ $verification->created_at->format('Y-m-d H:i:s') }}</td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#viewModal{{ $verification->id }}">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                @if(in_array($verification->status, ['processing', 'pending']))
                                                <button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#requestModal{{ $verification->id }}">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                @endif
                                            </td>
                                        </tr>

                                        <!-- View Modal -->
                                        <div class="modal fade" id="viewModal{{ $verification->id }}" tabindex="-1">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">Verification Details</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="mb-3">
                                                            <label class="form-label">Email</label>
                                                            <input type="text" class="form-control" value="{{ $verification->email }}" readonly>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label class="form-label">Status</label>
                                                            <input type="text" class="form-control" value="{{ $verification->status }}" readonly>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label class="form-label">Created At</label>
                                                            <input type="text" class="form-control" value="{{ $verification->created_at->format('Y-m-d H:i:s') }}" readonly>
                                                        </div>
                                                        @if($verification->completed_at)
                                                            <div class="mb-3">
                                                                <label class="form-label">Completed At</label>
                                                                <input type="text" class="form-control" value="{{ $verification->completed_at->format('Y-m-d H:i:s') }}" readonly>
                                                            </div>
                                                        @endif

                                                        <!-- Pricing Section -->
                                                        <div class="mb-3">
                                                            <label class="form-label fw-bold">Order Details</label>
                                                            <div class="card">
                                                                <div class="card-body">
                                                                    @php
                                                                        $checkoutSession = $verification->checkoutSession;
                                                                        $data = $checkoutSession->data;
                                                                        $pricing = $data['pricing'] ?? [];
                                                                        $event = $data['event'] ?? [];
                                                                        $tickets = $event['tickets'] ?? [];
                                                                    @endphp
                                                                    <div class="row">
                                                                        <div class="col-12 mb-2">
                                                                            <div class="d-flex justify-content-between">
                                                                                <span class="text-muted">Tickets ({{ $tickets['type'] ?? 'N/A' }})</span>
                                                                                <span>{{ $tickets['currency'] ?? 'GBP' }} {{ number_format($tickets['price'] ?? 0, 2) }} x {{ $tickets['quantity'] ?? 0 }}</span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-12 mb-2">
                                                                            <div class="d-flex justify-content-between">
                                                                                <span class="text-muted">Subtotal</span>
                                                                                <span>{{ $tickets['currency'] ?? 'GBP' }} {{ number_format($pricing['subtotal'] ?? 0, 2) }}</span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-12 mb-2">
                                                                            <div class="d-flex justify-content-between">
                                                                                <span class="text-muted">Service Fee</span>
                                                                                <span>{{ $tickets['currency'] ?? 'GBP' }} {{ number_format($pricing['service_fee'] ?? 0, 2) }}</span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-12 mb-2">
                                                                            <div class="d-flex justify-content-between">
                                                                                <span class="text-muted">Handling Fee</span>
                                                                                <span>{{ $tickets['currency'] ?? 'GBP' }} {{ number_format($pricing['handling_fee'] ?? 0, 2) }}</span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-12">
                                                                            <hr>
                                                                            <div class="d-flex justify-content-between">
                                                                                <span class="fw-bold">Total</span>
                                                                                <span class="fw-bold">{{ $tickets['currency'] ?? 'GBP' }} {{ number_format($pricing['total'] ?? 0, 2) }}</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Request Modal -->
                                        <div class="modal fade" id="requestModal{{ $verification->id }}" tabindex="-1">
                                            <div class="modal-dialog modal-md">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">Request Additional Verification</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <!-- Responses Section -->
                                                        <div class="responses-section mb-3" style="max-height: 200px; overflow-y: auto;">
                                                            <h6>User Responses</h6>
                                                            <div id="userResponses{{ $verification->id }}">
                                                                @foreach($verification->requests as $request)
                                                                    @if($request->status === 'submitted')
                                                                        <div class="card mb-2">
                                                                            <div class="card-body p-2">
                                                                                <h6 class="card-subtitle mb-1 text-muted">Request #{{ $request->id }}</h6>
                                                                                @php
                                                                                    $responses = is_string($request->responses) ? json_decode($request->responses, true) : $request->responses;
                                                                                @endphp
                                                                                @if($responses && is_array($responses))
                                                                                    @foreach($responses as $field => $value)
                                                                                        <p class="mb-1 small"><strong>{{ $field }}:</strong> {{ $value }}</p>
                                                                                    @endforeach
                                                                                @endif
                                                                                <small class="text-muted">{{ $request->updated_at->format('Y-m-d H:i:s') }}</small>
                                                                            </div>
                                                                        </div>
                                                                    @endif
                                                                @endforeach
                                                            </div>
                                                        </div>

                                                        <!-- Request Form -->
                                                        <form id="verificationForm{{ $verification->id }}" class="verification-form" method="POST" action="{{ route('admin.google-verifications.request', $verification->id) }}">
                                                            @csrf
                                                            <div class="mb-2">
                                                                <label class="form-label">Message to User</label>
                                                                <textarea class="form-control" name="message" rows="2" required></textarea>
                                                            </div>
                                                            <div class="mb-2">
                                                                <label class="form-label">Verification Fields</label>
                                                                <div id="verificationFields{{ $verification->id }}">
                                                                    <div class="input-group mb-2">
                                                                        <input type="text" class="form-control" name="fields[]" placeholder="Field name" required>
                                                                        <button class="btn btn-outline-secondary" type="button" onclick="addField({{ $verification->id }})">
                                                                            <i class="fas fa-plus"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer p-2">
                                                                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                                                                <button type="submit" class="btn btn-primary btn-sm" id="submitBtn{{ $verification->id }}">Send Request</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function updateResponses(verificationId) {
            fetch(`/admin/google-verifications/${verificationId}`)
                .then(response => response.json())
                .then(data => {
                    const responsesContainer = document.getElementById(`userResponses${verificationId}`);
                    if (!responsesContainer) return;

                    // Clear existing responses
                    responsesContainer.innerHTML = '';

                    // Add all responses in reverse chronological order
                    if (data.requests && data.requests.length > 0) {
                        data.requests
                            .filter(request => request.status === 'completed' && request.responses)
                            .sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at))
                            .forEach((request, index) => {
                                const responseCard = document.createElement('div');
                                responseCard.className = 'card mb-2';
                                
                                // Parse message if it's a JSON string
                                let messageContent = request.message;
                                try {
                                    const parsedMessage = JSON.parse(request.message);
                                    if (typeof parsedMessage === 'object') {
                                        messageContent = Object.entries(parsedMessage)
                                            .map(([key, value]) => `${key}: ${value}`)
                                            .join(', ');
                                    }
                                } catch (e) {
                                    // If not JSON, use the message as is
                                }

                                responseCard.innerHTML = `
                                    <div class="card-body p-2">
                                        <h6 class="card-subtitle mb-1 text-muted">Request #${request.id}</h6>
                                        <p class="mb-1 small"><strong>Message:</strong> ${messageContent}</p>
                                        ${request.responses && typeof request.responses === 'object' 
                                            ? Object.entries(request.responses)
                                                .map(([field, value]) => 
                                                    `<p class="mb-1 small"><strong>${field}:</strong> ${value}</p>`
                                                ).join('')
                                            : ''}
                                        <small class="text-muted">${new Date(request.updated_at).toLocaleString()}</small>
                                    </div>
                                `;
                                responsesContainer.appendChild(responseCard);
                            });
                    }

                    // Also add any messages from the messages array
                    if (data.messages && data.messages.length > 0) {
                        data.messages
                            .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
                            .forEach(message => {
                                const messageCard = document.createElement('div');
                                messageCard.className = 'card mb-2';
                                
                                // Parse message if it's a JSON string
                                let messageContent = message.message;
                                try {
                                    const parsedMessage = JSON.parse(message.message);
                                    if (typeof parsedMessage === 'object') {
                                        messageContent = Object.entries(parsedMessage)
                                            .map(([key, value]) => `${key}: ${value}`)
                                            .join(', ');
                                    }
                                } catch (e) {
                                    // If not JSON, use the message as is
                                }

                                messageCard.innerHTML = `
                                    <div class="card-body p-2">
                                        <h6 class="card-subtitle mb-1 text-muted">Message #${message.id}</h6>
                                        <p class="mb-1 small"><strong>${message.sender_type}:</strong> ${messageContent}</p>
                                        <small class="text-muted">${new Date(message.created_at).toLocaleString()}</small>
                                    </div>
                                `;
                                responsesContainer.appendChild(messageCard);
                            });
                    }
                })
                .catch(error => console.error('Error fetching updates:', error));
        }

        // Set up polling for each modal
        document.querySelectorAll('[id^="requestModal"]').forEach(modal => {
            const verificationId = modal.id.replace('requestModal', '');
            let pollInterval;

            modal.addEventListener('show.bs.modal', function () {
                // Initial update
                updateResponses(verificationId);
                // Start polling
                pollInterval = setInterval(() => updateResponses(verificationId), 3000);
            });

            modal.addEventListener('hidden.bs.modal', function () {
                clearInterval(pollInterval);
            });
        });

        function addField(verificationId) {
            const container = document.getElementById(`verificationFields${verificationId}`);
            const newField = document.createElement('div');
            newField.className = 'input-group mb-2';
            newField.innerHTML = `
                <input type="text" class="form-control" name="fields[]" placeholder="Field name" required>
                <button class="btn btn-outline-secondary" type="button" onclick="this.parentElement.remove()">
                    <i class="fas fa-times"></i>
                </button>
            `;
            container.appendChild(newField);
        }

        // Initialize form handlers when DOM is loaded
        document.addEventListener('DOMContentLoaded', function() {
            // Handle modal show event
            document.querySelectorAll('[id^="requestModal"]').forEach(modal => {
                const verificationId = modal.id.replace('requestModal', '');
                const form = modal.querySelector('.verification-form');
                const submitButton = modal.querySelector('button[type="submit"]');

                if (form && submitButton) {
                    form.addEventListener('submit', function(e) {
                        e.preventDefault();
                        
                        // Store original button state
                        const originalHTML = submitButton.innerHTML;
                        
                        // Show loading state
                        submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
                        submitButton.disabled = true;

                        // Get form data
                        const formData = new FormData(form);
                        const data = {
                            message: formData.get('message'),
                            fields: Array.from(formData.getAll('fields[]')).filter(field => field.trim() !== '')
                        };

                        // Submit form
                        fetch(form.action, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: JSON.stringify(data)
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data.message === 'Verification request sent successfully') {
                                // Close modal
                                bootstrap.Modal.getInstance(modal).hide();
                                // Show success message
                                alert('Verification request sent successfully');
                                // Reset form
                                form.reset();
                            } else {
                                throw new Error(data.message || 'Failed to send verification request');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('Error: ' + error.message);
                        })
                        .finally(() => {
                            // Reset button state
                            submitButton.innerHTML = originalHTML;
                            submitButton.disabled = false;
                        });
                    });
                }
            });
        });
    </script>
@endsection