@extends('layouts.app')
@section('title', 'ESIM Thaisinga')
@push('styles')
    <link href="{{ asset('css/refund.css') }}" rel="stylesheet">
@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">
                <!-- Page Title -->
                <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">
                                ESIM Thaisinga - Documentos con QR Fallido
                            </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">ESIM Thaisinga</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>

                @if(isset($error))
                <div class="row">
                    <div class="col-12">
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="bx bx-x-circle me-2"></i>
                            {{ $error }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Formulario de Búsqueda -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title mb-0">
                                    Buscar Documentos por Fecha (Base de datos: thaisinga)
                                </h4>
                            </div>
                            <div class="card-body">
                                <form method="GET" action="{{ route('esim-thaisinga.index') }}">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="date" class="form-label">Fecha</label>
                                            <input type="date" 
                                                   class="form-control" 
                                                   id="date" 
                                                   name="date" 
                                                   value="{{ $date ?? date('Y-m-d') }}" 
                                                   required>
                                        </div>
                                        <div class="col-md-4 d-flex align-items-end">
                                            <button type="submit" class="btn btn-primary waves-effect btn-label waves-light">
                                                <i class="bx bx-search label-icon"></i> Buscar
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Resultados -->
                @if(isset($results) && count($results) > 0)
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title mb-0">
                                    Resultados ({{ count($results) }} documentos encontrados)
                                </h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped table-nowrap align-middle mb-0">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>ID</th>
                                                <th>Fecha Creación</th>
                                                <th>Email</th>
                                                <th>Nombre</th>
                                                <th>Apellido</th>
                                                <th>Yesim ID</th>
                                                <th>Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($results as $result)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $result->id }}</td>
                                                <td>{{ \Carbon\Carbon::parse($result->created_at)->format('Y-m-d H:i:s') }}</td>
                                                <td>{{ $result->customer_email ?? 'N/A' }}</td>
                                                <td>{{ $result->customer_name ?? 'N/A' }}</td>
                                                <td>{{ $result->customer_last_name ?? 'N/A' }}</td>
                                                <td>
                                                    @if($result->plan_yesim_id)
                                                        <span class="badge bg-info">{{ $result->plan_yesim_id }}</span>
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <div class="btn-group" role="group">
                                                        <button type="button" 
                                                                class="btn btn-sm btn-info waves-effect" 
                                                                onclick="showDetails({{ $result->id }}, {{ json_encode($result) }})">
                                                            <i class="bx bx-show"></i> Ver Detalles
                                                        </button>
                                                        @if($result->customer_email && $result->plan_yesim_id)
                                                        <button type="button" 
                                                                class="btn btn-sm btn-success waves-effect" 
                                                                onclick="sendEmail({{ json_encode($result->customer_email) }}, {{ $result->plan_yesim_id }}, {{ $result->id }})"
                                                                id="btn-send-{{ $result->id }}">
                                                            <i class="bx bx-envelope"></i> Enviar Email
                                                        </button>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @elseif(isset($results) && count($results) === 0 && request()->has('date'))
                <div class="row">
                    <div class="col-12">
                        <div class="alert alert-info">
                            <i class="bx bx-info-circle me-2"></i>
                            No se encontraron documentos para la fecha seleccionada: <strong>{{ $date }}</strong>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal para mostrar detalles -->
<div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailsModalLabel">Detalles del Documento</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="modalContent">
                    <!-- Contenido dinámico -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para respuesta de API -->
<div class="modal fade" id="responseModal" tabindex="-1" aria-labelledby="responseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="responseModalLabel">Respuesta de la API</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="responseContent">
                    <!-- Contenido dinámico -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script>
function formatJson(jsonString) {
    try {
        if (!jsonString) return '{}';
        const parsed = typeof jsonString === 'string' ? JSON.parse(jsonString) : jsonString;
        return JSON.stringify(parsed, null, 2);
    } catch (e) {
        return jsonString || '{}';
    }
}

function showDetails(id, data) {
    const modal = new bootstrap.Modal(document.getElementById('detailsModal'));
    const modalContent = document.getElementById('modalContent');
    
    let html = `
        <div class="row mb-3">
            <div class="col-md-6">
                <strong>ID:</strong> ${id}
            </div>
            <div class="col-md-6">
                <strong>Fecha:</strong> ${data.created_at}
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-6">
                <strong>Email:</strong> ${data.customer_email || 'N/A'}
            </div>
            <div class="col-md-6">
                <strong>Nombre:</strong> ${data.customer_name || 'N/A'} ${data.customer_last_name || ''}
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-6">
                <strong>Password:</strong> <code>${data.user_password || 'N/A'}</code>
            </div>
            <div class="col-md-6">
                <strong>Yesim ID:</strong> ${data.plan_yesim_id || 'N/A'}
            </div>
        </div>
        <hr>
        <h6>Data (JSON):</h6>
        <pre class="bg-light p-3 rounded" style="max-height: 300px; overflow-y: auto;">${formatJson(data.data)}</pre>
        <hr>
        <h6>Payment (JSON):</h6>
        <pre class="bg-light p-3 rounded" style="max-height: 300px; overflow-y: auto;">${formatJson(data.payment)}</pre>
    `;
    
    modalContent.innerHTML = html;
    modal.show();
}

function sendEmail(email, planId, documentId) {
    const btn = document.getElementById(`btn-send-${documentId}`);
    const originalText = btn.innerHTML;
    
    // Deshabilitar botón y mostrar loading
    btn.disabled = true;
    btn.innerHTML = '<i class="bx bx-loader bx-spin"></i> Enviando...';
    
    // Obtener token CSRF
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                      document.querySelector('input[name="_token"]')?.value;
    
    fetch('{{ route("esim-thaisinga.send-email") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({
            email: email,
            plan_id: planId
        })
    })
    .then(response => response.json())
    .then(data => {
        // Restaurar botón
        btn.disabled = false;
        btn.innerHTML = originalText;
        
        // Mostrar modal con respuesta
        const modal = new bootstrap.Modal(document.getElementById('responseModal'));
        const modalContent = document.getElementById('responseContent');
        
        let html = '';
        if (data.success) {
            html = `
                <div class="alert alert-success">
                    <h6><i class="bx bx-check-circle me-2"></i>${data.message || 'Email enviado exitosamente'}</h6>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>Email:</strong> ${email}
                    </div>
                    <div class="col-md-6">
                        <strong>Plan ID:</strong> ${planId}
                    </div>
                </div>
                ${data.data?.user ? `
                <div class="row mb-3">
                    <div class="col-md-12">
                        <h6>Usuario:</h6>
                        <ul>
                            <li><strong>ID:</strong> ${data.data.user.id || 'N/A'}</li>
                            <li><strong>Email:</strong> ${data.data.user.email || 'N/A'}</li>
                            <li><strong>Nombre:</strong> ${data.data.user.first_name || ''} ${data.data.user.last_name || ''}</li>
                        </ul>
                    </div>
                </div>
                ` : ''}
                ${data.data?.esim ? `
                <div class="row mb-3">
                    <div class="col-md-12">
                        <h6>eSIM:</h6>
                        <ul>
                            <li><strong>ICCID:</strong> ${data.data.esim.iccid || 'N/A'}</li>
                            <li><strong>QR Code:</strong> <code>${data.data.esim.qrcode || 'N/A'}</code></li>
                            <li><strong>Activation Code:</strong> ${data.data.esim.activation_code || 'N/A'}</li>
                            ${data.data.esim.ios_tap_link ? `<li><strong>iOS Link:</strong> <a href="${data.data.esim.ios_tap_link}" target="_blank">${data.data.esim.ios_tap_link}</a></li>` : ''}
                        </ul>
                    </div>
                </div>
                ` : ''}
                ${data.data?.purchase ? `
                <div class="row mb-3">
                    <div class="col-md-12">
                        <h6>Compra:</h6>
                        <ul>
                            <li><strong>ID:</strong> ${data.data.purchase.id || 'N/A'}</li>
                            <li><strong>Transaction ID:</strong> ${data.data.purchase.transaction_id || 'N/A'}</li>
                        </ul>
                    </div>
                </div>
                ` : ''}
                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Email Enviado:</strong> ${data.data?.email_sent ? '<span class="badge bg-success">Sí</span>' : '<span class="badge bg-danger">No</span>'}
                    </div>
                </div>
                <hr>
                <h6>Respuesta Completa (JSON):</h6>
                <pre class="bg-light p-3 rounded" style="max-height: 300px; overflow-y: auto;">${JSON.stringify(data.data, null, 2)}</pre>
            `;
        } else {
            html = `
                <div class="alert alert-danger">
                    <h6><i class="bx bx-x-circle me-2"></i>Error al enviar email</h6>
                    <p>${data.message || 'Error desconocido'}</p>
                    ${data.error ? `<p><strong>Error:</strong> ${data.error}</p>` : ''}
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>Email:</strong> ${email}
                    </div>
                    <div class="col-md-6">
                        <strong>Plan ID:</strong> ${planId}
                    </div>
                </div>
                ${data.status_code ? `<p><strong>Status Code:</strong> ${data.status_code}</p>` : ''}
                <hr>
                <h6>Respuesta Completa (JSON):</h6>
                <pre class="bg-light p-3 rounded" style="max-height: 300px; overflow-y: auto;">${JSON.stringify(data, null, 2)}</pre>
            `;
        }
        
        modalContent.innerHTML = html;
        modal.show();
    })
    .catch(error => {
        // Restaurar botón
        btn.disabled = false;
        btn.innerHTML = originalText;
        
        // Mostrar error
        const modal = new bootstrap.Modal(document.getElementById('responseModal'));
        const modalContent = document.getElementById('responseContent');
        
        modalContent.innerHTML = `
            <div class="alert alert-danger">
                <h6><i class="bx bx-x-circle me-2"></i>Error de conexión</h6>
                <p>${error.message || 'Error desconocido al comunicarse con el servidor'}</p>
            </div>
        `;
        modal.show();
    });
}
</script>
@endsection