@extends('layouts.app')

@section('title', 'Cotizaciones — ' . \App\Models\Setting::get('app_name', 'TI Manager'))

@section('content')
<div class="animate-fadeIn" x-data="{ viewMode: localStorage.getItem('viewMode_quotes') || (window.innerWidth < 768 ? 'card' : 'list') }">
    
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title">
                <i class="ph ph-file-text" style="color: var(--primary);"></i>
                Cotizaciones
                <span class="count">({{ $quotes->total() }} registros)</span>
            </h1>
            <div class="d-flex gap-sm" style="align-items: center;">
                <div class="view-toggle-group">
                    <button @click="viewMode = 'list'; localStorage.setItem('viewMode_quotes', 'list')"
                            :class="{'active': viewMode === 'list'}"
                            class="view-toggle-btn"
                            title="Vista de Lista">
                        <i class="ph ph-list"></i>
                    </button>
                    <button @click="viewMode = 'card'; localStorage.setItem('viewMode_quotes', 'card')"
                            :class="{'active': viewMode === 'card'}"
                            class="view-toggle-btn"
                            title="Vista de Tarjetas">
                        <i class="ph ph-grid-four"></i>
                    </button>
                </div>
                @if(!auth()->user()->isClient())
                <a href="{{ route('quotes.create') }}" class="btn btn-primary btn-sm">
                    <i class="ph ph-plus"></i>
                    <span>Nueva Cotización</span>
                </a>
                @endif
            </div>
        </div>
    </div>

    {{-- Filtros --}}
    <div class="card" style="padding: var(--space-md); margin-bottom: var(--space-lg);">
        <div style="display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: space-between; align-items: flex-end;">
            <div class="form-group" style="margin-bottom: 0;">
                <label style="display: block; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);">Filtrar por Estado</label>
                <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                    @php $currentStatus = request('status', 'all'); @endphp
                    <a href="{{ route('quotes.index', ['status' => 'all']) }}" class="btn btn-sm {{ $currentStatus === 'all' ? 'btn-primary' : 'btn-outline' }}" style="box-shadow: none; font-weight: 500;">Todos los estados</a>
                    @if(!auth()->user()->isClient())
                    <a href="{{ route('quotes.index', ['status' => 'Borrador']) }}" class="btn btn-sm {{ $currentStatus === 'Borrador' ? 'btn-primary' : 'btn-outline' }}" style="box-shadow: none; font-weight: 500;">Borrador</a>
                    @endif
                    <a href="{{ route('quotes.index', ['status' => 'Enviada']) }}" class="btn btn-sm {{ $currentStatus === 'Enviada' ? 'btn-primary' : 'btn-outline' }}" style="box-shadow: none; font-weight: 500;">{{ auth()->user()->isClient() ? 'Por Aprobar' : 'Enviada' }}</a>
                    <a href="{{ route('quotes.index', ['status' => 'Aceptada']) }}" class="btn btn-sm {{ $currentStatus === 'Aceptada' ? 'btn-primary' : 'btn-outline' }}" style="box-shadow: none; font-weight: 500;">Aceptada</a>
                    <a href="{{ route('quotes.index', ['status' => 'Rechazada']) }}" class="btn btn-sm {{ $currentStatus === 'Rechazada' ? 'btn-primary' : 'btn-outline' }}" style="box-shadow: none; font-weight: 500;">Rechazada</a>
                </div>
            </div>
        </div>
    </div>

    @if($quotes->count() > 0)
        {{-- VISTA LISTA: Tabla --}}
        <div class="card-glass" style="padding: 0; overflow: hidden;" x-show="viewMode === 'list'" x-cloak>
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; text-align: left;">
                    <thead>
                        <tr style="border-bottom: 2px solid rgba(0,0,0,0.05); background: rgba(0,0,0,0.02);">
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase;">Número</th>
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase;">Cliente / Empresa</th>
                            @if(auth()->user()->isAdmin())
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase;">Creador</th>
                            @endif
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase;">Fecha</th>
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase;">Total</th>
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase;">Estado</th>
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase; text-align: right;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($quotes as $quote)
                        <tr style="border-bottom: 1px solid rgba(0,0,0,0.05); transition: var(--transition-fast);" onmouseover="this.style.backgroundColor='rgba(0,0,0,0.01)'" onmouseout="this.style.backgroundColor='transparent'">
                            <td style="padding: 16px; font-weight: 600; color: var(--primary);">
                                {{ $quote->quote_number }}
                            </td>
                            <td style="padding: 16px;">
                                <div style="font-weight: 600;">{{ $quote->customer_name }}</div>
                                @if($quote->customer_email)
                                    <div style="font-size: 0.8rem; color: var(--text-muted);">{{ $quote->customer_email }}</div>
                                @endif
                            </td>
                            @if(auth()->user()->isAdmin())
                            <td style="padding: 16px; color: var(--text-muted); font-size: 0.95rem;">
                                <div style="display: flex; align-items: center; gap: 6px;">
                                    <i class="ph ph-user" style="color: var(--primary);"></i>
                                    {{ $quote->creator ? $quote->creator->name : 'Sistema' }}
                                </div>
                            </td>
                            @endif
                            <td style="padding: 16px; color: var(--text-muted); font-size: 0.95rem;">
                                {{ $quote->created_at->format('d M, Y') }}
                            </td>
                            <td style="padding: 16px; font-weight: 600; font-size: 1.05rem;">
                                ${{ number_format($quote->total, 0) }}
                            </td>
                            <td style="padding: 16px;">
                                @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
                                <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 4px;">
                                    <span style="display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; background: {{ $color['bg'] }}; color: {{ $color['color'] }};">
                                        {{ (auth()->user()->isClient() && $quote->status === 'Enviada') ? 'Por Aprobar' : $quote->status }}
                                    </span>
                                    @if($isExpired)
                                    <span style="display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; background: rgba(239, 68, 68, 0.1); color: #ef4444;">
                                        <i class="ph ph-warning-circle"></i> Vencida
                                    </span>
                                    @endif
                                </div>
                            </td>
                            <td style="padding: 16px; text-align: right;">
                                <div style="display: flex; gap: 8px; justify-content: flex-end;">
                                    @if(auth()->user()->isClient() && $quote->status === 'Enviada')
                                        <a href="{{ route('quotes.public.show', $quote->token) }}" target="_blank" class="btn btn-sm btn-primary" title="Aprobar y Firmar" style="padding: 6px 12px; display: inline-flex; align-items: center; gap: 4px;">
                                            <i class="ph ph-pen-nib" style="font-size: 1.1rem;"></i> Aprobar
                                        </a>
                                        <a href="{{ route('quotes.pdf', $quote) }}" target="_blank" class="btn btn-sm btn-ghost text-primary" title="Imprimir" style="padding: 6px;">
                                            <i class="ph ph-printer" style="font-size: 1.1rem;"></i>
                                        </a>
                                    @endif
                                    @if(!auth()->user()->isClient() && $quote->status === 'Borrador')
                                        <a href="{{ route('quotes.edit', $quote) }}" class="btn btn-sm btn-ghost text-primary" title="Editar" style="padding: 6px;">
                                            <i class="ph ph-pencil-simple" style="font-size: 1.1rem;"></i>
                                        </a>
                                    @endif
                                    <a href="{{ route('quotes.show', $quote) }}" class="btn btn-sm btn-ghost text-primary" title="Ver Detalle" style="padding: 6px;">
                                        <i class="ph ph-eye" style="font-size: 1.1rem;"></i>
                                    </a>
                                    @if(!auth()->user()->isClient() && in_array($quote->status, ['Enviada', 'Aceptada', 'Rechazada']))
                                        <button type="button" onclick="copyToClipboard('{{ route('quotes.public.show', $quote->token) }}')" class="btn btn-sm btn-ghost text-primary" title="Copiar Link Público" style="padding: 6px;">
                                            <i class="ph ph-link" style="font-size: 1.1rem;"></i>
                                        </button>
                                    @endif
                                    @if(!auth()->user()->isClient())
                                    <form action="{{ route('quotes.destroy', $quote) }}" method="POST" style="display: inline;" onsubmit="confirmDelete(event, '¿Eliminar esta cotización?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-ghost text-danger" title="Eliminar" style="padding: 6px;">
                                            <i class="ph ph-trash" style="font-size: 1.1rem;"></i>
                                        </button>
                                    </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- VISTA TARJETAS: Grid responsivo --}}
        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($quotes as $quote)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-sm">
                            <span style="font-weight: 700; color: var(--primary); font-size: 1.05rem;">{{ $quote->quote_number }}</span>
                        </div>
                        @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
                        <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 4px;">
                            <span style="display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; background: {{ $color['bg'] }}; color: {{ $color['color'] }};">
                                {{ (auth()->user()->isClient() && $quote->status === 'Enviada') ? 'Por Aprobar' : $quote->status }}
                            </span>
                            @if($isExpired)
                            <span style="display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; background: rgba(239, 68, 68, 0.1); color: #ef4444;">
                                <i class="ph ph-warning-circle"></i> Vencida
                            </span>
                            @endif
                        </div>
                    </div>

                    <div class="mobile-card-body">
                        <div style="font-weight: 600; font-size: 0.95rem; margin-bottom: var(--space-sm); color: var(--text-primary); line-height: 1.4;">
                            {{ $quote->customer_name }}
                        </div>
                        @if($quote->customer_email)
                        <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                            <span class="mobile-card-label">Email</span>
                            <span class="mobile-card-value">{{ $quote->customer_email }}</span>
                        </div>
                        @endif
                        @if(auth()->user()->isAdmin())
                        <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                            <span class="mobile-card-label">Creador</span>
                            <span class="mobile-card-value">
                                <i class="ph ph-user" style="font-size: 0.9rem; margin-right: 4px;"></i>
                                {{ $quote->creator ? $quote->creator->name : 'Sistema' }}
                            </span>
                        </div>
                        @endif
                        <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                            <span class="mobile-card-label">Fecha</span>
                            <span class="mobile-card-value" style="font-size: 0.85rem;">{{ $quote->created_at->format('d/m/Y') }}</span>
                        </div>
                        <div class="mobile-card-row" style="margin-bottom: 8px; flex-direction: row; justify-content: space-between; align-items: center;">
                            <span class="mobile-card-label">Total</span>
                            <span class="mobile-card-value" style="font-weight: 700; font-size: 1.1rem;">${{ number_format($quote->total, 0) }}</span>
                        </div>
                    </div>

                    <div class="mobile-card-actions" style="margin-top: 24px; padding-top: 20px;">
                        @if(auth()->user()->isClient() && $quote->status === 'Enviada')
                            <a href="{{ route('quotes.public.show', $quote->token) }}" target="_blank" class="btn btn-primary btn-sm" style="flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px;">
                                <i class="ph ph-pen-nib"></i> Aprobar
                            </a>
                            <a href="{{ route('quotes.pdf', $quote) }}" target="_blank" class="btn btn-outline btn-sm" style="flex: 1; padding: 0 5px;" title="Imprimir">
                                <i class="ph ph-printer"></i> Imprimir
                            </a>
                        @endif
                        <a href="{{ route('quotes.show', $quote) }}" class="btn btn-outline btn-sm" style="flex: 1;">
                            <i class="ph ph-eye"></i> Ver
                        </a>
                        @if(!auth()->user()->isClient() && in_array($quote->status, ['Enviada', 'Aceptada', 'Rechazada']))
                            <button type="button" onclick="copyToClipboard('{{ route('quotes.public.show', $quote->token) }}')" class="btn btn-outline btn-sm" style="flex: 1; padding: 0 5px;" title="Copiar Link Público">
                                <i class="ph ph-link"></i> Link
                            </button>
                        @endif
                        @if(!auth()->user()->isClient() && $quote->status === 'Borrador')
                            <a href="{{ route('quotes.edit', $quote) }}" class="btn btn-outline btn-sm" style="flex: 1;">
                                <i class="ph ph-pencil-simple"></i> Editar
                            </a>
                        @endif
                        @if(!auth()->user()->isClient())
                        <form action="{{ route('quotes.destroy', $quote) }}" method="POST" style="flex: 1; display: flex;" onsubmit="confirmDelete(event, '¿Eliminar esta cotización?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-danger btn-sm" style="flex: 1; width: 100%;">
                                <i class="ph ph-trash"></i>
                            </button>
                        </form>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Paginación --}}
        @if($quotes->hasPages())
        <div style="padding: 16px;">
            {{ $quotes->links() }}
        </div>
        @endif
    @else
        <div class="card">
            <div class="empty-state" style="padding: 40px 20px; text-align: center; color: var(--text-muted);">
                <i class="ph ph-file-text" style="font-size: 3rem; opacity: 0.5; margin-bottom: 10px; display: block;"></i>
                <h3 style="margin-bottom: var(--space-sm); color: var(--text-secondary);">No hay cotizaciones registradas</h3>
                <p style="margin-bottom: var(--space-lg);">Aún no hay cotizaciones en el sistema.</p>
                @if(!auth()->user()->isClient())
                <a href="{{ route('quotes.create') }}" class="btn btn-primary">
                    <i class="ph ph-plus"></i> Crear la primera cotización
                </a>
                @endif
            </div>
        </div>
    @endif

</div>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        if(typeof Swal !== 'undefined') {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: 'Enlace copiado',
                showConfirmButton: false,
                timer: 2000
            });
        } else {
            Swal.fire({ title: 'Atención', text: 'Enlace copiado al portapapeles', icon: 'warning', confirmButtonText: 'Entendido' });
        }
    }).catch(function() {
        // Fallback for older browsers
        const tempInput = document.createElement('input');
        tempInput.value = text;
        document.body.appendChild(tempInput);
        tempInput.select();
        document.execCommand('copy');
        document.body.removeChild(tempInput);
        Swal.fire({ title: 'Atención', text: 'Enlace copiado al portapapeles', icon: 'warning', confirmButtonText: 'Entendido' });
    });
}
</script>
@endsection