@extends('layouts.app')
@section('title', 'Dashboard')

@push('scripts')
<script src="{{ asset('js/copy-table-cells.js') }}"></script>
@endpush

@section('content')
<div id="layout-wrapper">
    @include('layouts.partials.header')
    @include('layouts.partials.sidebar')
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0 font-size-18">Envio de documento manual - {{ $website }}</h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Panel</a></li>
                                    <li class="breadcrumb-item active"><a href="{{ route('docmanualuk.index') }}">Documentos manuales UK</a></li>
                                    <li class="breadcrumb-item active">Enviar</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                 @if(session('status'))
                    <div class="tp-alert tp-alert-success">
                    {{ session('status') }}
                    </div>
                @endif
                @error('attachment')
                    <div class="tp-alert tp-alert-error">
                    {{ $message }}
                    </div>
                @enderror
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card mt-3">
                            <div class="card-body">
                                <h4 class="card-title mb-3">Enviar documento a cliente</h4>
                                <button type="button" class="btn btn-success waves-effect waves-light" onclick="sendDocument('{{ $entry->key }}')">
                                    <i class="bx bx-send me-1"></i> Enviar documento por email
                                </button>
                                <div id="send-status" class="mt-3" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table mb-0">
                                        <tbody>
                                            <tr><th>Key</th><td>{{ $entry->key }}</td></tr>
                                            <tr><th>Status</th><td>{{ $entry->status }}</td></tr>
                                            
                                            @php
                                                // Orden específico de campos importantes
                                                $orderedFields = [
                                                    'last_name' => 'Last Name',
                                                    'name' => 'First Name', 
                                                    'passport' => 'Passport',
                                                    'nationality' => 'Nationality',
                                                    'birth_date' => 'Date of Birth',
                                                    'gender' => 'Gender',
                                                    'country' => 'Country',
                                                    'phone_code' => 'Phone Code',
                                                    'phone' => 'Phone Number',
                                                    'arrival_date' => 'Arrival Date',
                                                    'departure_country' => 'Departure Country',
                                                    'purpose' => 'Purpose',
                                                    'flight_number' => 'Flight Number',
                                                    'province_hotel' => 'Province Hotel',
                                                    'address_hotel' => 'Address Hotel',
                                                    'email' => 'Email'
                                                ];
                                                
                                                // Campos ya mostrados para evitar duplicados
                                                $shownFields = [];
                                            @endphp
                                            
                                            {{-- Mostrar campos en orden específico --}}
                                            @foreach($orderedFields as $fieldKey => $fieldLabel)
                                                @if(isset($entry->data[$fieldKey]))
                                                    @php $shownFields[] = $fieldKey; @endphp
                                                    <tr>
                                                        <th>{{ $fieldLabel }}</th>
                                                        <td class="copyable-cell" style="cursor: pointer; user-select: all;" onclick="copyToClipboard(this)" title="Click to copy">
                                                            <span class="field-display" id="display-{{ $fieldKey }}">
                                                                @if(is_array($entry->data[$fieldKey]))
                                                                    {{ json_encode($entry->data[$fieldKey], JSON_PRETTY_PRINT) }}
                                                                @else
                                                                    {{ $entry->data[$fieldKey] }}
                                                                @endif
                                                            </span>
                                                            <div class="field-edit" id="edit-{{ $fieldKey }}" style="display: none;">
                                                                <div class="d-flex gap-2">
                                                                    <input type="text" class="form-control form-control-sm" 
                                                                           id="input-{{ $fieldKey }}" 
                                                                           value="{{ is_array($entry->data[$fieldKey]) ? json_encode($entry->data[$fieldKey]) : $entry->data[$fieldKey] }}">
                                                                    <button type="button" class="btn btn-success btn-sm" onclick="saveField('{{ $fieldKey }}', '{{ $entry->key }}')">
                                                                        <i class="bx bx-check"></i>
                                                                    </button>
                                                                    <button type="button" class="btn btn-secondary btn-sm" onclick="cancelEdit('{{ $fieldKey }}')">
                                                                        <i class="bx bx-x"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td width="60">
                                                            <button type="button" class="btn btn-outline-primary btn-sm" 
                                                                    onclick="editField('{{ $fieldKey }}')" 
                                                                    id="btn-{{ $fieldKey }}" 
                                                                    title="Editar campo">
                                                                <i class="bx bx-edit-alt"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                            
                                            {{-- Mostrar otros campos restantes --}}
                                            @foreach($entry->data as $field => $value)
                                                @if(!in_array($field, $shownFields))
                                                    <tr>
                                                        <th>{{ ucwords(str_replace('_', ' ', $field)) }}</th>
                                                        <td class="copyable-cell" style="cursor: pointer; user-select: all;" onclick="copyToClipboard(this)" title="Click to copy">
                                                            <span class="field-display" id="display-{{ $field }}">
                                                                @if(is_array($value))
                                                                    {{ json_encode($value, JSON_PRETTY_PRINT) }}
                                                                @else
                                                                    {{ $value }}
                                                                @endif
                                                            </span>
                                                            <div class="field-edit" id="edit-{{ $field }}" style="display: none;">
                                                                <div class="d-flex gap-2">
                                                                    <input type="text" class="form-control form-control-sm" 
                                                                           id="input-{{ $field }}" 
                                                                           value="{{ is_array($value) ? json_encode($value) : $value }}">
                                                                    <button type="button" class="btn btn-success btn-sm" onclick="saveField('{{ $field }}', '{{ $entry->key }}')">
                                                                        <i class="bx bx-check"></i>
                                                                    </button>
                                                                    <button type="button" class="btn btn-secondary btn-sm" onclick="cancelEdit('{{ $field }}')">
                                                                        <i class="bx bx-x"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td width="60">
                                                            <button type="button" class="btn btn-outline-primary btn-sm" 
                                                                    onclick="editField('{{ $field }}')" 
                                                                    id="btn-{{ $field }}" 
                                                                    title="Editar campo">
                                                                <i class="bx bx-edit-alt"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-info text-center">
                            Panel de administración - UK
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.partials.footer')
    </div>
</div>

<script>
// Función para enviar documento por email
function sendDocument(documentKey) {
    const sendBtn = document.querySelector('button[onclick*="sendDocument"]');
    const statusDiv = document.getElementById('send-status');
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                      document.querySelector('input[name="_token"]')?.value;
    
    if (!csrfToken) {
        alert('Error: Token CSRF no encontrado');
        return;
    }
    
    // Mostrar loading
    const originalContent = sendBtn.innerHTML;
    sendBtn.innerHTML = '<i class="bx bx-loader-alt bx-spin me-1"></i> Enviando...';
    sendBtn.disabled = true;
    
    statusDiv.style.display = 'none';
    
    fetch(`/docmanualuk/${documentKey}/send`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            statusDiv.className = 'mt-3 alert alert-success';
            statusDiv.innerHTML = '<i class="bx bx-check me-1"></i>' + data.message;
            statusDiv.style.display = 'block';
            
            // Éxito - mantener botón verde un momento
            sendBtn.innerHTML = '<i class="bx bx-check me-1"></i> Enviado correctamente';
            sendBtn.className = 'btn btn-success waves-effect waves-light';
            
            setTimeout(() => {
                sendBtn.innerHTML = originalContent;
                sendBtn.className = 'btn btn-success waves-effect waves-light';
                sendBtn.disabled = false;
            }, 3000);
        } else {
            throw new Error(data.message || 'Error al enviar');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        statusDiv.className = 'mt-3 alert alert-danger';
        statusDiv.innerHTML = '<i class="bx bx-error me-1"></i>Error: ' + error.message;
        statusDiv.style.display = 'block';
        
        // Restaurar botón
        sendBtn.innerHTML = originalContent;
        sendBtn.disabled = false;
    });
}

// Funciones de edición de campos
function editField(fieldKey) {
    // Ocultar el display y mostrar el edit
    document.getElementById('display-' + fieldKey).style.display = 'none';
    document.getElementById('edit-' + fieldKey).style.display = 'block';
    document.getElementById('btn-' + fieldKey).style.display = 'none';
    
    // Enfocar el input
    document.getElementById('input-' + fieldKey).focus();
}

function cancelEdit(fieldKey) {
    // Mostrar el display y ocultar el edit
    document.getElementById('display-' + fieldKey).style.display = 'block';
    document.getElementById('edit-' + fieldKey).style.display = 'none';
    document.getElementById('btn-' + fieldKey).style.display = 'block';
    
    // Restaurar el valor original
    const originalValue = document.getElementById('display-' + fieldKey).textContent.trim();
    document.getElementById('input-' + fieldKey).value = originalValue;
}

function saveField(fieldKey, documentKey) {
    const newValue = document.getElementById('input-' + fieldKey).value;
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                      document.querySelector('input[name="_token"]')?.value;
    
    if (!csrfToken) {
        alert('Error: Token CSRF no encontrado');
        return;
    }
    
    // Mostrar loading en el botón
    const saveBtn = document.querySelector(`#edit-${fieldKey} .btn-success`);
    const originalContent = saveBtn.innerHTML;
    saveBtn.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i>';
    saveBtn.disabled = true;
    
    // Crear el endpoint de actualización para UK
    fetch(`/docmanualuk/${documentKey}/update-field`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            field: fieldKey,
            value: newValue
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Actualizar el display con el nuevo valor
            document.getElementById('display-' + fieldKey).textContent = newValue;
            
            // Ocultar edit y mostrar display
            document.getElementById('display-' + fieldKey).style.display = 'block';
            document.getElementById('edit-' + fieldKey).style.display = 'none';
            document.getElementById('btn-' + fieldKey).style.display = 'block';
            
            // Mostrar feedback de éxito
            showSaveSuccess(saveBtn);
        } else {
            throw new Error(data.message || 'Error al guardar');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al guardar: ' + error.message);
        
        // Restaurar botón
        saveBtn.innerHTML = originalContent;
        saveBtn.disabled = false;
    });
}

function showSaveSuccess(button) {
    const originalContent = button.innerHTML;
    button.innerHTML = '<i class="bx bx-check"></i>';
    button.className = 'btn btn-success btn-sm';
    
    setTimeout(() => {
        button.innerHTML = originalContent;
        button.disabled = false;
    }, 1500);
}

function copyToClipboard(element) {
    // Solo copiar si no estamos en modo edición
    if (element.querySelector('.field-edit[style*="block"]')) {
        return; // No copiar cuando está en modo edición
    }
    
    // Obtener solo el texto del span display
    const displaySpan = element.querySelector('.field-display');
    if (!displaySpan) return;
    
    let text = displaySpan.textContent || displaySpan.innerText;
    text = text.trim().replace(/\s+/g, ' ');
    
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(text).then(function() {
            showCopyFeedback(element, 'Copiado!');
        }).catch(function(err) {
            console.error('Error al copiar: ', err);
            fallbackCopyToClipboard(text, element);
        });
    } else {
        fallbackCopyToClipboard(text, element);
    }
}

function fallbackCopyToClipboard(text, element) {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-999999px';
    textArea.style.top = '-999999px';
    textArea.style.opacity = '0';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
        const successful = document.execCommand('copy');
        if (successful) {
            showCopyFeedback(element, 'Copiado!');
        } else {
            showCopyFeedback(element, 'Error al copiar');
        }
    } catch (err) {
        console.error('Error al copiar: ', err);
        showCopyFeedback(element, 'Error al copiar');
    }
    
    document.body.removeChild(textArea);
}

function showCopyFeedback(element, message) {
    const displaySpan = element.querySelector('.field-display');
    if (!displaySpan) return;
    
    const originalContent = displaySpan.innerHTML;
    const originalBgColor = element.style.backgroundColor;
    
    element.style.backgroundColor = '#d4edda';
    displaySpan.innerHTML = '<span style="color: #155724; font-weight: bold;">' + message + '</span>';
    
    setTimeout(function() {
        displaySpan.innerHTML = originalContent;
        element.style.backgroundColor = originalBgColor;
    }, 1000);
}

// Agregar efectos hover
document.addEventListener('DOMContentLoaded', function() {
    const copyableCells = document.querySelectorAll('.copyable-cell');
    copyableCells.forEach(function(cell) {
        cell.addEventListener('mouseenter', function() {
            if (!this.querySelector('.field-edit[style*="block"]')) {
                this.style.backgroundColor = '#f8f9fa';
                this.style.transition = 'background-color 0.2s';
            }
        });
        
        cell.addEventListener('mouseleave', function() {
            if (!this.innerHTML.includes('Copiado!')) {
                this.style.backgroundColor = '';
            }
        });
    });
    
    // Agregar CSRF token si no existe
    if (!document.querySelector('meta[name="csrf-token"]')) {
        const meta = document.createElement('meta');
        meta.name = 'csrf-token';
        meta.content = document.querySelector('input[name="_token"]')?.value || '';
        document.getElementsByTagName('head')[0].appendChild(meta);
    }
});
</script>

@endsection