@extends('layouts.goberdata')

@section('title', 'Call Center')
@section('page_title', 'Call Center')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@push('styles')
<style>
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
    </style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')
<!-- Header -->
            <header class="flex justify-between items-center p-6 bg-white border-b border-gray-200 shadow-sm">
                <h1 class="text-2xl font-semibold text-gray-800">Call Center</h1>
                <div class="flex items-center space-x-4">
                    <button onclick="exportCalls()" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
                        <i class="fas fa-download mr-2"></i>Exportar
                    </button>
                    <button onclick="addCall()" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
                        <i class="fas fa-plus mr-2"></i>Nueva Llamada
                    </button>
                </div>
            </header>

            <!-- Main Content -->
            <main class="flex-1 bg-gray-100 p-3">
                <div class="w-full">
                    <!-- Stats Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        <div class="bg-gradient-to-br from-blue-500 to-blue-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Total Llamadas</p>
                                <i class="fas fa-phone text-3xl opacity-50"></i>
                            </div>
                            <p id="totalCalls" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Registradas</p>
                        </div>
                        <div class="bg-gradient-to-br from-green-500 to-green-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Completadas</p>
                                <i class="fas fa-check-circle text-3xl opacity-50"></i>
                            </div>
                            <p id="completedCalls" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Exitosas</p>
                        </div>
                        <div class="bg-gradient-to-br from-yellow-500 to-yellow-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Pendientes</p>
                                <i class="fas fa-clock text-3xl opacity-50"></i>
                            </div>
                            <p id="pendingCalls" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Por realizar</p>
                        </div>
                        <div class="bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Duración Promedio</p>
                                <i class="fas fa-stopwatch text-3xl opacity-50"></i>
                            </div>
                            <p id="avgDuration" class="text-4xl font-bold">0m</p>
                            <p class="text-xs opacity-75 mt-1">Por llamada</p>
                        </div>
                    </div>

                    <!-- Charts Section -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Llamadas por Estado</h3>
                            <div class="chart-container">
                                <canvas id="statusChart"></canvas>
                            </div>
                        </div>
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Llamadas por Resultado</h3>
                            <div class="chart-container">
                                <canvas id="outcomeChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Scripts Section -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-bold">Scripts de Llamada</h3>
                            <button onclick="addScript()" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
                                <i class="fas fa-plus mr-2"></i>Nuevo Script
                            </button>
                        </div>
                        <div id="scriptsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <!-- Scripts will be loaded here -->
                        </div>
                    </div>

                    <!-- Filters -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Filtros</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Estado</label>
                                <select id="statusFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                                    <option value="">Todos</option>
                                    <option value="scheduled">Programadas</option>
                                    <option value="in_progress">En Progreso</option>
                                    <option value="completed">Completadas</option>
                                    <option value="failed">Fallidas</option>
                                    <option value="no_answer">Sin Respuesta</option>
                                    <option value="busy">Ocupado</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Resultado</label>
                                <select id="outcomeFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                                    <option value="">Todos</option>
                                    <option value="successful">Exitoso</option>
                                    <option value="unsuccessful">No Exitoso</option>
                                    <option value="no_answer">Sin Respuesta</option>
                                    <option value="busy">Ocupado</option>
                                    <option value="failed">Fallido</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Agente</label>
                                <select id="agentFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                                    <option value="">Todos</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Fecha</label>
                                <input type="date" id="dateFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                            </div>
                        </div>
                        <div class="mt-4 flex justify-between">
                            <button onclick="clearFilters()" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600">
                                <i class="fas fa-times mr-2"></i>Limpiar Filtros
                            </button>
                            <button onclick="applyFilters()" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
                                <i class="fas fa-search mr-2"></i>Aplicar Filtros
                            </button>
                        </div>
                    </div>

                    <!-- Calls Table -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-bold mb-4">Lista de Llamadas</h3>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('id')">
                                            ID <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('phone_number')">
                                            Teléfono <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('status')">
                                            Estado <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('outcome')">
                                            Resultado <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agente</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('duration')">
                                            Duración <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('created_at')">
                                            Fecha <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="callsTableBody" class="bg-white divide-y divide-gray-200">
                                    <!-- Data will be loaded here -->
                                </tbody>
                            </table>
                        </div>
                        <div id="pagination" class="mt-4 flex justify-between items-center">
                            <!-- Pagination will be loaded here -->
                        </div>
                    </div>
                </div>
            </main>
@endsection

@push('scripts')
<script>
        const token = localStorage.getItem('auth_token');
        if (!token) {
            window.location.href = '/login';
        }

        let currentPage = 1;
        let currentFilters = {};
        let currentSort = { field: 'created_at', order: 'desc' };

        document.addEventListener('DOMContentLoaded', function() {
            loadDashboardData();
            loadCalls();
        });

        async function loadDashboardData() {
            try {
                const response = await fetch('/api/call-center/dashboard', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                console.log('Call Center Dashboard Data:', data);

                // Update stats cards
                document.getElementById('totalCalls').textContent = data.stats.total_calls.toLocaleString();
                document.getElementById('completedCalls').textContent = data.stats.completed_calls.toLocaleString();
                document.getElementById('pendingCalls').textContent = data.stats.pending_calls.toLocaleString();
                document.getElementById('avgDuration').textContent = Math.round(data.stats.avg_duration / 60) + 'm';

                // Render charts
                renderStatusChart(data.calls_by_status);
                renderOutcomeChart(data.calls_by_outcome);

                // Load scripts
                loadScripts();

            } catch (error) {
                console.error('Error loading call center dashboard data:', error);
                alert('Error al cargar los datos del call center. Por favor, intente de nuevo.');
            }
        }

        async function loadCalls() {
            try {
                const params = new URLSearchParams({
                    page: currentPage,
                    per_page: 25,
                    sort_by: currentSort.field,
                    sort_order: currentSort.order,
                    ...currentFilters
                });

                const response = await fetch(`/api/call-center/calls?${params}`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                console.log('Calls Data:', data);

                // Populate table
                const tbody = document.getElementById('callsTableBody');
                tbody.innerHTML = '';
                
                data.data.forEach(call => {
                    const row = `
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${call.id}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${call.phone_number}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full ${getStatusBadge(call.status)}">
                                    ${call.status}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full ${getOutcomeBadge(call.outcome)}">
                                    ${call.outcome || 'N/A'}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${call.agent ? call.agent.name : 'N/A'}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${call.duration ? Math.round(call.duration / 60) + 'm' : 'N/A'}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${new Date(call.created_at).toLocaleDateString()}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button onclick="viewCall(${call.id})" class="text-blue-600 hover:text-blue-900 mr-2">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button onclick="editCall(${call.id})" class="text-green-600 hover:text-green-900 mr-2">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button onclick="makeCall(${call.id})" class="text-purple-600 hover:text-purple-900">
                                    <i class="fas fa-phone"></i>
                                </button>
                            </td>
                        </tr>
                    `;
                    tbody.innerHTML += row;
                });

                // Update pagination
                updatePagination(data);

            } catch (error) {
                console.error('Error loading calls:', error);
                alert('Error al cargar la lista de llamadas. Por favor, intente de nuevo.');
            }
        }

        async function loadScripts() {
            try {
                const response = await fetch('/api/call-center/scripts', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                console.log('Scripts Data:', data);

                const container = document.getElementById('scriptsContainer');
                container.innerHTML = '';
                
                data.data.forEach(script => {
                    const scriptCard = `
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h4 class="font-semibold text-gray-800 mb-2">${script.name}</h4>
                            <p class="text-sm text-gray-600 mb-3">${script.content.substring(0, 100)}...</p>
                            <div class="flex justify-between items-center">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full ${script.is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}">
                                    ${script.is_active ? 'Activo' : 'Inactivo'}
                                </span>
                                <div class="space-x-2">
                                    <button onclick="editScript(${script.id})" class="text-blue-600 hover:text-blue-900">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button onclick="deleteScript(${script.id})" class="text-red-600 hover:text-red-900">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    `;
                    container.innerHTML += scriptCard;
                });

            } catch (error) {
                console.error('Error loading scripts:', error);
            }
        }

        function renderStatusChart(data) {
            const ctx = document.getElementById('statusChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: data.map(item => item.status),
                    datasets: [{
                        data: data.map(item => item.count),
                        backgroundColor: ['#10B981', '#F59E0B', '#EF4444', '#6B7280', '#8B5CF6'],
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
        }

        function renderOutcomeChart(data) {
            const ctx = document.getElementById('outcomeChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.map(item => item.outcome),
                    datasets: [{
                        label: 'Llamadas',
                        data: data.map(item => item.count),
                        backgroundColor: '#6366F1',
                        borderColor: '#4F46E5',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function getStatusBadge(status) {
            const badges = {
                'scheduled': 'bg-blue-100 text-blue-800',
                'in_progress': 'bg-yellow-100 text-yellow-800',
                'completed': 'bg-green-100 text-green-800',
                'failed': 'bg-red-100 text-red-800',
                'no_answer': 'bg-gray-100 text-gray-800',
                'busy': 'bg-orange-100 text-orange-800'
            };
            return badges[status] || 'bg-gray-100 text-gray-800';
        }

        function getOutcomeBadge(outcome) {
            const badges = {
                'successful': 'bg-green-100 text-green-800',
                'unsuccessful': 'bg-red-100 text-red-800',
                'no_answer': 'bg-gray-100 text-gray-800',
                'busy': 'bg-orange-100 text-orange-800',
                'failed': 'bg-red-100 text-red-800'
            };
            return badges[outcome] || 'bg-gray-100 text-gray-800';
        }

        function applyFilters() {
            currentFilters = {
                status: document.getElementById('statusFilter').value,
                outcome: document.getElementById('outcomeFilter').value,
                agent: document.getElementById('agentFilter').value,
                date: document.getElementById('dateFilter').value
            };
            
            // Remove empty filters
            Object.keys(currentFilters).forEach(key => {
                if (!currentFilters[key]) {
                    delete currentFilters[key];
                }
            });
            
            currentPage = 1;
            loadCalls();
        }

        function clearFilters() {
            document.getElementById('statusFilter').value = '';
            document.getElementById('outcomeFilter').value = '';
            document.getElementById('agentFilter').value = '';
            document.getElementById('dateFilter').value = '';
            currentFilters = {};
            currentPage = 1;
            loadCalls();
        }

        function sortTable(field) {
            if (currentSort.field === field) {
                currentSort.order = currentSort.order === 'asc' ? 'desc' : 'asc';
            } else {
                currentSort.field = field;
                currentSort.order = 'asc';
            }
            loadCalls();
        }

        function updatePagination(data) {
            const pagination = document.getElementById('pagination');
            const totalPages = data.last_page;
            
            let paginationHTML = `
                <div class="text-sm text-gray-700">
                    Mostrando ${data.from || 0} a ${data.to || 0} de ${data.total} resultados
                </div>
                <div class="flex space-x-2">
            `;
            
            if (data.prev_page_url) {
                paginationHTML += `<button onclick="changePage(${data.current_page - 1})" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Anterior</button>`;
            }
            
            for (let i = 1; i <= Math.min(totalPages, 5); i++) {
                const activeClass = i === data.current_page ? 'bg-blue-500 text-white' : 'border border-gray-300 hover:bg-gray-50';
                paginationHTML += `<button onclick="changePage(${i})" class="px-3 py-1 rounded ${activeClass}">${i}</button>`;
            }
            
            if (data.next_page_url) {
                paginationHTML += `<button onclick="changePage(${data.current_page + 1})" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Siguiente</button>`;
            }
            
            paginationHTML += '</div>';
            pagination.innerHTML = paginationHTML;
        }

        function changePage(page) {
            currentPage = page;
            loadCalls();
        }

        function viewCall(id) {
            alert(`Ver llamada ${id} - Funcionalidad pendiente`);
        }

        function editCall(id) {
            alert(`Editar llamada ${id} - Funcionalidad pendiente`);
        }

        function makeCall(id) {
            alert(`Realizar llamada ${id} - Funcionalidad pendiente`);
        }

        function addCall() {
            alert('Agregar llamada - Funcionalidad pendiente');
        }

        function addScript() {
            alert('Agregar script - Funcionalidad pendiente');
        }

        function editScript(id) {
            alert(`Editar script ${id} - Funcionalidad pendiente`);
        }

        function deleteScript(id) {
            alert(`Eliminar script ${id} - Funcionalidad pendiente`);
        }

        function exportCalls() {
            alert('Exportar llamadas - Funcionalidad pendiente');
        }
    </script>
@endpush