@extends('layouts.app')

@section('title', 'Cotización ' . $quote->quote_number)

@section('content')
@php
    $companyName = \App\Models\Setting::get('company_name', \App\Models\Setting::get('app_name', 'TI Manager'));
    $companyNit = \App\Models\Setting::get('company_nit', '');
    $companyAddress = \App\Models\Setting::get('company_address', '');
    $companyPhone = \App\Models\Setting::get('company_phone', '');
    $companyEmail = \App\Models\Setting::get('company_email', '');
    $companyWebsite = \App\Models\Setting::get('company_website', '');
    $appLogo = \App\Models\Setting::get('app_logo');
@endphp

<div class="animate-fadeIn" x-data="quoteViewer()">
    
    <style>
        .btn-actions-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            width: 100%;
            margin-top: 15px;
            justify-content: stretch;
        }
        .btn-actions-grid > * {
            flex: 1 1 calc(50% - 10px);
        }
        @media(min-width: 768px) {
            .btn-actions-grid {
                margin-top: 0;
                width: auto;
                justify-content: flex-end;
            }
            .btn-actions-grid > * {
                flex: 0 0 auto;
            }
        }
        .btn-actions-grid .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 12px;
            white-space: nowrap;
        }
    </style>

    {{-- Header UI similar a Reportes --}}
    <div class="card shadow-sm" style="margin-bottom: 25px;">
        <div class="card-body d-flex flex-wrap justify-content-between align-items-center" style="gap: 15px;">
            <div class="d-flex align-items-center gap-sm">
                <a href="{{ route('quotes.index') }}" class="btn btn-ghost btn-icon" title="Volver a Cotizaciones" style="margin-right: 10px;">
                    <i class="ph ph-arrow-left"></i>
                </a>
                <div>
                    <h4 class="mb-1 text-primary" style="display: flex; align-items: center; gap: 8px;">
                        <i class="ph ph-file-pdf"></i> Cotización {{ $quote->quote_number }}
                        @php
                            $statusColors = [
                                'Borrador' => ['bg' => 'rgba(150, 150, 150, 0.1)', 'color' => '#6b7280'],
                                'Enviada' => ['bg' => 'rgba(20, 167, 237, 0.1)', 'color' => '#14a7ed'],
                                'Aceptada' => ['bg' => 'rgba(145, 200, 73, 0.1)', 'color' => '#91c849'],
                                'Rechazada' => ['bg' => 'rgba(239, 68, 68, 0.1)', 'color' => '#ef4444'],
                            ];
                            $color = $statusColors[$quote->status] ?? $statusColors['Borrador'];
                            $isExpired = $quote->valid_until && $quote->valid_until->isPast() && $quote->status !== 'Aceptada';
                        @endphp
                        <span style="padding: 2px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; background: {{ $color['bg'] }}; color: {{ $color['color'] }}; margin-left: 5px;">
                            {{ (auth()->user()->isClient() && $quote->status === 'Enviada') ? 'Por Aprobar' : $quote->status }}
                        </span>
                        @if($isExpired)
                            <span style="padding: 2px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; background: rgba(239, 68, 68, 0.1); color: #ef4444; margin-left: 5px; display: inline-flex; align-items: center; gap: 4px;">
                                <i class="ph ph-warning-circle"></i> VENCIDA
                            </span>
                        @endif
                    </h4>
                    <p class="text-muted mb-0 small">Cliente: {{ $quote->customer_name }} | Creada el {{ $quote->created_at->format('d/m/Y') }}</p>
                </div>
            </div>
            
            <div class="btn-actions-grid">
                @if(!auth()->user()->isClient())
                    @if($quote->status === 'Borrador')
                        <a href="{{ route('quotes.edit', $quote) }}" class="btn btn-outline">
                            <i class="ph ph-pencil-simple"></i> Editar
                        </a>
                    @endif
                    @if(!$quote->signature_path && !in_array($quote->status, ['Aceptada', 'Rechazada', 'Facturada']))
                        <button type="button" @click="openSignaturePad('creator')" class="btn btn-outline">
                            <i class="ph ph-pen"></i> Firmar
                        </button>
                    @endif
                @else
                    @if($quote->status === 'Enviada')
                        <a href="{{ route('quotes.public.show', $quote->token) }}" target="_blank" class="btn btn-primary" style="display: inline-flex; align-items: center; gap: 4px;">
                            <i class="ph ph-pen-nib"></i> Aprobar
                        </a>
                    @endif
                @endif
                <a href="{{ route('quotes.pdf', $quote) }}" target="_blank" class="btn btn-outline">
                    <i class="ph ph-printer"></i> Imprimir
                </a>
                @if(!auth()->user()->isClient())
                <button type="button" @click="sendByWhatsapp()" class="btn btn-outline">
                    <i class="ph ph-whatsapp-logo"></i> WhatsApp
                </button>
                <button type="button" @click="sendByEmail()" class="btn btn-outline">
                    <i class="ph ph-envelope-simple"></i> Correo
                </button>
                @endif
            </div>
        </div>
    </div>

    {{-- Visor de PDF Integrado --}}
    <div class="card shadow-sm" style="height: 75vh;">
        <iframe src="{{ route('quotes.pdf', $quote) }}?t={{ time() }}#toolbar=0&navpanes=0&scrollbar=0&view=FitH" style="width: 100%; height: 100%; border: none; border-radius: 8px;"></iframe>
    </div>

    {{-- Modal de Firma --}}
    <template x-teleport="body">
        <div x-show="showSignatureModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999;">
            <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 20px;">
                <div class="card" style="width: 100%; max-width: 500px; padding: 24px; position: relative;" @click.outside="closeSignaturePad()">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                        <h3 style="margin: 0;">Dibujar Firma</h3>
                        <button type="button" class="btn btn-ghost btn-sm" @click="closeSignaturePad()"><i class="ph ph-x"></i></button>
                    </div>
                    
                    <div style="border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: #fafafa; margin-bottom: 15px;">
                        <canvas x-ref="signatureCanvas" width="450" height="200" style="width: 100%; display: block; cursor: crosshair; touch-action: none;"></canvas>
                    </div>

                    <div style="display: flex; justify-content: space-between;">
                        <button type="button" class="btn btn-ghost text-danger" @click="clearSignature()">Limpiar</button>
                        <button type="button" class="btn" style="background: var(--primary); color: #fff;" @click="saveSignature()" :disabled="isSavingSignature">
                            <span x-show="!isSavingSignature">Guardar Firma</span>
                            <span x-show="isSavingSignature">Guardando...</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>

@push('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('quoteViewer', () => ({
            showSignatureModal: false,
            signatureType: null, // 'creator' or 'client'
            isSavingSignature: false,
            isDrawing: false,
            ctx: null,
            hasSignature: {{ $quote->signature_path ? 'true' : 'false' }},

            async sendByWhatsapp() {
                if (!this.hasSignature) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Firma Requerida',
                        text: 'Por favor, firma la cotización primero.'
                    }).then(() => {
                        this.openSignaturePad('creator');
                    });
                    return;
                }

                const defaultPhone = '{{ preg_replace('/[^0-9]/', '', $quote->customer_phone ?? '') }}';
                
                const { value: phone } = await Swal.fire({
                    title: 'Enviar por WhatsApp',
                    input: 'text',
                    inputLabel: 'Número de WhatsApp',
                    inputValue: defaultPhone,
                    showCancelButton: true,
                    confirmButtonText: 'Abrir WhatsApp',
                    cancelButtonText: 'Cancelar',
                    confirmButtonColor: '#25D366'
                });

                if (phone) {
                    const msg = 'Hola {{ $quote->customer_name }}, adjunto enviamos la cotización solicitada: {{ route('quotes.public.show', $quote->token ?? 'error') }}';
                    
                    try {
                        await fetch('{{ route('quotes.status', $quote) }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({ status: 'Enviada' })
                        });
                    } catch(e) {}
                    
                    window.open('https://wa.me/' + phone.replace(/[^0-9]/g, '') + '?text=' + encodeURIComponent(msg), '_blank');
                    setTimeout(() => window.location.reload(), 1000);
                }
            },

            async sendByEmail() {
                if (!this.hasSignature) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Firma Requerida',
                        text: 'Por favor, firma la cotización antes de enviarla por correo.'
                    }).then(() => {
                        this.openSignaturePad('creator');
                    });
                    return;
                }

                const defaultEmail = '{{ $quote->customer_email ?? '' }}';
                
                const { value: email } = await Swal.fire({
                    title: 'Enviar por Correo',
                    input: 'email',
                    inputLabel: 'Dirección de correo electrónico',
                    inputValue: defaultEmail,
                    showCancelButton: true,
                    confirmButtonText: 'Enviar Correo',
                    cancelButtonText: 'Cancelar',
                    confirmButtonColor: 'var(--primary)'
                });

                if (email) {
                    Swal.fire({
                        title: 'Enviando...',
                        text: 'Por favor espera',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    try {
                        const response = await fetch('{{ route('quotes.email', $quote) }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({ email: email })
                        });
                        
                        const data = await response.json();
                        
                        if(data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Enviado!',
                                text: 'El correo ha sido enviado correctamente.'
                            }).then(() => {
                                window.location.reload();
                            });
                        } else {
                            throw new Error(data.message);
                        }
                    } catch(error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: error.message || 'No se pudo enviar el correo.'
                        });
                    }
                }
            },

            init() {
                this.$watch('showSignatureModal', (val) => {
                    if(val) {
                        setTimeout(() => this.initCanvas(), 100);
                    }
                });
            },

            openSignaturePad(type) {
                this.signatureType = type;
                this.showSignatureModal = true;
            },

            closeSignaturePad() {
                this.showSignatureModal = false;
                this.signatureType = null;
            },

            initCanvas() {
                const canvas = this.$refs.signatureCanvas;
                this.ctx = canvas.getContext('2d');
                this.ctx.lineWidth = 2;
                this.ctx.lineCap = 'round';
                this.ctx.strokeStyle = '#000000';
                
                // Clear initial
                this.clearSignature();

                const getPos = (e) => {
                    const rect = canvas.getBoundingClientRect();
                    return {
                        x: (e.clientX || e.touches[0].clientX) - rect.left,
                        y: (e.clientY || e.touches[0].clientY) - rect.top
                    };
                };

                canvas.addEventListener('mousedown', (e) => {
                    this.isDrawing = true;
                    const pos = getPos(e);
                    this.ctx.beginPath();
                    this.ctx.moveTo(pos.x, pos.y);
                });
                
                canvas.addEventListener('mousemove', (e) => {
                    if (!this.isDrawing) return;
                    const pos = getPos(e);
                    this.ctx.lineTo(pos.x, pos.y);
                    this.ctx.stroke();
                    this.hasDrawn = true;
                });
                
                canvas.addEventListener('mouseup', () => this.isDrawing = false);
                canvas.addEventListener('mouseleave', () => this.isDrawing = false);

                // Touch support
                canvas.addEventListener('touchstart', (e) => {
                    e.preventDefault();
                    this.isDrawing = true;
                    const pos = getPos(e);
                    this.ctx.beginPath();
                    this.ctx.moveTo(pos.x, pos.y);
                });
                canvas.addEventListener('touchmove', (e) => {
                    e.preventDefault();
                    if (!this.isDrawing) return;
                    const pos = getPos(e);
                    this.ctx.lineTo(pos.x, pos.y);
                    this.ctx.stroke();
                    this.hasDrawn = true;
                });
                canvas.addEventListener('touchend', (e) => {
                    e.preventDefault();
                    this.isDrawing = false;
                });
            },

            clearSignature() {
                if(this.ctx) {
                    this.ctx.clearRect(0, 0, this.$refs.signatureCanvas.width, this.$refs.signatureCanvas.height);
                    this.hasDrawn = false;
                }
            },

            async saveSignature() {
                if (!this.hasDrawn) {
                    Swal.fire({
                        title: 'Atención',
                        text: 'Debes dibujar la firma antes de guardar.',
                        icon: 'warning',
                        confirmButtonText: 'Entendido'
                    });
                    return;
                }
                const dataURL = this.$refs.signatureCanvas.toDataURL('image/png');
                
                this.isSavingSignature = true;
                
                try {
                    const response = await fetch('{{ route('quotes.sign', $quote) }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            signature_data: dataURL,
                            type: this.signatureType
                        })
                    });

                    const data = await response.json();
                    if(data.success) {
                        this.hasSignature = true;
                        this.closeSignaturePad();
                        
                        // Si era firma del creador, preguntar si desea enviar
                        if (this.signatureType === 'creator') {
                            const result = await Swal.fire({
                                icon: 'success',
                                title: 'Firma Guardada',
                                text: 'La firma se ha registrado correctamente en la cotización. ¿Deseas enviarla al cliente ahora?',
                                showDenyButton: true,
                                showCancelButton: true,
                                confirmButtonText: 'WhatsApp',
                                denyButtonText: 'Correo',
                                cancelButtonText: 'No enviar'
                            });
                            
                            if (result.isConfirmed) {
                                this.sendByWhatsapp();
                            } else if (result.isDenied) {
                                this.sendByEmail();
                            } else {
                                window.location.reload();
                            }
                        } else {
                            window.location.reload();
                        }
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'Error al guardar la firma',
                            icon: 'error'
                        });
                    }
                } catch(e) {
                    Swal.fire({
                        title: 'Error',
                        text: 'Ocurrió un error de conexión',
                        icon: 'error'
                    });
                } finally {
                    this.isSavingSignature = false;
                }
            }
        }));
    });
</script>
@endpush
@endsection