@extends('admin.layouts.app')

@push('css')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endpush

@section('content')

    <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">Cotización #{{ $quote->id }}</h4>
                <div class="page-title-right">
                    <a href="{{ route('admin.quotes.edit', $quote->id) }}" class="btn btn-warning me-2"><i class="ri-pencil-line me-1"></i>Editar Cotización</a>
                    <a href="{{ route('quotes.index') }}" class="btn btn-primary">Volver a Cotizaciones</a>
                </div>
            </div>
        </div>
    </div>
            
            <div class="row">
                <div class="col-md-9">
                    <!-- Información del Cliente -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Información del Cliente</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table">
                                        <tr>
                                            <th>Nombre:</th>
                                            <td>{{ $quote->first_name }} {{ $quote->last_name }}</td>
                                        </tr>
                                        <tr>
                                            <th>Correo:</th>
                                            <td>{{ $quote->email }}</td>
                                        </tr>
                                        <tr>
                                            <th>Teléfono:</th>
                                            <td>{{ $quote->mobile }}</td>
                                        </tr>
                                        <tr>
                                            <th>País:</th>
                                            <td>{{ $quote->country_name }}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table">
                                        <tr>
                                            <th>Dirección:</th>
                                            <td>{{ $quote->address }}</td>
                                        </tr>
                                        @if($quote->apartment)
                                        <tr>
                                            <th>Apartamento:</th>
                                            <td>{{ $quote->apartment }}</td>
                                        </tr>
                                        @endif
                                        <tr>
                                            <th>Ciudad:</th>
                                            <td>{{ $quote->city }}, {{ $quote->state }}</td>
                                        </tr>
                                        <tr>
                                            <th>Código Postal:</th>
                                            <td>{{ $quote->zip }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            
                            @if($quote->special_requirements)
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <h5>Requerimientos Especiales:</h5>
                                    <p class="alert alert-info">{{ $quote->special_requirements }}</p>
                                </div>
                            </div>
                            @endif

                            @if($quote->notes)
                            <div class="row">
                                <div class="col-md-12">
                                    <h5>Notas del Cliente:</h5>
                                    <p class="alert alert-light">{{ $quote->notes }}</p>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Productos Solicitados -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Productos Solicitados</h3>
                        </div>
                        <div class="card-body table-responsive p-0">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Producto</th>
                                        <th>Precio Unitario</th>
                                        <th>Cantidad</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($quoteItems as $item)
                                    <tr>
                                        <td>{{ $item->name }}</td>
                                        <td>${{ number_format($item->unit_price, 2) }}</td>
                                        <td>{{ $item->quantity }}</td>
                                        <td>${{ number_format($item->total, 2) }}</td>
                                    </tr>
                                    @endforeach
                                    <tr>
                                        <th colspan="3" class="text-end">Subtotal:</th>
                                        <th>${{ number_format($quote->subtotal, 2) }}</th>
                                    </tr>
                                    @if($quote->shipping > 0)
                                    <tr>
                                        <th colspan="3" class="text-end">Envío:</th>
                                        <th>${{ number_format($quote->shipping, 2) }}</th>
                                    </tr>
                                    @endif
                                    <tr>
                                        <th colspan="3" class="text-end">Total Original (Carrito):</th>
                                        <th>${{ number_format($quote->grand_total, 2) }}</th>
                                    </tr>
                                    @if($quote->quoted_price)
                                    <tr class="table-success">
                                        <th colspan="3" class="text-end">Precio Cotizado (Final):</th>
                                        <th>${{ number_format($quote->quoted_price, 2) }}</th>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <!-- Estado y Acciones -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Estado de Cotización</h3>
                        </div>
                        <div class="card-body">
                            <form id="updateStatusForm">
                                @csrf
                                <div class="mb-3">
                                    <label>Estado Actual:</label>
                                    <select name="status" id="field_status" class="form-select">
                                        <option value="pending" {{ $quote->status == 'pending' ? 'selected' : '' }}>Pendiente</option>
                                        <option value="quoted" {{ $quote->status == 'quoted' ? 'selected' : '' }}>Cotizada</option>
                                        <option value="accepted" {{ $quote->status == 'accepted' ? 'selected' : '' }}>Aceptada</option>
                                        <option value="rejected" {{ $quote->status == 'rejected' ? 'selected' : '' }}>Rechazada</option>
                                        <option value="expired" {{ $quote->status == 'expired' ? 'selected' : '' }}>Expirada</option>
                                    </select>
                                </div>

                                <div class="mb-3" id="quotedPriceGroup" style="display: {{ $quote->status == 'quoted' ? 'block' : 'none' }}">
                                    <label>Precio Cotizado:</label>
                                    <input type="number" name="quoted_price" id="quoted_price" class="form-control" step="0.01" value="{{ $quote->quoted_price ?? $quote->grand_total }}" placeholder="{{ number_format($quote->grand_total, 2) }}">
                                    <small class="text-muted">Precio original del carrito: ${{ number_format($quote->grand_total, 2) }}</small>
                                </div>

                                <div class="mb-3" id="validUntilGroup" style="display: {{ $quote->status == 'quoted' ? 'block' : 'none' }}">
                                    <label>Válida Hasta:</label>
                                    <input type="date" name="valid_until" id="valid_until" class="form-control" value="{{ $quote->valid_until ? $quote->valid_until->format('Y-m-d') : '' }}">
                                </div>

                                <div class="mb-3">
                                    <label>Notas del Admin:</label>
                                    <textarea name="admin_notes" id="admin_notes" rows="4" class="form-control">{{ $quote->admin_notes }}</textarea>
                                </div>

                                <button type="submit" class="btn btn-primary btn-block">Actualizar Estado</button>
                            </form>
                        </div>
                    </div>

                    <!-- Acciones PDF -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title"><i class="ri-file-pdf-line me-2"></i>Documentos PDF</h3>
                        </div>
                        <div class="card-body">
                            <div class="btn-group-vertical w-100">
                                <a href="{{ route('quotes.print', $quote->id) }}" class="btn btn-outline-secondary mb-2" target="_blank">
                                    <i class="ri-printer-line me-2"></i>Vista de Impresión
                                </a>
                                <a href="{{ route('quotes.pdf', $quote->id) }}" class="btn btn-success mb-2" target="_blank">
                                    <i class="ri-download-line me-2"></i>Descargar PDF
                                </a>
                                <button type="button" class="btn btn-primary" id="sendPdfBtn" data-bs-toggle="modal" data-bs-target="#sendPdfModal">
                                    <i class="ri-mail-line me-2"></i>Enviar por Email
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Información Adicional -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Información</h3>
                        </div>
                        <div class="card-body">
                            <table class="table table-sm">
                                <tr>
                                    <th>Fecha Solicitud:</th>
                                    <td>{{ $quote->created_at->format('d/m/Y H:i') }}</td>
                                </tr>
                                @if($quote->quoted_at)
                                <tr>
                                    <th>Fecha Cotización:</th>
                                    <td>{{ $quote->quoted_at->format('d/m/Y H:i') }}</td>
                                </tr>
                                @endif
                                @if($quote->valid_until)
                                <tr>
                                    <th>Válida Hasta:</th>
                                    <td>{{ $quote->valid_until->format('d/m/Y') }}</td>
                                </tr>
                                @endif
                                @if($quote->user_name)
                                <tr>
                                    <th>Usuario Registrado:</th>
                                    <td>{{ $quote->user_name }}</td>
                                </tr>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>
    

@endsection

@push('js')
<script>
$(document).ready(function() {
    // Mostrar/ocultar campos según el estado
    $('#status').change(function() {
        if ($(this).val() == 'quoted') {
            $('#quotedPriceGroup, #validUntilGroup').show();
        } else {
            $('#quotedPriceGroup, #validUntilGroup').hide();
        }
    });

    // Actualizar estado
    $('#updateStatusForm').submit(function(e) {
        e.preventDefault();
        
        $.ajax({
            url: '{{ route("quotes.updateStatus", $quote->id) }}',
            type: 'POST',
            data: $(this).serialize(),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function(response, textStatus, xhr) {
                console.log('Response received:', response);
                console.log('Status:', xhr.status);
                console.log('Text Status:', textStatus);
                
                if (response && response.status === true) {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    var errorMsg = response && response.message ? response.message : 'Error desconocido';
                    if (response && response.errors) {
                        errorMsg = Object.values(response.errors).join('\n');
                    }
                    Swal.fire({
                        title: 'Error',
                        text: errorMsg,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            },
            error: function(xhr, status, error) {
                console.log('AJAX Error details:');
                console.log('Status:', xhr.status);
                console.log('Status Text:', xhr.statusText);
                console.log('Response Text:', xhr.responseText);
                console.log('Error:', error);
                
                try {
                    var jsonResponse = JSON.parse(xhr.responseText);
                    var errorMsg = jsonResponse.message || 'Error al procesar la respuesta';
                    if (jsonResponse.errors) {
                        errorMsg = Object.values(jsonResponse.errors).join('\n');
                    }
                } catch (e) {
                    var errorMsg = 'Error al actualizar el estado. Código: ' + xhr.status;
                }
                
                Swal.fire({
                    title: 'Error',
                    text: errorMsg,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        });
    });

    // Enviar PDF por email
    $('#sendPdfForm').on('submit', function(e) {
        e.preventDefault();
        
        $('#sendPdfSubmitBtn').prop('disabled', true).html('<i class="ri-loader-line fa-spin me-1"></i>Enviando...');
        
        $.ajax({
            url: '{{ route("quotes.sendPDF", $quote->id) }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.status) {
                    $('#sendPdfModal').modal('hide');
                    Swal.fire({
                        title: 'Éxito',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    });
                    // Limpiar formulario
                    $('#sendPdfForm')[0].reset();
                    $('#email').val('{{ $quote->email }}');
                    $('#subject').val('Cotización #{{ str_pad($quote->id, 6, "0", STR_PAD_LEFT) }} - {{ $quote->first_name }} {{ $quote->last_name }}');
                } else {
                    var errorMsg = response && response.message ? response.message : 'Error desconocido';
                    if (response && response.errors) {
                        errorMsg = Object.values(response.errors).join('\n');
                    }
                    Swal.fire({
                        title: 'Error',
                        text: errorMsg,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            },
            error: function(xhr) {
                var errorMsg = 'Error al enviar el email';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                    errorMsg = Object.values(xhr.responseJSON.errors).join('\n');
                }
                
                Swal.fire({
                    title: 'Error',
                    text: errorMsg,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            },
            complete: function() {
                $('#sendPdfSubmitBtn').prop('disabled', false).html('<i class="ri-send-plane-line me-1"></i>Enviar Email');
            }
        });
    });
});
</script>

<!-- Modal para Enviar PDF por Email -->
<div class="modal fade" id="sendPdfModal" tabindex="-1" role="dialog" aria-labelledby="sendPdfModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sendPdfModalLabel">
                    <i class="ri-mail-line me-2"></i>Enviar Cotización por Email
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="sendPdfForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="email">Email de Destino <span class="text-danger">*</span></label>
                        <input type="email" class="form-control" id="email" name="email" 
                               value="{{ $quote->email }}" required>
                        <small class="text-muted">Se enviará la cotización en formato PDF a esta dirección</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="subject">Asunto <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="subject" name="subject" 
                               value="Cotización #{{ str_pad($quote->id, 6, '0', STR_PAD_LEFT) }} - {{ $quote->first_name }} {{ $quote->last_name }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="message">Mensaje Personalizado (Opcional)</label>
                        <textarea class="form-control" id="message" name="message" rows="4" 
                                  placeholder="Agregue un mensaje personalizado que se incluirá en el email..."></textarea>
                    </div>

                    <div class="alert alert-info">
                        <i class="ri-information-line me-2"></i>
                        <strong>Información:</strong> Se enviará un email profesional con la cotización en PDF adjunta. 
                        El email incluirá todos los detalles de la cotización y sus datos de contacto.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="ri-close-line me-1"></i>Cancelar
                    </button>
                    <button type="submit" class="btn btn-primary" id="sendPdfSubmitBtn">
                        <i class="ri-send-plane-line me-1"></i>Enviar Email
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endpush