@extends('layouts.app')
@section('title', 'Editar Documento - Reembolsos')
@push('styles')
    <link href="{{ asset('css/refund.css') }}" rel="stylesheet">
    <style>
        .country-flag {
            width: 24px;
            height: auto;
            margin-right: 8px;
        }
        .field-row {
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }
        .field-row:last-child {
            border-bottom: none;
        }
        .field-key {
            font-weight: 500;
            color: #fff;
        }
        .field-value {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .field-value:hover {
            background-color: #e9ecef;
            border-color: #adb5bd;
        }
        .field-value.editing {
            background-color: #fff;
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        .document-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
        }
        .save-btn {
            display: none;
        }
    </style>
@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">Editar Documento</h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('stats.index') }}">Dashboard</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('refund.index') }}">Reembolsos</a></li>
                                    <li class="breadcrumb-item active">Editar</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Header del documento -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card document-header">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('flags/' . strtolower($country) . '.png') }}" 
                                                 alt="{{ $country }}" 
                                                 class="country-flag"
                                                 onerror="this.style.display='none'">
                                            <div>
                                                <h5 class="mb-1 text-white">
                                                    Documento #{{ $document->id }} - {{ $countryName }}
                                                </h5>
                                                <p class="mb-0 text-white-50">
                                                    <i class="bx bx-time me-1"></i>
                                                    Creado: {{ \Carbon\Carbon::parse($document->created_at)->format('d/m/Y H:i') }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-md-end">
                                        <div class="d-flex flex-column gap-2">
                                            <!-- Estado del documento -->
                                            <div>
                                                <span class="badge bg-light text-dark">
                                                    Estado: {{ ucfirst($document->status) }}
                                                </span>
                                                @if($document->payment_gateway)
                                                    <span class="badge bg-light text-dark">
                                                        Gateway: {{ $document->payment_gateway }}
                                                    </span>
                                                @endif
                                            </div>
                                            <!-- Estado del bot -->
                                            @if($document->bot_status)
                                                @php
                                                    $statusColors = [
                                                        'IN_QUEUE' => 'warning',
                                                        'PROCESSING' => 'info', 
                                                        'COMPLETED' => 'success',
                                                        'FAILED' => 'danger',
                                                        'WAITING' => 'primary'
                                                    ];
                                                    $color = $statusColors[$document->bot_status] ?? 'secondary';
                                                @endphp
                                                <span class="badge bg-{{ $color }}">
                                                    Bot: {{ $document->bot_status }}
                                                </span>
                                            @else
                                                <span class="badge bg-secondary">
                                                    Bot: N/A
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Estado del Bot -->
                @if($document->bot_status)
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="bx bx-bot me-2"></i>
                                    Estado del Bot
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-md-3">
                                        <label class="field-key text-dark">Status del Bot:</label>
                                    </div>
                                    <div class="col-md-6">
                                        <select class="form-select" id="bot-status-select" data-original="{{ $document->bot_status }}">
                                            <option value="IN_QUEUE" {{ $document->bot_status == 'IN_QUEUE' ? 'selected' : '' }}>IN_QUEUE</option>
                                            <option value="COMPLETED" {{ $document->bot_status == 'COMPLETED' ? 'selected' : '' }}>COMPLETED</option>
                                            <option value="WAITING" {{ $document->bot_status == 'WAITING' ? 'selected' : '' }}>WAITING</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <button class="btn btn-success" onclick="saveBotStatus()" id="save-bot-btn" style="display: none;">
                                            <i class="bx bx-check me-1"></i>
                                            Guardar Status
                                        </button>
                                        <button class="btn btn-secondary" onclick="cancelBotStatusEdit()" id="cancel-bot-btn" style="display: none;">
                                            <i class="bx bx-x me-1"></i>
                                            Cancelar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Formulario de edición -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">
                                        <i class="bx bx-edit me-2"></i>
                                        Campos del Documento
                                    </h5>
                                    <div>
                                        <span class="badge bg-info">{{ count($documentData) }} campos</span>
                                        <a href="javascript:history.back()" class="btn btn-sm btn-secondary ms-2">
                                            <i class="bx bx-arrow-back me-1"></i>
                                            Volver
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                @if(count($documentData) > 0)
                                    <div class="row">
                                        <div class="col-12">
                                            <div id="fields-container">
                                                @foreach($documentData as $key => $value)
                                                <div class="field-row">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-3">
                                                            <label class="field-key">{{ $key }}:</label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <div class="field-value" 
                                                                 data-field="{{ $key }}" 
                                                                 data-original="{{ is_array($value) ? json_encode($value) : $value }}">
                                                                @if(is_array($value))
                                                                    <code>{{ json_encode($value, JSON_PRETTY_PRINT) }}</code>
                                                                @else
                                                                    {{ $value }}
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div class="col-md-1">
                                                            <button class="btn btn-sm btn-success save-btn" 
                                                                    data-field="{{ $key }}"
                                                                    onclick="saveField('{{ $key }}')">
                                                                <i class="bx bx-check"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <div class="text-center py-5">
                                        <i class="bx bx-data display-4 text-muted mb-3"></i>
                                        <h5 class="text-muted">No hay datos disponibles</h5>
                                        <p class="text-muted">El campo data de este documento está vacío.</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Success Toast -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11000">
    <div id="successToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header bg-success text-white">
            <i class="bx bx-check-circle me-2"></i>
            <strong class="me-auto">Éxito</strong>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            Campo actualizado correctamente
        </div>
    </div>
</div>

<!-- Error Toast -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11000">
    <div id="errorToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header bg-danger text-white">
            <i class="bx bx-error-circle me-2"></i>
            <strong class="me-auto">Error</strong>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            Ocurrió un error al actualizar el campo
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Hacer campos editables al hacer clic
    document.querySelectorAll('.field-value').forEach(function(element) {
        element.addEventListener('click', function() {
            makeEditable(this);
        });
    });
    
    // Manejar cambios en el status del bot
    const botStatusSelect = document.getElementById('bot-status-select');
    if (botStatusSelect) {
        botStatusSelect.addEventListener('change', function() {
            const originalValue = this.getAttribute('data-original');
            const currentValue = this.value;
            
            if (originalValue !== currentValue) {
                document.getElementById('save-bot-btn').style.display = 'inline-block';
                document.getElementById('cancel-bot-btn').style.display = 'inline-block';
            } else {
                document.getElementById('save-bot-btn').style.display = 'none';
                document.getElementById('cancel-bot-btn').style.display = 'none';
            }
        });
    }
});

function makeEditable(element) {
    if (element.classList.contains('editing')) return;
    
    const field = element.getAttribute('data-field');
    const originalValue = element.getAttribute('data-original');
    const saveBtn = document.querySelector(`.save-btn[data-field="${field}"]`);
    
    // Crear input para edición
    const input = document.createElement('textarea');
    input.className = 'form-control';
    input.style.minHeight = '38px';
    input.style.resize = 'vertical';
    input.value = originalValue;
    
    // Reemplazar contenido
    element.innerHTML = '';
    element.appendChild(input);
    element.classList.add('editing');
    
    // Mostrar botón de guardar
    saveBtn.style.display = 'block';
    
    // Focus en el input
    input.focus();
    
    // Manejar teclas
    input.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            cancelEdit(element, originalValue, field);
        } else if (e.key === 'Enter' && e.ctrlKey) {
            saveField(field);
        }
    });
}

function cancelEdit(element, originalValue, field) {
    const saveBtn = document.querySelector(`.save-btn[data-field="${field}"]`);
    
    // Restaurar valor original
    try {
        const parsed = JSON.parse(originalValue);
        if (typeof parsed === 'object') {
            element.innerHTML = `<code>${JSON.stringify(parsed, null, 2)}</code>`;
        } else {
            element.textContent = originalValue;
        }
    } catch (e) {
        element.textContent = originalValue;
    }
    
    element.classList.remove('editing');
    saveBtn.style.display = 'none';
}

function saveField(field) {
    const element = document.querySelector(`.field-value[data-field="${field}"]`);
    const input = element.querySelector('textarea');
    const saveBtn = document.querySelector(`.save-btn[data-field="${field}"]`);
    
    if (!input) return;
    
    const newValue = input.value;
    
    // Mostrar loading en el botón
    saveBtn.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i>';
    saveBtn.disabled = true;
    
    // Hacer petición AJAX
    fetch(`{{ route('refund.update', ['country' => $country, 'id' => $document->id]) }}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            field: field,
            value: newValue
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Actualizar valor en el DOM
            element.setAttribute('data-original', newValue);
            
            // Mostrar nuevo valor
            try {
                const parsed = JSON.parse(newValue);
                if (typeof parsed === 'object') {
                    element.innerHTML = `<code>${JSON.stringify(parsed, null, 2)}</code>`;
                } else {
                    element.textContent = newValue;
                }
            } catch (e) {
                element.textContent = newValue;
            }
            
            // Mostrar toast de éxito
            showToast('successToast');
        } else {
            // Mostrar error
            showToast('errorToast', data.error || 'Error desconocido');
            
            // Restaurar valor original
            cancelEdit(element, element.getAttribute('data-original'), field);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('errorToast', 'Error de conexión');
        
        // Restaurar valor original
        cancelEdit(element, element.getAttribute('data-original'), field);
    })
    .finally(() => {
        // Restaurar botón
        saveBtn.innerHTML = '<i class="bx bx-check"></i>';
        saveBtn.disabled = false;
        saveBtn.style.display = 'none';
        element.classList.remove('editing');
    });
}

function showToast(toastId, message = null) {
    const toast = document.getElementById(toastId);
    if (message) {
        toast.querySelector('.toast-body').textContent = message;
    }
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();
}

function saveBotStatus() {
    const select = document.getElementById('bot-status-select');
    const saveBtn = document.getElementById('save-bot-btn');
    const cancelBtn = document.getElementById('cancel-bot-btn');
    
    const newStatus = select.value;
    
    // Mostrar loading
    saveBtn.innerHTML = '<i class="bx bx-loader-alt bx-spin me-1"></i>Guardando...';
    saveBtn.disabled = true;
    cancelBtn.disabled = true;
    
    // Hacer petición AJAX
    fetch(`{{ route('refund.update.bot', ['country' => $country, 'id' => $document->id]) }}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            status: newStatus
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Actualizar valor original
            select.setAttribute('data-original', newStatus);
            
            // Mostrar toast de éxito
            showToast('successToast', 'Status del bot actualizado correctamente');
            
            // Ocultar botones
            saveBtn.style.display = 'none';
            cancelBtn.style.display = 'none';
        } else {
            // Mostrar error
            showToast('errorToast', data.error || 'Error al actualizar el status del bot');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('errorToast', 'Error de conexión');
    })
    .finally(() => {
        // Restaurar botón
        saveBtn.innerHTML = '<i class="bx bx-check me-1"></i>Guardar Status';
        saveBtn.disabled = false;
        cancelBtn.disabled = false;
    });
}

function cancelBotStatusEdit() {
    const select = document.getElementById('bot-status-select');
    const saveBtn = document.getElementById('save-bot-btn');
    const cancelBtn = document.getElementById('cancel-bot-btn');
    
    // Restaurar valor original
    const originalValue = select.getAttribute('data-original');
    select.value = originalValue;
    
    // Ocultar botones
    saveBtn.style.display = 'none';
    cancelBtn.style.display = 'none';
}
</script>
@endsection