<?php
/**
 * ASISMA CRM - Listado de Operaciones Post-Venta
 */
?>
<!-- Header -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
    <div>
        <h1 class="text-3xl font-extrabold text-white tracking-tight">Operaciones y Post-Venta</h1>
        <p class="text-slate-400 text-sm mt-1">Seguimiento de capacitación e implementación de marcas ganadas.</p>
    </div>
</div>

<!-- Table Card -->
<div class="bg-slate-900 border border-slate-800/80 rounded-2xl overflow-hidden shadow-xl">
    <div class="overflow-x-auto">
        <table class="w-full text-left text-sm border-collapse">
            <thead>
                <tr class="bg-slate-950 border-b border-slate-800 text-slate-400 uppercase text-xs tracking-wider">
                    <th class="px-6 py-4 font-semibold">Cliente / Empresa</th>
                    <th class="px-6 py-4 font-semibold">Marca a Implementar</th>
                    <th class="px-6 py-4 font-semibold">Tipo Venta</th>
                    <th class="px-6 py-4 font-semibold">Estado Post-Venta</th>
                    <th class="px-6 py-4 font-semibold">Fecha Modificación</th>
                    <th class="px-6 py-4 font-semibold text-right">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-850 text-slate-300">
                <?php if (empty($operaciones)): ?>
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center text-slate-500">No hay operaciones post-venta en curso actualmente.</td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($operaciones as $op): ?>
                        <tr class="hover:bg-slate-800/30 transition-colors">
                            <!-- Cliente -->
                            <td class="px-6 py-4">
                                <div class="font-bold text-slate-100"><?php echo htmlspecialchars($op['cliente_contacto']); ?></div>
                                <div class="text-xs text-slate-500 mt-0.5"><?php echo htmlspecialchars($op['cliente_razon_social']); ?></div>
                                <div class="text-[10px] text-slate-500 font-mono mt-0.5"><?php echo htmlspecialchars($op['franquiciado_nombre']); ?></div>
                            </td>

                            <!-- Marca -->
                            <td class="px-6 py-4 text-xs font-semibold text-slate-200">
                                <?php echo htmlspecialchars($op['marca_nombre']); ?>
                            </td>

                            <!-- Tipo Venta -->
                            <td class="px-6 py-4 text-xs capitalize text-slate-300">
                                <?php $_tv = arr_tipos_venta(); echo isset($_tv[$op['tipo_venta']]) ? $_tv[$op['tipo_venta']] : $op['tipo_venta']; ?>
                            </td>

                            <!-- Estado Implementación -->
                            <td class="px-6 py-4">
                                <?php 
                                $_eimp = arr_estados_implementacion(); $est = isset($_eimp[$op['estado_implementacion']]) ? $_eimp[$op['estado_implementacion']] : array('label' => $op['estado_implementacion'], 'color' => 'bg-slate-850 text-slate-400');
                                ?>
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold <?php echo $est['color']; ?>">
                                    <?php echo $est['label']; ?>
                                </span>
                            </td>

                            <!-- Fecha Actualizacion -->
                            <td class="px-6 py-4 font-mono text-xs text-slate-400">
                                <?php echo date('d-m-Y H:i', strtotime($op['updated_at'])); ?>
                            </td>

                            <!-- Acciones -->
                            <td class="px-6 py-4 text-right">
                                <button type="button" 
                                        onclick="openUpdateModal(<?php echo $op['id']; ?>, '<?php echo $op['estado_implementacion']; ?>', '<?php echo htmlspecialchars(isset($op['notas']) ? $op['notas'] : ''); ?>')"
                                        class="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 hover:text-white rounded-lg text-xs font-semibold transition-colors border border-slate-700">
                                    Actualizar
                                </button>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Modal para Actualizar Estado -->
<div id="updateStateModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-slate-950/60 backdrop-blur-sm px-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl max-w-md w-full p-6 shadow-2xl animate-fade-in relative z-10 text-left">
        <h3 class="text-lg font-bold text-white mb-4">Actualizar Estado Post-Venta</h3>
        
        <form id="updateStateForm" class="space-y-4">
            <input type="hidden" name="id" id="modalOpId">
            
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Nuevo Estado de Implementación</label>
                <select name="estado_implementacion" id="modalOpEstado" required
                        class="block w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <?php foreach (arr_estados_implementacion() as $key => $estVal): ?>
                        <option value="<?php echo $key; ?>"><?php echo $estVal['label']; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Notas / Bitácora de Avance</label>
                <textarea name="notas" id="modalOpNotas" rows="4"
                          class="block w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                          placeholder="Describa el avance de la implementación o capacitación..."></textarea>
            </div>

            <div class="flex justify-end gap-4 pt-4 border-t border-slate-800">
                <button type="button" onclick="closeUpdateModal()"
                        class="px-4 py-2 bg-slate-950 hover:bg-red-500/10 border border-red-500/40 hover:border-red-500/70 text-red-400 text-xs font-semibold rounded-lg transition-colors">
                    Cancelar
                </button>
                <button type="submit"
                        class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold rounded-lg transition-colors">
                    Guardar Cambios
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Modal script and ajax -->
<script>
    function openUpdateModal(id, estado, notas) {
        $('#modalOpId').val(id);
        $('#modalOpEstado').val(estado);
        $('#modalOpNotas').val(notas);
        $('#updateStateModal').removeClass('hidden');
    }

    function closeUpdateModal() {
        $('#updateStateModal').addClass('hidden');
    }

    $('#updateStateForm').on('submit', function(e) {
        e.preventDefault();
        const formData = $(this).serialize();

        $.ajax({
            url: '<?php echo APP_URL; ?>/operaciones/actualizar',
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Actualizado!',
                        text: response.message,
                        background: '#1e293b',
                        color: '#f8fafc',
                        confirmButtonColor: '#3b82f6',
                        timer: 1500,
                        showConfirmButton: false
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message,
                        background: '#1e293b',
                        color: '#f8fafc',
                        confirmButtonColor: '#ef4444'
                    });
                }
            }
        });
    });
</script>

