@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 Egypt</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('docmanualeg.index') }}">Documentos manuales Egypt</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">
                            <form class="card-body" method="POST" action="{{ route('docmanualeg.send', $e->key) }}" enctype="multipart/form-data">
                                @csrf
                                <div class="mb-3">
                                    <label for="formFile" class="form-label">Enviar documento por email</label>
                                    <input required type="file" name="attachment" class="form-control" id="formFile" accept=".pdf,.doc,.docx">
                                    <small class="form-text text-muted">Formatos permitidos: PDF, DOC, DOCX (máx. 5MB)</small>
                                </div>
                                <div>
                                    <button type="submit" class="btn btn-primary waves-effect waves-light">Enviar por Email</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-xl-12">
                        <div class="card mt-3">
                            <form class="card-body" method="POST" action="{{ route('docmanualeg.processing', $e->key) }}">
                                @csrf
                                <div class="mb-3">
                                    <label for="processing" class="form-label">Campo PROCESANDO</label>
                                    <input type="text" name="processing" class="form-control" id="processing" 
                                           value="{{ $e->processing ?? '' }}" placeholder="Ingrese el estado de procesamiento">
                                    <small class="form-text text-muted">Actualizar el valor del campo PROCESANDO en la base de datos</small>
                                </div>
                                @error('processing')
                                    <div class="text-danger mb-3">{{ $message }}</div>
                                @enderror
                                <div>
                                    <button type="submit" class="btn btn-primary waves-effect waves-light">Actualizar PROCESANDO</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-body">
                                @php
                                    $uploadedImagePath = public_path('uploads/egypt-images/' . $e->key);
                                    $extensions = ['jpg', 'jpeg', 'png', 'gif'];
                                    $uploadedImage = null;
                                    foreach ($extensions as $ext) {
                                        if (file_exists($uploadedImagePath . '.' . $ext)) {
                                            $uploadedImage = $e->key . '.' . $ext;
                                            break;
                                        }
                                    }
                                @endphp
                                
                                @if($uploadedImage)
                                    <h5 class="card-title">Imagen adicional guardada</h5>
                                    <div style="margin-bottom: 15px;">
                                        <img src="{{ asset('uploads/egypt-images/' . $uploadedImage) }}" 
                                             alt="Imagen adicional" 
                                             style="max-width: 300px; max-height: 300px; border: 1px solid #ddd; border-radius: 4px;">
                                        <br>
                                        <small class="text-muted">
                                            <strong>Archivo:</strong> {{ $uploadedImage }}<br>
                                            <strong>Tamaño:</strong> {{ round(filesize(public_path('uploads/egypt-images/' . $uploadedImage)) / 1024, 2) }} KB
                                        </small>
                                    </div>
                                    <hr>
                                @endif
                                
                                <h5 class="card-title">Información del documento</h5>
                                <div class="table-responsive">
                                    <table class="table mb-0">
                                        <tbody>
                                            <tr><th>Key</th><td>{{ $e->key }}</td></tr>
                                            <tr><th>Status</th><td>{{ $e->status }}</td></tr>
                                            <tr><th>PROCESANDO</th><td>{{ $e->processing ?? 'No establecido' }}</td></tr>
                                            
                                            @php
                                                // Orden específico de campos importantes para Egypt
                                                $orderedFields = [
                                                    'departure_country' => 'Departure Country',
                                                    'arrival_date' => 'Arrival Date',
                                                    'departure_date' => 'Departure Date',
                                                    'name' => 'Name',
                                                    'last_name' => 'Last Name',
                                                    'gender' => 'Gender',
                                                    'birth_date' => 'Birth Date',
                                                    'birth_country' => 'Birth Country',
                                                    'nationality' => 'Nationality',
                                                    'occupation' => 'Occupation',
                                                    'marital_status' => 'Marital Status',
                                                    'passport' => 'Passport',
                                                    'passport_expiration_date' => 'Passport Expiration Date',
                                                    'email' => 'Email',
                                                    'phone_combined' => 'Phone',
                                                    'address' => 'Address',
                                                    'name_2' => 'Name',
                                                    'surname' => 'Surname', 
                                                    'passport_number' => 'Passport Number',
                                                    'phone_combined_2' => 'Phone',
                                                    'host_address' => 'Host Address',
                                                ];
                                                
                                                // Campos ya mostrados para evitar duplicados
                                                $shownFields = [];
                                            @endphp
                                            
                                            {{-- Mostrar campos prioritarios primero --}}
                                            @foreach($orderedFields as $fieldKey => $fieldLabel)
                                                @if($fieldKey === 'phone_combined')
                                                    {{-- Campo especial para teléfono combinado --}}
                                                    @php
                                                        $phoneCode = $e->data['phone_code'] ?? '';
                                                        $phone = $e->data['phone'] ?? '';
                                                        
                                                        // Extraer solo el código entre paréntesis si existe
                                                        if (preg_match('/\(([^)]+)\)/', $phoneCode, $matches)) {
                                                            $phoneCode = $matches[1];
                                                        }
                                                        
                                                        $combinedPhone = $phoneCode . $phone;
                                                        $shownFields[] = 'phone_code';
                                                        $shownFields[] = 'phone';
                                                    @endphp
                                                    @if(!empty($combinedPhone))
                                                        <tr>
                                                            <th>{{ $fieldLabel }}</th>
                                                            <td class="copyable-cell">
                                                                {{ $combinedPhone }}
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @elseif($fieldKey === 'phone_combined_2')
                                                    {{-- Campo especial para segunda instancia de teléfono combinado --}}
                                                    @php
                                                        $phoneCode = $e->data['phone_code'] ?? '';
                                                        $phone = $e->data['phone'] ?? '';
                                                        
                                                        // Extraer solo el código entre paréntesis si existe
                                                        if (preg_match('/\(([^)]+)\)/', $phoneCode, $matches)) {
                                                            $phoneCode = $matches[1];
                                                        }
                                                        
                                                        $combinedPhone = $phoneCode . $phone;
                                                    @endphp
                                                    @if(!empty($combinedPhone))
                                                        <tr>
                                                            <th>{{ $fieldLabel }}</th>
                                                            <td class="copyable-cell">
                                                                {{ $combinedPhone }}
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @elseif($fieldKey === 'address')
                                                    {{-- Campo especial para address sin puntos ni comas --}}
                                                    @php
                                                        $address = $e->data['address'] ?? '';
                                                        // Eliminar todo excepto letras, números y espacios
                                                        $cleanAddress = preg_replace('/[^a-zA-Z0-9\s]/', '', $address);
                                                        $shownFields[] = 'address';
                                                    @endphp
                                                    @if(!empty($cleanAddress))
                                                        <tr>
                                                            <th>{{ $fieldLabel }}</th>
                                                            <td class="copyable-cell">
                                                                {{ $cleanAddress }}
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @elseif($fieldKey === 'host_address')
                                                    {{-- Campo especial para host address sin puntos ni comas --}}
                                                    @php
                                                        $hostAddress = $e->data['host_address'] ?? '';
                                                        // Eliminar todo excepto letras, números y espacios
                                                        $cleanHostAddress = preg_replace('/[^a-zA-Z0-9\s]/', '', $hostAddress);
                                                        $shownFields[] = 'host_address';
                                                    @endphp
                                                    @if(!empty($cleanHostAddress))
                                                        <tr>
                                                            <th>{{ $fieldLabel }}</th>
                                                            <td class="copyable-cell">
                                                                {{ $cleanHostAddress }}
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @elseif(isset($e->data[$fieldKey]))
                                                    @php $shownFields[] = $fieldKey; @endphp
                                                    <tr>
                                                        <th>{{ $fieldLabel }}</th>
                                                        <td class="copyable-cell">
                                                            {{ is_array($e->data[$fieldKey]) ? json_encode($e->data[$fieldKey]) : $e->data[$fieldKey] }}
                                                        </td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                            
                                            {{-- Mostrar el resto de campos (excepto travelers que irá al final) --}}
                                            @foreach($e->data as $field => $value)
                                                @if(!in_array($field, $shownFields) && $field !== 'travelers')
                                                <tr>
                                                    <th>{{ ucwords(str_replace('_', ' ', $field)) }}</th>
                                                    <td>
                                                        @if(str_contains($field, 'passport_photo') && !empty($value))
                                                            @php
                                                                $imageUrl = 'https://arrivalcardegypt.com/storage/' . $value;
                                                                $uniqueId = md5($field . $value);
                                                            @endphp
                                                            <div style="margin-bottom: 10px;">
                                                                <img id="img-{{ $uniqueId }}" 
                                                                     src="{{ $imageUrl }}" 
                                                                     alt="Passport Photo" 
                                                                     data-url="{{ $imageUrl }}"
                                                                     data-unique-id="{{ $uniqueId }}"
                                                                     style="max-width: 200px; max-height: 200px; border: 1px solid #ddd; border-radius: 4px; display: block;"
                                                                     class="passport-image">
                                                            </div>
                                                            <div style="font-size: 12px; color: #6c757d;">
                                                                <strong>Archivo:</strong> {{ basename($value) }}<br>
                                                                <strong>Ruta:</strong> {{ $value }}<br>
                                                                <strong>Tamaño:</strong> 
                                                                <span id="size-{{ $uniqueId }}">Calculando...</span>
                                                            </div>
                                                        @else
                                                            <span class="copyable-cell">{{ is_array($value) ? json_encode($value) : $value }}</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                                @endif
                                            @endforeach

                                            {{-- Mostrar la sección de Travelers siempre al final --}}
                                            <tr>
                                                <th>Travelers</th>
                                                <td>
                                                    @php
                                                        $travelersData = $e->data['travelers'] ?? null;
                                                        $travelers = null;
                                                        
                                                        if (!empty($travelersData)) {
                                                            $travelers = is_string($travelersData) ? json_decode($travelersData, true) : $travelersData;
                                                        }
                                                    @endphp
                                                    
                                                    @if(is_array($travelers) && count($travelers) > 0)
                                                        <div class="travelers-section">
                                                            <h6 class="mb-3 text-primary">{{ count($travelers) }} Travelers</h6>
                                                            @foreach($travelers as $index => $traveler)
                                                                <div class="card mb-3" style="border: 1px solid #e3ebf0; background-color: #f8f9fa;">
                                                                    <div class="card-body p-3">
                                                                        <h6 class="card-title text-secondary mb-2">
                                                                            <i class="fas fa-user"></i> Traveler {{ $index + 1 }}
                                                                        </h6>
                                                                        <div class="row">
                                                                            <div class="col-md-6">
                                                                                @if(!empty($traveler['name']))
                                                                                    <p class="mb-1"><strong>Name:</strong> <span class="copyable-cell">{{ $traveler['name'] }}</span></p>
                                                                                @endif
                                                                                @if(!empty($traveler['last_name']))
                                                                                    <p class="mb-1"><strong>Last Name:</strong> <span class="copyable-cell">{{ $traveler['last_name'] }}</span></p>
                                                                                @endif
                                                                                @if(!empty($traveler['birth_date']))
                                                                                    <p class="mb-1"><strong>Birth Date:</strong> <span class="copyable-cell">{{ $traveler['birth_date'] }}</span></p>
                                                                                @endif
                                                                                @if(!empty($traveler['gender']))
                                                                                    <p class="mb-1"><strong>Gender:</strong> <span class="copyable-cell">{{ ucfirst($traveler['gender']) }}</span></p>
                                                                                @endif
                                                                                @if(!empty($traveler['marital_status']))
                                                                                    <p class="mb-1"><strong>Marital Status:</strong> <span class="copyable-cell">{{ ucfirst($traveler['marital_status']) }}</span></p>
                                                                                @endif
                                                                            </div>
                                                                            <div class="col-md-6">
                                                                                @if(!empty($traveler['nationality']))
                                                                                    <p class="mb-1"><strong>Nationality:</strong> <span class="copyable-cell">{{ $traveler['nationality'] }}</span></p>
                                                                                @endif
                                                                                @if(!empty($traveler['passport']))
                                                                                    <p class="mb-1"><strong>Passport:</strong> <span class="copyable-cell">{{ $traveler['passport'] }}</span></p>
                                                                                @endif
                                                                                @if(!empty($traveler['passport_expiration_date']))
                                                                                    <p class="mb-1"><strong>Passport Exp:</strong> <span class="copyable-cell">{{ $traveler['passport_expiration_date'] }}</span></p>
                                                                                @endif
                                                                                @if(!empty($traveler['passport_photo_id']))
                                                                                    @php
                                                                                        $imageUrl = 'https://arrivalcardegypt.com/storage/passport_photos/' . $traveler['passport_photo_id'] . '.jpg';
                                                                                        $uniqueId = md5('traveler_' . $index . '_passport_' . $traveler['passport_photo_id']);
                                                                                    @endphp
                                                                                    <p class="mb-1"><strong>Passport Photo:</strong></p>
                                                                                    <div style="margin-top: 5px;">
                                                                                        <img id="img-{{ $uniqueId }}" 
                                                                                             src="{{ $imageUrl }}" 
                                                                                             alt="Traveler {{ $index + 1 }} Passport Photo" 
                                                                                             data-url="{{ $imageUrl }}"
                                                                                             data-unique-id="{{ $uniqueId }}"
                                                                                             style="max-width: 150px; max-height: 150px; border: 1px solid #ddd; border-radius: 4px; display: block;"
                                                                                             class="passport-image">
                                                                                        <small class="text-muted">
                                                                                            Size: <span id="size-{{ $uniqueId }}">Calculating...</span>
                                                                                        </small>
                                                                                    </div>
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @else
                                                        <span class="text-muted">No travelers data available</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-success text-center">
                            Panel de administración - Egypt
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.partials.footer')
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Buscar todas las imágenes de pasaporte
    const passportImages = document.querySelectorAll('.passport-image');
    
    passportImages.forEach(function(img) {
        img.addEventListener('load', function() {
            const uniqueId = this.getAttribute('data-unique-id');
            const imageUrl = this.getAttribute('data-url');
            getImageSize(uniqueId, imageUrl);
        });
        
        // Si la imagen ya está cargada
        if (img.complete) {
            const uniqueId = img.getAttribute('data-unique-id');
            const imageUrl = img.getAttribute('data-url');
            getImageSize(uniqueId, imageUrl);
        }
    });
});

function getImageSize(uniqueId, imageUrl) {
    // Método 1: Intentar con fetch
    fetch(imageUrl)
        .then(response => {
            const contentLength = response.headers.get('content-length');
            if (contentLength) {
                const bytes = parseInt(contentLength);
                updateSizeDisplay(uniqueId, bytes);
            } else {
                // Método 2: Usar XMLHttpRequest como alternativa
                tryXMLHttpRequest(uniqueId, imageUrl);
            }
        })
        .catch(() => {
            // Si falla, intentar con XMLHttpRequest
            tryXMLHttpRequest(uniqueId, imageUrl);
        });
}

function tryXMLHttpRequest(uniqueId, imageUrl) {
    const xhr = new XMLHttpRequest();
    xhr.open('HEAD', imageUrl, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            const contentLength = xhr.getResponseHeader('Content-Length');
            if (contentLength) {
                updateSizeDisplay(uniqueId, parseInt(contentLength));
            } else {
                // Método 3: Intentar GET para obtener el tamaño
                tryFullDownload(uniqueId, imageUrl);
            }
        }
    };
    xhr.onerror = function() {
        tryFullDownload(uniqueId, imageUrl);
    };
    xhr.send();
}

function tryFullDownload(uniqueId, imageUrl) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', imageUrl, true);
    xhr.responseType = 'blob';
    
    xhr.onprogress = function(event) {
        if (event.lengthComputable) {
            updateSizeDisplay(uniqueId, event.total);
        }
    };
    
    xhr.onload = function() {
        if (xhr.response) {
            updateSizeDisplay(uniqueId, xhr.response.size);
        } else {
            estimateImageSize(uniqueId);
        }
    };
    
    xhr.onerror = function() {
        estimateImageSize(uniqueId);
    };
    
    xhr.send();
}

function updateSizeDisplay(uniqueId, bytes) {
    let size;
    if (bytes > 1024 * 1024) {
        size = (bytes / (1024 * 1024)).toFixed(2) + ' MB';
    } else if (bytes > 1024) {
        size = (bytes / 1024).toFixed(2) + ' KB';
    } else {
        size = bytes + ' bytes';
    }
    
    const sizeElement = document.getElementById('size-' + uniqueId);
    if (sizeElement) {
        sizeElement.textContent = size;
    }
}

function estimateImageSize(uniqueId) {
    const img = document.getElementById('img-' + uniqueId);
    if (img && img.naturalWidth && img.naturalHeight) {
        // Estimación aproximada basada en dimensiones
        const pixels = img.naturalWidth * img.naturalHeight;
        const estimatedBytes = pixels * 3; // Aproximación RGB
        const sizeElement = document.getElementById('size-' + uniqueId);
        if (sizeElement) {
            sizeElement.textContent = '~' + (estimatedBytes / 1024).toFixed(0) + ' KB (estimado)';
        }
    } else {
        const sizeElement = document.getElementById('size-' + uniqueId);
        if (sizeElement) {
            sizeElement.textContent = 'No disponible';
        }
    }
}
</script>

<style>
.travelers-section h6 {
    font-weight: 600;
    margin-bottom: 15px;
}

.travelers-section .card {
    transition: box-shadow 0.2s ease-in-out;
}

.travelers-section .card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.travelers-section .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #495057 !important;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.travelers-section p {
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.travelers-section strong {
    color: #343a40;
    font-weight: 600;
}

.travelers-section .copyable-cell {
    color: #0056b3;
    cursor: pointer;
}

.travelers-section .copyable-cell:hover {
    text-decoration: underline;
}

.travelers-section .passport-image {
    transition: transform 0.2s ease-in-out;
}

.travelers-section .passport-image:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.travelers-section small.text-muted {
    font-size: 0.75rem;
}
</style>

@endsection