@extends('layouts.app')

@section('title', 'Historial de Reportes — TI Manager')

@section('content')
<div x-data="{ viewMode: localStorage.getItem('viewMode_history') || 'list' }" class="animate-fadeIn">
    {{-- Header --}}
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title">
                <i class="ph ph-clock-counter-clockwise" style="color: var(--primary); margin-right: 8px;"></i>
                Historial de Reportes
            </h1>
            <div class="d-flex gap-sm" style="align-items: center; flex-wrap: wrap;">
                <div class="view-toggle-group">
                    <button @click="viewMode = 'list'; localStorage.setItem('viewMode_history', '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_history', 'card')"
                            :class="{'active': viewMode === 'card'}"
                            class="view-toggle-btn"
                            title="Vista de Tarjetas">
                        <i class="ph ph-grid-four"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Filtros --}}
    <div class="card" style="margin-bottom: var(--space-lg); padding: var(--space-md);">
        <form method="GET" action="{{ route('reports.history') }}" class="d-flex align-end gap-md" style="flex-wrap: wrap;">
              <div class="form-group" style="flex: 1; min-width: 200px; margin-bottom: 0;">
                  <label for="search" class="form-label" style="display: block;">Buscar por Título o N° Reporte</label>
                  <input type="text" name="search" id="search" class="form-control" value="{{ request('search') }}" placeholder="Ej: REP-2026..." style="min-height: 42px;">
              </div>

              <div class="form-group" style="flex: 1; min-width: 200px; margin-bottom: 0;">
                  <label for="type" class="form-label" style="display: block;">Tipo de Reporte</label>
                <select name="type" id="type" class="form-control">
                    <option value="">Todos los tipos</option>
                    <option value="individual" {{ request('type') == 'individual' ? 'selected' : '' }}>Individual</option>
                    <option value="masivo" {{ request('type') == 'masivo' ? 'selected' : '' }}>Masivo</option>
                </select>
            </div>

            <div class="form-group" style="flex: 1; min-width: 200px; margin-bottom: 0;">
                <label for="company_id" class="form-label" style="display: block;">Empresa</label>
                <select name="company_id" id="company_id" class="form-control" onchange="updateBranches()">
                    <option value="">Todas las empresas</option>
                    @foreach($companies as $company)
                        <option value="{{ $company->id }}" {{ request('company_id') == $company->id ? 'selected' : '' }}>
                            {{ $company->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group" style="flex: 1; min-width: 200px; margin-bottom: 0;">
                <label for="branch_id" class="form-label" style="display: block;">Sede</label>
                <select name="branch_id" id="branch_id" class="form-control">
                    <option value="">Todas las sedes</option>
                </select>
            </div>

            <div class="form-group d-flex gap-sm" style="margin-bottom: 0;">
                <button type="submit" class="btn btn-primary" style="min-height: 42px;">
                  <i class="ph ph-magnifying-glass"></i> Filtrar
              </button>
                @if(request()->hasAny(['search', 'type']))
                    <a href="{{ route('reports.history') }}" class="btn btn-outline" title="Limpiar filtros">
                        <i class="ph ph-x"></i>
                    </a>
                @endif
            </div>
        </form>
    </div>

    @if($pdfReports->count() > 0)
        
        {{-- VISTA MÓVIL: Cards --}}
        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($pdfReports as $report)
                <div class="mobile-card">
                    <div class="mobile-card-header" style="align-items: flex-start; gap: 8px;">
                        <div class="d-flex gap-sm" style="flex: 1; min-width: 0; align-items: flex-start;">
                            <div class="avatar-sm avatar" style="font-size: 1.5rem; color: var(--danger); background: transparent; flex-shrink: 0; margin-top: -2px;">
                                <i class="ph ph-file-pdf"></i>
                            </div>
                            <div style="min-width: 0;">
                                <div class="list-item-title" style="white-space: normal; line-height: 1.3; margin-bottom: 4px;">{{ $report->title }}</div>
                                <div style="font-size: 0.75rem; color: var(--text-muted); font-family: monospace;">{{ $report->report_number }}</div>
                            </div>
                        </div>
                        <div style="flex-shrink: 0;">
                            <span class="badge badge-{{ $report->type == 'masivo' ? 'primary' : 'secondary' }}" style="font-size: 0.65rem; padding: 4px 8px;">
                                {{ strtoupper($report->type) }}
                            </span>
                        </div>
                    </div>

                    <div class="mobile-card-body">
                        <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: flex-start;">
                            <span class="mobile-card-label" style="flex-shrink: 0;">Empresa</span>
                            <span class="mobile-card-value" style="text-align: right; max-width: 60%; word-break: break-word; line-height: 1.3;">{{ $report->company_name ?? 'N/A' }}</span>
                        </div>
                        <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: flex-start;">
                            <span class="mobile-card-label" style="flex-shrink: 0;">Generado por</span>
                            <span class="mobile-card-value" style="text-align: right; max-width: 60%; word-break: break-word; line-height: 1.3;">{{ $report->user->name ?? 'Sistema' }}</span>
                        </div>
                        <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                            <span class="mobile-card-label" style="flex-shrink: 0;">Fecha de creación</span>
                            <span class="mobile-card-value" style="text-align: right;">{{ $report->created_at->format('d/m/Y h:i A') }}</span>
                        </div>
                        
                        <div class="action-icon-group" style="margin-top: 16px;">
                            <a href="{{ route('reports.viewer', $report->id) }}" class="action-icon-btn" title="Ver Reporte">
                                <i class="ph ph-eye"></i>
                            </a>
                            <button type="button" onclick="printPdfUrl('{{ asset('storage/' . $report->file_path) }}')" class="action-icon-btn" title="Imprimir">
                                <i class="ph ph-printer"></i>
                            </button>
                            <button type="button" onclick="sharePdfUrl('{{ asset('storage/' . $report->file_path) }}', '{{ $report->title }}')" class="action-icon-btn" title="WhatsApp">
                                <i class="ph ph-whatsapp-logo"></i>
                            </button>
                            <button type="button" onclick="emailPdfId({{ $report->id }})" class="action-icon-btn" title="Correo">
                                <i class="ph ph-envelope-simple"></i>
                            </button>
                            <a href="{{ asset('storage/' . $report->file_path) }}" download class="action-icon-btn" title="Descargar">
                                <i class="ph ph-download-simple"></i>
                            </a>
                            @if(auth()->user()->isAdmin())
                                <form method="POST" action="{{ route('reports.history.destroy', $report) }}" onsubmit="confirmDelete(event, '¿Estás seguro de eliminar este reporte del historial?')" style="margin: 0; display: inline-flex; flex: 1;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="action-icon-btn danger" style="width: 100%; border-color: var(--danger); color: var(--danger);" title="Eliminar">
                                        <i class="ph ph-trash"></i>
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- VISTA DESKTOP: Tabla --}}
        <div x-show="viewMode === 'list'" class="card table-responsive" x-cloak>
            <table class="table">
                <thead>
                    <tr>
                        <th>N° Reporte</th>
                        <th>Título del Reporte</th>
                        <th>Tipo</th>
                        <th>Empresa</th>
                        <th>Generado por</th>
                        <th>Fecha</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pdfReports as $report)
                        <tr>
                            <td>
                                <span style="font-family: monospace; font-size: 0.85rem; background: var(--bg-hover); padding: 2px 6px; border-radius: var(--radius-sm);">
                                    {{ $report->report_number }}
                                </span>
                            </td>
                            <td>
                                <div class="d-flex align-center gap-sm">
                                    <i class="ph ph-file-pdf" style="color: var(--danger); font-size: 1.5rem;"></i>
                                    <span style="font-weight: 500;">{{ $report->title }}</span>
                                </div>
                            </td>
                            <td>
                                <span class="badge badge-{{ $report->type == 'masivo' ? 'primary' : 'secondary' }}">
                                    {{ ucfirst($report->type) }}
                                </span>
                            </td>
                            <td>{{ $report->company_name ?? 'N/A' }}</td>
                            <td>{{ $report->user->name ?? 'Sistema' }}</td>
                            <td>{{ $report->created_at->format('d/m/Y h:i A') }}</td>
                            <td>
                                <div class="action-icon-group desktop-group">
                            <a href="{{ route('reports.viewer', $report->id) }}" class="action-icon-btn" title="Ver Reporte">
                                <i class="ph ph-eye"></i>
                            </a>
                            <button type="button" onclick="printPdfUrl('{{ asset('storage/' . $report->file_path) }}')" class="action-icon-btn" title="Imprimir">
                                <i class="ph ph-printer"></i>
                            </button>
                            <button type="button" onclick="sharePdfUrl('{{ asset('storage/' . $report->file_path) }}', '{{ $report->title }}')" class="action-icon-btn" title="WhatsApp">
                                <i class="ph ph-whatsapp-logo"></i>
                            </button>
                            <button type="button" onclick="emailPdfId({{ $report->id }})" class="action-icon-btn" title="Correo">
                                <i class="ph ph-envelope-simple"></i>
                            </button>
                            <a href="{{ asset('storage/' . $report->file_path) }}" download class="action-icon-btn" title="Descargar">
                                <i class="ph ph-download-simple"></i>
                            </a>
                            @if(auth()->user()->isAdmin())
                                <form method="POST" action="{{ route('reports.history.destroy', $report) }}" onsubmit="confirmDelete(event, '¿Estás seguro de eliminar este reporte del historial?')" style="margin: 0;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="action-icon-btn danger" style="border-color: var(--danger); color: var(--danger);" title="Eliminar">
                                        <i class="ph ph-trash"></i>
                                    </button>
                                </form>
                            @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        @if($pdfReports->hasPages())
            <div style="padding: var(--space-md); border-top: 1px solid var(--border-color);">
                {{ $pdfReports->withQueryString()->links() }}
            </div>
        @endif

    @else
        <div class="card" style="padding: var(--space-xl); text-align: center;">
            <i class="ph ph-files" style="font-size: 3rem; color: var(--text-muted); opacity: 0.5; margin-bottom: var(--space-sm);"></i>
            <h3 style="margin-bottom: var(--space-xs);">No se encontraron reportes</h3>
            <p class="text-muted">No hay reportes que coincidan con los filtros o el historial está vacío.</p>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<style>
    .action-icon-group {
        display: flex;
        gap: 6px;
        align-items: center;
        width: 100%;
    }
    .action-icon-group:not(.desktop-group) {
        justify-content: space-between;
    }
    .desktop-group {
        width: auto;
    }
    .action-icon-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 6px;
        border: none;
        background: #f1f5f9; /* Gris muy claro */
        color: var(--text-primary);
        transition: all 0.2s;
        cursor: pointer;
        padding: 0;
        text-decoration: none;
        flex: 1; /* Make them fill space on mobile */
    }
    .desktop-group .action-icon-btn {
        flex: none; /* Do not fill space on desktop */
    }
    .action-icon-btn i {
        font-size: 1.1rem;
        color: #64748b !important; /* Gris oscuro para el icono */
        transition: color 0.2s;
    }
    .action-icon-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        background: #e2e8f0;
    }
    .action-icon-btn:hover i {
        color: var(--primary) !important;
    }
    .action-icon-btn.danger {
        background: #fef2f2;
    }
    .action-icon-btn.danger i {
        color: #ef4444 !important;
    }
    .action-icon-btn.danger:hover {
        background: #fee2e2;
    }
    .swal-email-modal {
        width: 90% !important;
    }
    @media(min-width: 768px) {
        .swal-email-modal {
            width: 450px !important;
        }
    }
</style>
<script>
    const companiesData = @json($companies);
    const selectedBranch = "{{ request('branch_id') }}";

    function updateBranches() {
        const companyId = document.getElementById('company_id').value;
        const branchSelect = document.getElementById('branch_id');
        
        branchSelect.innerHTML = '<option value="">Todas las sedes</option>';
        
        if (!companyId) return;

        const company = companiesData.find(c => c.id == companyId);
        if (company && company.branches) {
            company.branches.forEach(branch => {
                const option = document.createElement('option');
                option.value = branch.id;
                option.text = branch.name;
                if (selectedBranch == branch.id) {
                    option.selected = true;
                }
                branchSelect.appendChild(option);
            });
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        if (document.getElementById('company_id').value) {
            updateBranches();
        }
    });

    function printPdfUrl(url) {
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = url;
        document.body.appendChild(iframe);
        iframe.onload = function() {
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
        };
    }

    async function sharePdfUrl(fileUrl, title) {
        const text = "Te comparto el reporte generado.";
        try {
            if (navigator.canShare) {
                const response = await fetch(fileUrl);
                const blob = await response.blob();
                const file = new File([blob], fileUrl.split('/').pop(), { type: 'application/pdf' });
                
                if (navigator.canShare({ files: [file] })) {
                    await navigator.share({
                        files: [file],
                        title: title,
                        text: text
                    });
                    return;
                }
            }
        } catch (error) {
            console.warn('Web Share API falló o se canceló', error);
        }
        
        const whatsappUrl = "https://wa.me/?text=" + encodeURIComponent(text + " Puedes descargarlo aquí: " + window.location.origin + fileUrl);
        window.open(whatsappUrl, '_blank');
    }

    function emailPdfId(reportId) {
        Swal.fire({
            title: 'Enviar por Correo',
            html: '<p style="margin-bottom: 10px; color: #666; font-size: 0.9rem;">Se enviará una copia en PDF.</p>',
            input: 'email',
            inputPlaceholder: 'ejemplo@empresa.com',
            showCancelButton: true,
            confirmButtonText: 'Enviar',
            cancelButtonText: 'Cancelar',
            confirmButtonColor: 'var(--primary)',
            cancelButtonColor: '#94a3b8',
            padding: '1.25em',
            customClass: {
                popup: 'rounded-4 swal-email-modal',
                confirmButton: 'btn btn-primary',
                cancelButton: 'btn btn-outline'
            }
        }).then((result) => {
            if (result.isConfirmed && result.value) {
                let form = document.createElement('form');
                form.method = 'POST';
                form.action = `/reports/viewer/${reportId}/email`;
                
                let csrf = document.createElement('input');
                csrf.type = 'hidden';
                csrf.name = '_token';
                csrf.value = "{{ csrf_token() }}";
                
                let email = document.createElement('input');
                email.type = 'hidden';
                email.name = 'email';
                email.value = result.value;
                
                form.appendChild(csrf);
                form.appendChild(email);
                document.body.appendChild(form);
                
                Swal.fire({
                    title: 'Enviando...',
                    text: 'Por favor espera mientras se envía el correo.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                
                form.submit();
            }
        });
    }
</script>
@endpush